Home

Web Development

Short Contents

Introduction
CSS Basics
Selectors
Terminology
Media Types
Paged Media
Aural Media
Colours
Fonts
Text
Blocks
Lists & counters
Tables
Miscellaneous

Full Contents

Selectors

Recall that these are the HTML elements to which style information is applied. However, you can be more specific...

Selecting by Class

By assigning elements "classes", you can use these class names to specify style:

  <STYLE TYPE="text/css">
    H1.classname { ..... }
    .class2  {style information for all elements with class=class2}
  </STYLE>
.....
  <H1 CLASS=classname>This text will be affected by the above SYTLE info.</H1>
  <H2 CLASS=class2>So is this text</H1>

Selecting by ID

It is possible to use the id attribute in HTML tags to specify style information. The element is identified by placing ID=NameOfYourChoice in the opening tag. The style information is then specified by using the form elementname#ID_Name { .... }
Example:

<STYLE> 
	#id1 { color:green}	
             (make the color green for all text in any element with ID=id1)
	H1#id2 { color:blue}	
             (all H1 elements with ID=id2 are displayed in blue)
</STYLE>
.....
  <P ID=id1>green text</P>
  <H2 ID=id2>blue text</h2>

Contextual

You can specify that style is only applied to elements which have certain "parents" (elements which they are contained within).
e.g.

  H1 EM { styleinfo };    /*all EM text within a H1 tag  */
  UL UL LI { styleinfo }; /*all LI items within two UL sets */
  .classname H1 { styleinfo };/* all H1 within elements with CLASS=classname*/
  #IDname H1 { styleinfo };   /* all H1 text within elements with ID=IDname*/
  DIV.IDname H1 { styleinfo };/* all H1 text within DIV tags with ID=IDname*/

Selecting All elements

This can either be done by assigning properties to the BODY object, or by use of the universal selector:



  * { color : red }  /* make all text red */

  *.classname {color : red } /* all elements of class classname*/

  H1 * PRE { color:red }
      /* all PRE blocks contained in H1 and any other element */

Child Selection

An element is a child of another if it is contained within that other element. For example, in <h1> <h3> </h3> </h1>, H3 is a child of H1, but anything within the H3 tags is a child of H3 and not H1. If we wanted to make all H3s, which are children of H1, to be red, we would use

H1 > H3 { color : red }

Adjacent Elements

To specify style for a H3 elements that immediately follows a H1 element, use H1 + H3 { color : red }.

This would affect <H1>...</H1> <H3>this text</H3>

Selecting by attributes

You can add style to elements which have values specified to certain attributes. The general form is
elementname[attribute relationship value] { styleinfo }
,where relationship is one of

= : Add style when the attribute exactly matches value.
~= : Add style when the attribute contains the word value in a space seperated list.
|= : Add style when the attribute contains the word value in a hypen seperated list.
none : when the form elementname[attribute] { styleinfo } is used, add style whenever the attribute has been specified.

Examples :

 H1[id="the top heading"] {color : red}
 H1[id~=top] {color : red}

The above would both have the same effect on <H1 id="the top heading">

Pseudo Classes

Anchor pseudo-classes

Style can be applied to the three types of anchor links (normal, visited, active), as indicated in the following examples...

  A:link { styleinfo }         /* unvisited link */
  A:visited {styleinfo }   /* visited links */
  A:active { styleinfo }    /* active links */
  A:link IMG { styleinfo } /* all IMGs that are part of an unvisited link */
 A.classname:visited { styleinfo } /* visited links with CLASS=classname */

:Hover Pseudo Class

This sets style to an element when a pointing device, usch as the mouse, is held over it. Note that it can be over-ridden if style for pseudo classes such as :link are defined after :hover.
Example : a:hover {color: rgb(100%,0%,100%) }

:Active Pseudo Class

This is used when an element becomes active, such as the time between pressing a button, and releasing it.
Example : a:active {color: rgb(100%,0%,100%) }

:Focus Pseudo Class

An element has the focus when it has been selected by a mouse click, keyboard hotkey, or by default. When in focus, it reacts to keyboard and other events, such as typing in an input box. textinput:focus {color: rgb(100%,100%,100%) }

The Language Pseudo Class

Example : h1:lang(en) {color:blue}
This defines style for elements which have their language defined by the lang= HTML attribute. The above example is for english, see the settings boxes in your web browser for the codes of other languages. The above example would affect <H1 lang=en>this text</H1>

First Child Pseudo Class

An element is a child of another element if it is contained within that element. It is also the first child if it is the first element within that element. For example, in <H1> <H2></H2> <H3></H3></H1>, H2 is the first child of H1, but H3 is the second child. In this example, to select H2, we would use
H1 > H2:firstchild {styleinfo}
or H2:firstchild {styleinfo}

Pseudo Elements

The first-line pseudo-element

    P:first-line { styleinfo }
       /* the first line of text for each instance of that element */

The 'first-line' pseudo-element can only be used with block-level elements, and can only be given the following property types : font, color, background properties, word-spacing , letter-spacing , text-decoration , vertical-align, text-transform , line-height, clear.

The first-letter pseudo-element

'first-letter' pseudo-elements can have the following properties: font, color, background, 'text-decoration' , 'vertical-align (if 'float' is 'none'), 'text-transform' , 'line-height' , margins, padding, border, 'float' , 'clear' To make a dropcap letter span two lines:

   P              { font-size: 12pt; line-height: 12pt }
   P:first-letter { font-size: 200%; float: left }

The display program (a web browser) defines what characters are inside the 'first-letter' element. Normally, quotes that precede the first letter should be included. Otherwise, the first-letter information is usually ignored if the block starts with a non-letter character.

Properties set on 'first-line' will be inherited by 'first-letter', but are overridden if the same property is set on 'first-letter'.

Adding content :before and :after

These simply add text before or after the contents of the specified element.

p:before {content : "The start of a paragraph"}
p:after {content : "The end of a paragraph"}

content

Value	`string` \| `address` \| `counter` \| `attr(X)` \| `open-quote` \| `close-quote` \| `no-open-quote` \| `no-close-quote` \| `inherit`
Used with	:before and :after
Inherited	no

This property creates content in the :before and :after sections of an element. string is text, an address is usually an internet URL, counter is described below and elsewhere in this guide, quotes are replaced by the appropriate symbol, and no-quotes act as if the quote had been closed, but doesn't actually display anything. attr( ) gives the value of the specified attribute.

Counters are displayed with the content property of the :before and :after pseudo-elements.

counter(countername, [style]). The optional style attribute is normally decimal, but can be anything defined for the list-style-type property.
counter(countername, string, style) displays all the counters of the given countername, spereated by the given string.

Site Map

(C)opyright, Geoff Knagge.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.