Basic CSS

An external style is one in which you write the CSS code in a document separate from the HTML for the Web page. External style sheets can format some or all of the pages at your Web site. As such, external style sheets are the preferred method for writing CSS code.
An embedded style is one in which you write the CSS code in the <head> section of an HTML document. Embedded styles apply only to the one document in which they are embedded.
An inline style is one that is written in the <body> section of an HTML document. Inline styles format just a section of text within the <body> text.

Sample CSS:

h2 {
font-style: italic;
font-size: 20pt;
font-family: arial,helvetica,sans-serif;
text-align: center;
color: orange;
background-color: black; }

Syntax:

selector {
property1:value;
property2:value; }
Properties:

font-style: Sets the appearance of text as italic, oblique, or normal
font-weight: Sets the weight of text as lighter, bold, bolder, or normal
font-size: Sets the size of text
font-family: Sets the typeface, such as serif or sans-serif
font-variant: Displays text in small caps or normal
font: A shortcut property that sets the values for several font properties all at once

line-height: changes vertical spacing between lines of text
margin: The margin property adds white space around an element and is used with block-level elements

color: changes the foreground color, which determines the color of text
background-color: change the background color of an element

display: The display property is one of the CSS classification properties. The classification properties are a group of properties that affect the positioning of elements. The display property determines how and if an element is displayed. There are many values for the display property, but the two most used are inline and block

letter-spacing: You use the letter-spacing property to control the amount of white space between letters. Letter spacing is also known as kerning in typography
word-spacing: You use the word-spacing property to create white space between words

text-align: this property is used to align text horizontally. The text-align property takes the following values: left (the default), center, right, justify

text-indent: Use the text-indent property to indent the first line of paragraph text, similar to pressing the Tab key on a keyboard.

margin-top:
margin-right:
margin-bottom:
margin-left:

text-transform: The text-transform property takes the following values: uppercase (TEXT APPEARS IN ALL CAPS), capitalize (Text Appears With The First Letter Of Each Word Capitalized), lowercase (text appears in lowercase), none (removes any of the preceding choices)

Values:

font-style italic, oblique, normal
font-weight lighter, bold, bolder (also as a number from 100–900 in increments of 100)
font-variant small-caps, normal
font-size pts, ems, or as a percentage
font-family Specify a font list of several fonts; the list must end with the word serif or sans-serif
color Any named color, RGB, or hexadecimal value
background-color Any named color, RGB, or hexadecimal value
margin Use a value of zero if you are changing the line-height property to a value greater than 1.0
line-height Specify a number with a decimal place such as 1.0, 1.5, or 2.0
display Specify a value of inline if you want to have a background color only for text in a block-level element

color Any named color, RGB, or hexadecimal value
line-height A number (1.0, 1.5, 2.0, etc.) or in em values
letter-spacing Specify pts, ems, or as a percentage
word-spacing Specify pts, ems, or as a percentage
text-align Specify left, center, right, justify
text-indent Specify pts, ems, or as a percentage
text-transform Specify uppercase, capitalize, lowercase, normal
text-decoration Specify overline or line-through
:first-letter Use to set the style of the first letter of a word
:first-line Use to set the style of the first line of a paragraph

Font Families:

serif: Letters have strokes (or serifs) that finish the top or bottom of the letter form
sans-serif: Letters do not have finishing strokes
monospace: Fixed-width letters
fantasy: Decorative letters
cursive: Letters designed to look like handwriting

© 2010, Within this mind. All rights reserved.

Share and Enjoy:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks
  • Blogosphere
  • Fark
  • Google Buzz
  • LinkedIn
  • Reddit
  • Slashdot
  • Suggest to Techmeme via Twitter

About Kinda Strange

I am a student at the University of Phoenix majoring in information technology. This is where I come to babble incoherently…err…make notes, talk about things that catch my interest, share ideas, etc...
This entry was posted in Programming and tagged . Bookmark the permalink.

Comments are closed.