Understanding Basic CSS in 6 Steps:
Sample code:
p {
text-indent: 5px;
border: 1px solid black;
clear: none;
float: left;
margin: 2px;
padding: 5px;
}
Steps:
- The whole set above (what's inside the fancy brackets) applies to one SECTION (in this example, identified by <p> in HTML) of the site.
- What's inside the brackets ({ }) are ATTRIBUTES, or CHARACTERISTICS, of that section.
- How those attributes work: what the left-side of the colon (:) means, and what options can be used for the right-side of the colon. For example: text-indent: 5px; means that the first line of each paragraph will be indented on the left side by 5 pixels.
- Punctuation! Each attribute line must end with a semi-colon (;) and have a colon in the middle. Each section must be delineated by fancy brackets: { } . Also watch out for extra spaces.
- How to integrate the CSS you now understand with HTML, which is just a matter of using the right identifier (i.e., the <p> above) for the right section in HTML and having a stylesheet (a file saved as .css) defined in the <HEAD> section of your HTML.
Sample Code Explained:
The sample code modifies a paragraph <p> in HTML. The first line of this paragraph is indented on the left by 5 pixels (text-indent: 5px;). This paragraph has a thin black border around it (border: 1px solid black;). This paragraph can have other sections on either side of it (clear: none;). This paragraph is floated to the left (float: left), which means that whatever section to the right of it will wrap-around this paragraph. This paragraph is indented outside the border by 2 pixels in every direction (top, right, bottom, left) (margin: 2px;). This paragraph is indented inside the border by 5 pixels in every direction (padding: 5px;).
Result:
Once you've learned these five steps, you'll understand how basic CSS works and why particular CSS displays the way it does.
