Cascading Style Sheets are basically a set of rules stating how HTML elements in your webpage should be presented. In a CSS rule we give the HTML element that will be affected, the presentation property of that element to change, and then the value we want to set that property to. Here's an example rule.
element { property: value; }
So, we see that the form gives the HTML element first, then all rules affecting that element are given inside the curly braces: {
and}
. Then the property to be affected is given first, followed by a colon (:
), then finally the values for that property with a semi-colon (;
) finishing the rule. Here's two CSS rules affecting the <body>
HTML element.
body { color: white; background-color: blue; }
Notice that we're able to give more than one rule inside a set of curly braces. We just separate those rules with the semi-colons that end each one. Here the first rule make all of the text in the <body>
element be colored white. The second rule makes all of the background area around the text be colored blue. If we're to see this rule in action, we first need a place to put it in our code.
The quickest way to add CSS rules to our HTML code is with an internal style sheet. This is done with a special HTML style element inside the HTML head element. Like so:
<html> <head> <title> Title of my webpage </title> <style type="text/css">body { color: blue; }</style> </head> <body> The content of the page goes here. </body> </html>
The <style>
tag goes inside the HTML head element just like any other HTML element. Yet, inside that HTML style element we're able to put in CSS rules as we want. To add another rule you'd simply go down one more line and start the next one. CSS rules don't have to be contained to a single line either. The rule begins with the opening curly brace and doesn't end until the final closing curly brace.