Unit 10 - Client Side Customisation of Web Pages. Week 5 Lesson 1 CSS - Selectors

Size: px

Start display at page:

Download "Unit 10 - Client Side Customisation of Web Pages. Week 5 Lesson 1 CSS - Selectors"

Blake McCarthy
5 years ago
Views:

1 Unit 10 - Client Side Customisation of Web Pages Week 5 Lesson 1 CSS - Selectors

2 Last Time CSS box model Concept of identity - id

3 Objectives Selectors the short story (or maybe not) Web page make-over!

4 Files for this Lesson All the files required for this lesson can be found here on the Wiki

5 Selectors In CSS, pattern matching rules determine which style rules apply to elements in the document tree. These patterns, called selectors, may range from simple element names to rich contextual patterns. Document tree:

6 Document tree <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>My home page</title> </HEAD> <BODY> <H1>My home page</h1> <P>Welcome to my home page! Let me tell you about my favourite composers: <UL> <LI> Ludwig van Beethoven <LI> Johannes Brahms <LI> JS Bach </UL> </BODY> </HTML>

7 Selectors A simple selector is either: A type selector or A universal selector Could be followed immediately by zero or more : attribute selectors, ID selectors or pseudo-classes (not covered here) These may be in any order. The simple selector matches if all of its components match.

8 Selectors: Grouping When several selectors share the same declarations, they may be grouped into a comma-separated list. Example(s): In this example, we condense three rules with identical declarations into one. H1 { font-family: Arial, Helvetica, sans-serif } H2 { font-family: Arial, Helvetica, sans-serif } H3 { font-family: Arial, Helvetica, sans-serif} Is equivalent to: H1, H2, H3 { font-family: Arial, Helvetica, sans-serif }

9 Selectors: Universal Selector The universal selector, written "*", matches the name of any element type. It matches any single element in the document tree. If the universal selector is not the only component of a simple selector, the "*" may be omitted. For example: *.warning and.warning are equivalent *#box and #box are equivalent

10 Selectors: Type selector A type selector matches the name of a document language element type. A type selector matches every instance of the element type in the document tree. Example(s): The following rule matches all H1 elements in the document tree: H1 { font-family: sans-serif }

11 Selectors: #ID Selectors Document languages may contain attributes that are declared to be of type ID What makes attributes of type ID special is that no two such attributes can have the same value whatever the document language, an ID attribute can be used to uniquely identify its element. In HTML all ID attributes are named "id"

12 Selectors: #ID Selector A CSS ID selector contains a "#" immediately followed by the ID value Example: #content { margin: 2em 4em 2em 4em; background-color: transparent; padding: 1em 1em 40px 1em; background-image: url(tick.gif); }

13 Selectors: Pseudo Classes There are a number of pseudo classes Of interest to us: The link pseudo-classes: :link :visited The dynamic pseudo-classes: :hover :active :focus

14 Selectors: Link Pseudo-class We commonly display unvisited links differently from previously visited ones CSS provides the pseudo-classes ':link' - applies for links that have not yet been visited ':visited - applies once the link has been visited by the user

15 Selectors: Link Pseudo-class pseudo-classes apply to A elements with an "href" attribute. The following two CSS2 declarations have similar effect: A:link { color: red } :link { color: red } Example: If the following link: <A class="external ref=" link</a> has been visited, then this rule: A.external:visited { color: blue } will cause it to be blue.

16 Selectors: Dynamic Pseudo-classes The :hover pseudo-class applies while the user designates an element (with some pointing device, such as a mouse), but does not activate it. The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).

17 Selectors: Dynamic Pseudo-classes A:link { color: red } /* unvisited links */ A:visited { color: blue } /* visited links */ A:hover { color: yellow } /* user hovers */ A:active { color: lime } /* active links */ A:hover must be placed after the A:link and A:visited rules, otherwise the cascading rules will hide the 'color' property of the A:hover rule

18 Selectors: Dynamic Pseudo-classes Combining dynamic pseudo-classes: A:focus { background: yellow } A:focus:hover { background: white } The last selector matches A elements that are in pseudo-class :focus and in pseudoclass :hover.

19 Now to Play! Download the required files from the Wiki Follow the instructions: Link the external style sheet to all the pages Add the following to the style sheet and apply it to the images: img { border-top-width: 0pt; border-right-width-value: 0pt; border-bottom-width: 0pt; border-left-width-value: 0pt; border-top-style: none; border-right-style-value: none; border-bottom-style: none; border-left-style-value: none; }

20 More In the index.html page, add image CX1lead-mtb.jpg Make it float right 230px from the top of the page Make all paragraph text 260px from the left edge and 430px from the right edge

21 On to the Gears Page Insert image parktool.jpg in a <div> Apply the same styles to this page as you did to the index.html page Let the image float right

22 The Fitness page Find: <div id="opening_story"> We need to enable this style. Add the following to the style sheet with the appropriate selector : Top margin = 20px Bottom margin =20px Set all paragraph text 260px from the left edge and 430px from the right edge

23 For All Pages Centre the <h1> headings All <h1> headings must have the following style: Font = Helvetica Height = 24px Padding 5px all sides All <h2> headings must be 260px from the left Font = Arial Height = 18px Padding = 5px all sides All <p> text must be 260px from the left

24 Summary

25 Next Time

CSS Cascading Style Sheets

CSS Cascading Style Sheets site root index.html about.html services.html stylesheet.css images boris.jpg Types of CSS External Internal Inline External CSS An external style sheet is a text document with