Once you have a solid understanding of CSS and what it can do, the next step is understanding the syntax of CSS and the few ways it can be applied to your documents.
CSS syntax comprises of three elements.
Selector: The selector is the element within your HTML document you want to style. For instance, if you have placed a paragraph tag within your HTML, your selector would be “p” – the standard paragraph tag in CSS. If you wanted to apply styles to the entire body of your website, you would use “body” as the selector. At a later time, you’ll learn how to create your own selectors using the “class” and “id” tags.
Property: Properties are those elements that can be applied to a particular selector. Lets take the paragraph from the above example. A few properties you could use to style that selector include font-family, font-size, color and a few others.
Value: The value is the shape, size, dimension, etc. applied to a particular property. For instance, you would apply a value of 20px to the property above if you wanted your paragraph copy to display at 20px.
Selector:
p {}
Selector + Property:
p {font-size:}
Selector + Property + Value
p {font-size: 20px;}
Now, lets get into the application of CSS. There are three ways you can apply styles to your document.
Inline Styles
Inline styles simply mean you are placing the style for a particular element within the tag itself. For instance, if you wanted to color the text color of a paragraph blue, you would apply ” blue;” within your paragraph tag.
This method is okay, but not recommended. If you had a website 100 pages deep and each page used inline styles, when a change needs to be made, you would have to change all 100 pages independently.
Internal Styles
Internal styles mean including your styles within the HTML document itself. At the beginning of your HTML document, there are head tags. Your styles would be placed between these tags for reference. You might use this method if you had a single page website.
External Styles
Using external styles are the most effective way of using CSS. Your styles are held in an outside document that all HTML files connect to. This makes making global changes a breeze. Say you wanted to change the color of links on your 100 page website. Instead of changing each page independently, you could change the style within the external document and there you have it. All pages would be changed – because they are all linked to the same style sheet.
