Cascading Style Sheets (CSS)
Cascading style sheets provide the color and design of the web. You can link to them from your page or you can put the code directly into your page. Linked pages is the preferred way to do it because it makes your designing consistent and easier.
Style sheets have a selector which specifies which type of elements the style will affect, then inside curly brackets are properties and values: selector {property:value;}
Each property of each element can be set to any if a given set of values, for instance, if you want to make all the h1 headings green then you would place h1 {color:green;} in your CSS.
Often a selector will have multiple properties or values so most coders place the properties and values on their own lines indented like this:
h1 {
color:green;
font-size:40px;
}
p {
font:arial;
color:black;
}
Classes and ids can be used to indicate certain tags. For instance, if you don't want all of your list elements to be green, just some of them, you can give the ones that you want to be green a class of "green" In your html:
<li class="green">The text that will be green<li>
and then in your CSS you put:
.green {
color:green;
}
and your result will be:
- Normal text
- The text that will be green
- More normal text
If you only want to do one element then id's are more semantically accurate. In your HTML you use id="sometext" and in your CSS you use #sometext for your selector.
You can use multiple selectors to more precisely specify what elements you want affected by the set of rules. For instance, if you want only paragraphs within class wrapper
to be affected then you could use .wrapper>p for your selector.