You needn't head off to Amazon or your local bookstore to drop $50 on a massive tome that will give you back problems. There's a very structured logic behind CSS and you can learn some of the basics in just a matter of minutes. While the scope of this guide will not give you magical powers over the layouts of your pages and allow you to make the most intricate and complex pages available today, it will certainly get you on your way.
The cascading part of the CSS is one of the most important. It means that instead of editing each and every page on your website manually to give them flair and style, you simply point them all to the style sheet and have them incorporate the styles. It has been one of the most important additions to HTML over recent years.
CSS Structure
First let's look at a very quick CSS section to get a feel for the structure of CSS and to see how it looks and what it means:
p
{
text-align:center;
color:black;
font-family:arial
}
CSS is made of 3 pieces a selector, in the example p for paragraph, the logical grouping on the HTML page. The second piece is property in the example text-align, color and font-family are all properties of the selector. The final piece is the value which is center, black and arial in the example. The standard format is Selector {property:value;} Each property must be paired with a value and closed with a semi colon. Each group of properties must be enclosed in curly brackets and the selector must be placed directly before the properties.
Every element on a web page can generally be styled in some way, whether it's where it shows up on the page, what color the text or the background is or what size. Here is a list of the most common and useful CSS elements that generally show up in every page of text:
Basic Concepts
| Property | Description |
| Grouping | Multiple selectors separated by commas. Allows for assignment of properties to elements (selectors). H1, H2, H3, H5 { color: blue;} |
| Contextual selectors | One or more selectors H1 B {text-decoration: underline;} Bold Header 1 will be underlined as well. |
| Class (tag attribute) |
A class selector is a name preceded by a period.
Do not use the period when referencing the class. Called by using the
class= attribute. Do not begin a class name with a number
.CSSguide {color: blue;}
class="CSSguide"
|
>This is blue.
ID
(tag attribute)
An ID selector is preceded by a hash mark (#),
and is called using the ID= attribute. The hash mark does not appear in
the value of ID. Works like the class selector except that the ID can be
used only once in the document.
#Once {color: red;}
ID="Once"
>This can only be used once.
Comments
Anything between /* and */ will be a comment and
have no effect on the page. Used to document changes etc. /* This is a
comment. */
DIV and SPAN tags
A Div is a block where the content within can all be styled at once
Hello
SPAN is used for inline formatting inside of another styled element like a paragraph
This is blue in a regular paragraph
Shorthand
Many properties can accept a shorthand list of values. Values are read from the top clockwise.
Example:
DIV { padding: 5px 10px 5px 10px }
is the same as:
DIV { padding-top:5px; padding-right:10px;
padding-bottom:5px; padding-left:10px }
Property
|
Description
|
background
|
Sets any background properties in one selector.
|
background-attachment
|
Sets whether a background image is stationary or scrolls with the page.
|
background-color
|
Sets the background color of a selector. Accepts HTML color names and Hex Color code i.e. #ffffff
|
background-image
|
Sets the background image for a selector
|
background-position
|
Sets the starting position of a background image in pixels
|
background-repeat
|
Sets if a background image will repeat horizontally, vertically or not at all.
|
Property
|
Description
|
border
|
Sets all the border values in one property declaration
|
border-bottom
|
Sets all the bottom border values in one property declaration
|
border-bottom-color
|
Sets the color of the bottom border
|
border-bottom-style
|
Sets the style of the bottom border
|
border-bottom-width
|
Sets the width of the bottom border
|
border-color
|
Sets the color of the four borders
|
border-left
|
Sets all the left border values in one property declaration
|
border-left-color
|
Sets the color of the left border
|
border-left-style
|
Sets the style of the left border
|
border-left-width
|
Sets the width of the left border
|
border-right
|
Sets all the right border properties in one property declaration
|
border-right-color
|
Sets the color of the right border
|
border-right-style
|
Sets the style of the right border
|
border-right-width
|
Sets the width of the right border
|
border-style
|
Sets the style of the four borders
|
border-top
|
Sets all the top border properties in one property declaration
|
border-top-color
|
Sets the color of the top border
|
border-top-style
|
Sets the style of the top border
|
border-top-width
|
Sets the width of the top border
|
border-width
|
Sets the width of the four borders
|
outline
|
Sets all the outline properties in one property declaration
|
outline-color
|
Sets the color of an outline
|
outline-style
|
Sets the style of an outline
|
outline-width
|
Sets the width of an outline
|
Font Properties
Property
|
Description
|
font-family
|
Property to choose specific fonts from generic families: serif, sans-serif, monospace, cursive and fantasy. Selector {font-family: "Courier New”, serif;} Can be applied to any text Selector.
|
font-style
|
Selects between italic and normal. Selector {font-style: italic;}
|
font-variant
|
Choice of two
values: small-caps and normal. Allows for special formatting, will
probably expand eventually beyond just 2 choices. Selector {font-variant: small-caps;}
|
font-weight
|
Values are: bold, normal, lighter, bolder and numeric values 100-900. Selector {font-weight: 700;}
|
font-size
|
Sets the absolute size (pt, in, cm, px), relative size (em, ex), or percentage of normal size.
Can be size: xx-large, x-large, large, medium, small, x-small, xx-small, larger, smaller or numeric value. Selector {font-size: 200%;} Selector {font-size: 36pt;} Selector {font-size: x-large;} |
font
|
Sets all font values in one property declaration. Best order of values is
font {font-style font-variant font-weight font-size/line-height font-family;}. Not all are necessary Selector {font: bold 16pt “Times New Roman”;} |
Property
|
Description
|
| height | Sets the height of a selector |
| max-height | Sets the maximum height of a selector |
| max-width | Sets the maximum width of a selector |
| min-height | Sets the minimum height of a selector |
| min-width | Sets the minimum width of a selector |
| width | Sets the width of a selector |
Property
|
Description
|
| list-style | Sets all the properties for a list in one property declaration |
| list-style-image | Specifies an image as the list-item marker |
| list-style-position | Specifies where to place the list-item marker |
| list-style-type | Specifies the type of list-item marker |
Property
|
Description
|
| margin | Sets all the margin properties in one property declaration |
| margin-bottom | Sets the bottom margin of a selector |
| margin-left | Sets the left margin of a selector |
| margin-right | Sets the right margin of a selector |
| margin-top | Sets the top margin of a selector |
Property
|
Description
|
| padding | Sets all the padding properties in one property declaration |
| padding-bottom | Sets the bottom padding of a selector |
| padding-left | Sets the left padding of a selector |
| padding-right | Sets the right padding of a selector |
| padding-top | Sets the top padding of a selector |
Property
|
Description
|
| bottom | Sets the bottom margin edge for a positioned selector |
| clear | Whether a selector allows floating elements on the sides or not. |
| cursor | Specifies the type of cursor to be displayed i.e. crosshair, help, wait |
| display | Specifies the type of box a selector should generate |
| float | Specifies whether or not a box should float |
| left | Sets the left margin edge for a positioned box |
| overflow | Specifies what happens if content overflows a selector's box |
| position | Specifies the type of positioning for a selector |
| right | Sets the right margin edge for a positioned box |
| top | Sets the top margin edge for a positioned box |
| visibility | Specifies whether or not a selector is visible |
| z-index | Sets the stack order of a selector like layers above or below others. |
For further information there are a great amount of resources online including those that were drawn upon for this article.
