CSS TUTORIAL 2 – PRACTICE - WORKING WITH SELECTORS
In your web page editing program, open the fileex2\selector_basics.html.
This page is made of very basic HTML tags. The most exciting thing about it is the graphic banner. Start by adding an internal style sheet to this file.
Add an internalstylesheet, and then add a style rule so that all paragraphs on the page have a fontcolour of #505050. Fontsize should be 1em. The font family should be set as "Helvetica Neue", Arial, Helvetica, sans-serif. Paragraphs should have a leftmargin of 100px.
Preview your web page in your browser:
Creating a Group Selector
Add a groupselector for h1, h2 and h3. Set the style rules so that the fontcolour is #BD8100. The fontfamily should be Baskerville, "Palatino Linotype", Times, serif. The topborder should be 2px, solid, and the colour should be #86A100. Toppadding should be 7px. Leftpadding should be 100px.
Preview your web page in your browser:
Creating and Applying a Class Selector
Add a classselector called note with the following style rules. Fontcolour should be #333. The border should be 2px, dashed, and colour#BD8110. The backgroundcolour should be #FBF8A9. The topmargin should be 25px. The bottommargin should be 35px. Padding should be 20px.
In the page’s HTML, there are two <p> tags that begin with the word “Note”
inside <strong> tags. Identify both these paragraphs as the class named note.
Preview your web page in your browser:
Creating a Descendent Selector
Create a descendentselectorwhich targets only the <strong> tag when it is inside one of these above noteclasses.
The fontcolour should be set as #FC6512.
The word ‘Note:’ should now appear in orange in each of the note boxes on the page.
Preview your web page in your browser:
Creating and Applying an ID Selector
You need to create a style that sets a specific width for the web page’s content, centres it in the middle of the browser window and adds a decorative background image to the page. You will apply the ID to the page’s <body> tag.
Create an IDselector called article. Remember that you will need to add the # symbol in front of the selector ie. #article.
Add the style rules to this ID selector as follows. The backgroundcolour should be #FDF8AB. There should be a backgroundimage. (Tip: Use url(images/bg_page.png)). The image should repeatvertically down the page. The image should be positionedcentrally and at the top of the area. Padding should be set as 0. Top and bottommargins should be set at 0. Left and rightmargins should be set as auto. The width should be 760px.
Edit the HTML of the page to identify the <body> tag with the ID named article.
Preview your web page in your browser:
Adding an Adjacent Sibling Selector
Add a adjacentsiblingselector to target any that paragraph immediately follows the <h1> tag.
Set the style rules for this selector so that the fontcolour is #FF6600. The fontsize is 1.2em. The lineheight is 140%, and the topmargin is 20px.
Preview your web page in your browser:
A - CSS Tutorial 2 - Practice - Working with selectors.docVersion 1
Page 1 of 6