Southend Linux User Group

CSS selectors

Using CSS selectors

Most HTML tags support the style property that can be used to give much
greater flexibility over the format of a page. It makes the style of the
document accessible to script languages, so that document styles can be changed
dynamically. Common styles can be applied across many pages, to give them a
similar look and feel.

Document styles can be applied in 3 different ways.

The order the tags are listed below
is important.

  • A local, or in line tag will override all others.
  • Using a tags (unique) identifier will overide class and general tag
    styles.
  • finally a class specifier will override the general formatting applied to
    a tag name

local (or inline style)

By specifying the style to be used for
a particular tag
E.g. <span style=”font-style:italic;”>make this
italic</span>

tag

Relating a style to a particular tag
name so that all tags with that name have the same style applied.
E.g.

   <style>
     H3     {font-family:serif;font-style:italic;color:#00008b;}
   <style>

class

By associating a particular style with
a class name, where class is a property of a tag. The first style rule
can be attached to any tag, when a page break is needed. The second
rule means that for every H2 tag a page break will occur. E.g.

   <style>
       .page     {page-break-before:always}
     h2.page     {page-break-before}
   </style>
tag id Attach a style to a unique id, e.g. #logo. Notice the use of the hash
(#) symbol to denote an ID.

   <style>
      #logo {position:absolute;top:65px;left:15px;}
   </style>

Author: Alan Campion - Page reference: 930
Last modified: Alan Campion - 2015-03-01