Basic Layout

Now that you know what CSS is, it's time to learn the basic syntax. Styles are made up of different attributes. To make styles look different, you have to assign the attributes a value. For example, we can take the attribute "color". If we want to make a style with red text, we would set color to red. This is done simply by taking the attribute color, putting a colon and a space behind it, and then putting the value name, red. After the value you need a semicolon, or the browser will get confused and think the next attribute is actually a part of the value.


Class and ID

When styling a tag, you have the choice between using class and ID. Either one will work, and it's really just a matter of how you create and apply the style. However, it's good practice to use ID for styles that are only used once. For example, lets say you want to style your page title. Assuming your page only has one title, we should use ID. ID is intended for unique styles that are only used once. Now lets say you want to style multiple paragraphs. This is when class should be used. As a rule, multiple tags with the same style are in the same "class" of that tag.


Span and Div


The span and div tags are very useful when you get into the more advanced website layouts. They can be used as containers for different parts of the page, and give the page more structure. For example, the whole page could be contained in a single div, which contains a div for content, an index and a title. The difference between span and div is that span has no formating by default. This means you can use it inline without having to mess around with the styles too much.