css - selectors - eyelearneyelearn.org/wsr/wp-content/uploads/2012/01/css-selectors.pdf · css -...

4
1 CSS - selectors Every CSS style definition has two components: the selector, which defines the tags to which the style will be applied, and the properties, which specify what the style actually does. CSS text: h1 { colour:#000033; font-family: “Verdana”, Tahoma, sans-serif; } mark up text: <h1> content text to go in here </h1> selector properties* In this example the selector h1 within the style sheet defines a dark blue colour as font colour and specifies Verdana as chosen font, Tahoma as alternative - and the use of the sans-serif default font in case none of the chosen fonts are found. To apply this to any section of text the HTML will enclose it within the specified tag, starting tag <h1> - closing tag </h1> There are a variety of different selectors you can use to gain control over the layout of the different elements of your page and their spatial relationship to each other. Tag Selectors The most basic form of a selector is the shown in the example above. By naming a particular HTML tag, you can apply a style definition to every occurrence of that tag in the document. This is often used to set the basic styles that will appear throughout a website. For example, the following might be used to set the default font for a website: CSS text: body, p, td, th, div, blockquote, dl, ul, ol { font-family: “Tahoma”, Verdana, Arial, Helvetica, sans-serif; font-size: 1em; color: #000000; } This rather long selector is a list of tags, all of which will take on the style definition (font, size, and color). In theory, the <body> tag is all that’s needed (as all the other tags appear inside the <body> tag, and would thus inherit its properties), but many browsers don’t properly carry style properties into tables and other elements. XHTML CSS CSS

Upload: phungphuc

Post on 06-Sep-2018

214 views

Category:

Documents


0 download

TRANSCRIPT

1CSS - selectorsEvery CSS style definition has two components: the selector, which defines thetags to which the style will be applied, and the properties, which specify whatthe style actually does.

CSS text:

h1 { colour:#000033; font-family: “Verdana”, Tahoma, sans-serif;}

mark up text:

<h1> content text to go in here </h1>

selector properties*

In this example the selector h1 within the style sheet defines a dark blue colour as font colour and specifies Verdana as chosen font, Tahoma as alternative - and the use of the sans-serif default font in case none of the chosen fonts are found.To apply this to any section of text the HTML will enclose it within the specified tag,starting tag <h1> - closing tag </h1>

There are a variety of different selectors you can use to gain control over the layout of the different elements of your page and their spatial relationship to each other.

Tag SelectorsThe most basic form of a selector is the shown in the example above. By naminga particular HTML tag, you can apply a style definition to every occurrence ofthat tag in the document. This is often used to set the basic styles that will appearthroughout a website. For example, the following might be used to set the default font for a website:

CSS text:

body, p, td, th, div, blockquote, dl, ul, ol { font-family: “Tahoma”, Verdana, Arial, Helvetica, sans-serif; font-size: 1em; color: #000000;}

This rather long selector is a list of tags, all of which will take on the style definition(font, size, and color). In theory, the <body> tag is all that’s needed (as allthe other tags appear inside the <body> tag, and would thus inherit its properties),but many browsers don’t properly carry style properties into tables and otherelements.

XHTML

CSS

CSS

2Pseudo-Class SelectorsA text hyperlink, the <a> tag in HTML is much more versatile in its formatting options than most other tags. Specifying link, vlink and alink properties inside the <body> tag of the HTML document allows you to give the link a different appearance and look for its different states - unvisited, visited and being clicked.Using CSS you can now add 2 more states to your links - a rollover state, ie what the link looks like when the mouse hover over it and a focus state for a link which has keyboard focus.The following example shows 5 style definitions - always to be listed in the order shown below <memory hint - mnemonic: LoVeHAte>:

CSS text:

a:link { color: #01435F; } unvisited linka:visited { color: #000000; } visited linka:hover { color: #FFFFFF; } link on mouse overa:focus { color: #01435F; } link on keyboard focusa:active { color: #01435F; } link on mouse click

NOTE: often, the hover and focus states of a link are styled the same as the focus can be understood as the keyboard equivalent of the hover.

Class SelectorsAssigning styles to tags does however limit you to the content of chosen tags - consistently within the whole HTML document. To differentiate between identical tags in different places on your page and to distinguish between different elements within a tag - define a class in your CSS which can then be used and re-used for the same content type.

CSS text:

p { color: #000000; }.sidebar { color: #999999; }

The example above shows the paragraph tag, defining all text within it to appear black. To create a visual difference to define the text within the sidebar - the second line of code uses a class selector (which starts with a full stop) to indicate an application of style to any tag of the sidebar class - here setting the sidebar text to grey.

To create a paragraph of text with the sidebar’s properties - add the class attribute to the paragraph tag

mark up text:

<p class=”sidebar”> content to go here </p>

CSS

CSS

XHTML

3Specifying any other details within the sidebar then will also be possible by simply adding more style rule definitions.For example - if the sidebar contains links that you’d like to appear in bold - you can add a specific style for any links within the side as shown here

CSS text:

p { color: #000000; }.sidebar { color: #999999; }a.sidebar:link, a.sidebar:visited {font-weight: bold;)

The example now will show all main text in black, any text within the sidebar in grey - and links within the sidebar still in grey but with the type set to bold.The links’ colour could be changed by adding yet another style rule - as this rule is very specific and listed below the preceding, more general rules - it overrides previous settings.

mark up text:

<p class=”sidebar”> content to go here <a href=”samplepage.html” class=”sidebar”>samples</a></p>

Contextual SelectorsAs the example above shows - it could become quite time consuming to add the specific class to each and every link within the sidebar. If you used your sidebar purely for links - this would become quite a bloated section of coding.This is when you use the contextual selectors - which allow you to provide a list of selectors based on the context, ie the tag/s that contain it.

CSS text:

p { color: #000000; }.sidebar { color: #999999; }p.sidebar a:link, p.sidebar a:visited { font-weight: bold; colour: #CCC; }

The example now is solved more efficiently: all links (specified with the a:link and the a:visited selector) within the sidebar paragraph (specified with the p.sidebar selector) are now using the set style, of bold font and lighter grey colour.

mark up text:

<p class=”sidebar”> content to go here<a href=”samplepage.html”> samples </a></p>

CSS

CSS

XHTML

XHTML

4ID SelectorsThe ID selectors again are used - as the class selectors - to select a particular tag, rather than a group of tags. Instead of the full stop however which defined a class - the ID selected is preceded by the hash #.An ID selector differs from the class selector by being unique, ie you can only use one specific ID per page. When validating your CSS - the multiple use of an ID will be flagged up as invalid.

CSS text:

#sidebar { color: #999999; }#sidebar a:link, #sidebar a:visited { font-weight: bold; colour: #CCCCCC;}

Above, the previous example changed to use the ID selector instead of the tag and class selectors.

mark up text:

<p id=”sidebar”> content to go here <a href=”link.html”> samples </a></p>

Semantic namingWhen choosing a name for a class or ID - you should always keep to meaningful naming - as you will do with your HTML markup. Class and ID names should convey an added meaning to the element, giving an idea of the function rather than the position on screen or any other visual aspects. This is important not only for a more accessible web but also for updatability.

Imagine you are designing a site with a horizontal menu. You might mark this up as a list with an added ID. If you choose to name this “horizontal-nav” or similar - you are referring to the current design. If after some time this site is to get an update, a new design - this might replace the horizontal menu with a vertical one, now placed on screen on the left hand side. There should be no need to even touch the HTML - and so you will be faced with the given ID name for this menu. While coding your new CSS - you will now refer to the vertical menu as “horizontal-nav” which can be quite confusing.

So keeping the ID nae to a simple “nav” would be much better, more minimal and more meaningful at the same time, causing not confusion during any update.

CSS

XHTML