Paste this code into the BODY of a new HTML document:
<p>This is a practice sheet where you need to make some layout changes by using all three different types of selector. These
selectors are:</p>
<ul>
<li>type - html tags such as p or h1 are all formatted the same</li>
<li>class - all html tags identified as of one class are formatted the same</li>
<li>id - html elements are formatted individually based on a unique id tag</li>
<li>that's all but I wanted four list items</li>
<li>or maybe five</li>
</ul>
Create a style section in the HEAD and embed styles to do these things:
- Create a type style section in the embedded stylesheet which can be used to make list item text yellow
- Create two classes for LI elements:
- One turns the background of list items red
- The other turns the background green
- Put class="???" attributes inside the LI tags to make alternate lines different colours
- Put ID attributes inside each paragraph tag (different IDs for each paragraph obviously!)
- Now add two IDs to the stylesheet to turn each paragraphs' text a different colour
- By adding a P type to the styles header make all paragraphs right aligned
- By adding a LI type make all list items italic
By using the three selectors together you can allow for almost any combination of formats. Choosing the best one comes with experience. Pretty much all web pages will use type selectors. Class selectors then allow quick changes to one group of each type by changing just one stylesheet entry. ID selectors allow each individual element of a web page to look different but take more time to update/change.
