CSS Intro, Part 2
In the second part of the introduction to CSS, we showed you a basic CSS statement (a declaration set including a property and its respective value).
p {color:red}
There may be multiple declarations applied to one selector:
p {color:red; font size:large}
As long as you put curly brackets on either side, you may include nearly any number of declarations under a single selector (but, of course, there are really only so many that will apply to any given statement).
The selector itself can be any HTML element, but it can also be a class. Classes are declared using the period (or full stop) with or without a respective element:
.example {color:blue; font size:small}
…this creates the “example” class, which may be then used by any element:
<p class=”example”>This will produce a paragraph that uses the previously-defined example class.</p>
<H1 class=”example”>This will also format your header in the same way.</p>
You may specify the HTML element during the declaration:
p.example {color:white; font size:large}
which restricts the “example” class to the paragraph element.
A similar effect is found when using the ID selector, represented by a hash (number sign) character:
#example {color:gray; font size:small}
<p id=”example”>This will also produce a paragraph that uses the previously-defined example class.</p>’
When to use ID vs. Class: according to validation standards, ID may only be used once on a layout, while Class can be used any number of times. Therefore, the usual practice is to use ID for headers, sidebars, or anything else that has only one overall instance.
Additionally, you may use multiple selectors (including Class and ID selectors) with the same set of declarations, simply by using a comma between the selectors:
p, H1, H2, .example {color:red; font size:large}
will apply the same values to paragraphs, headers 1 & 2, and anything given the “.example” tag (though there are certainly other, cleaner ways to achieve this…)
Don’t forget to how to add links! This Oasis Moving and Storage link is easily replicated with your own link. “< a href=" your website " > name of your website “