Print

CSS

Cascading Style Sheets (CSS) is a set of instructions that defines the presentation semantics of a document (or styling) written in a markup language. CSS is designed primarily to enable the separation of structure and presentation of websites. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content.

Before Web standards, it was a common practice to use HTML tags with additional presentational attributes, such as text alignment and background colors. CSS replaces the presentational attributes with rules except those that define document structure.

CSS Syntaxs

A style sheet consists of a list of rules. Each rule consists of one or more selectors and a declaration block.  A declaration-block consists of a list of declarations in braces.  Each declaration itself consists of a property, a colon (:), a value, then a semi-colon (;)
css syntax
  • Declaration block - A declaration block starts with a left curly brace ({) and ends with the matching right curly brace (}). In between there must be a list of zero or more semicolon-separated (;) declarations. 
  • Selectors - A selector is a name given to "select" elements on an HTML page so that they can be styled. A selector can contain a chain of one or more simple selectors separated by combinators. There are three types of selectors:
    • Element selectors - Used to define styles associated to HTML tags. (A way to redefine the look of HTML tags)
      h1 {color: purple;}
    • Contextual selector - Use to indicate the context of a selector. The context of a selector is determined by what its parent element is.
      div p {color:red;}
    • ID selectors - a name preceded by a hash character (#); used to specify a style for a single, unique element
      Rule: #center {text-align: center;}
      Use: <p id="center">Text</p>
    • Class selectors -a name preceded by a full stop (.); used to specify a style for a group of elements
      Rule: (.purple { color: purple; })
      Use: <h2 class="purple">Text</h2>
      or
      Rule: (.purple { color: red; } .italic { font-style: italic; } )
      Use: <h2 class="purple italic">Text</h2>
      A class can be used several times, while an ID can only be used once. An example would be if you wanted to give all the paragraphs on your web page the same styling, you would use classes. IDs, on the other hand, are most commonly used correctly in CSS layouts.
      (more on selectors on W3C)
  • Declarations -  A declaration is either empty or consists of a property name, followed by a colon (:), followed by a value. Around each of these there may be white space. 
  • Properties - A property in a declaration black is a style option for its corresponding selector.
  • Values - A value is the presentation effect to be created for its corresponding property.

Grouping

The following CSS rules are equivalent:

Set 1 Set 2
h1 { font-weight: bold }
h1 { font-size: 12px }
h1 { line-height: 14px }
h1 { font-family: Helvetica }
h1 { font-variant: normal }
h1 { font-style: normal }
h1 {
font-weight: bold;
font-size: 12px;
line-height: 14px;
font-family: Helvetica;
font-variant: normal;
font-style: normal
}

Set 1 Set 2
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
h1, h2, h3 { font-family: sans-serif }

Set 1 Set 2
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
H1 B, H2 B, H1 EM, H2 EM { color: red }

Element Styling

  • Backgrounds 
    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position
  • Text 
    • font-family
    • font-size
    • font-weight
    • font-style
    • font-decoration
    • letter-spacing
    • word-spacing
    • line-height
    • text-align      
  •  Links 
    • a:link - a normal, unvisited link
    • a:visited - a link the user has visited
    • a:hover - a link when the user mouses over it
    • a:active - a link the moment it is clicked
  •  Lists 
    • set different list item markers for ordered lists
    • set different list item markers for unordered lists
    • set an image as the list item marker
  • Table (table, th, td)
    • border
    • background-color
    • width
    • height
    • text-align
    • vertical-align
    • padding

Measurements

CSS provides six units to define the size of properties: Pixels(px), Points(pt), Percentages(%), Ems(em),  Picas(pc), and Exes(ex).
<style type="text/css">
    .bodytext {
        font-size: 30px;
        font-family: Arial;
    }
    .bodytext p {
        font-size: 0.6em;
        line-height: 1.2em;
        width: 12em;
        background-color:#e9e9e9;
    }
 </style>

<div class="bodytext">
    This is text in the bodytext div.
    <p>This is test within the P element.</p>
</div> 

Apply CSS to HTML

There are three methods of applying CSS to HTML with different levels of separation of the styles and the content they're styling. 

  • Inline Style: Set the properties of a single tag and its contents. Not only is there no separation, but the following is currently deprecated, invalid HTML.
  • <html>
    <body>
    <p style="color: green; font-family: verdana">This text is in green verdana.</p>
    </body>
    </html>
  • Embedded Style: Set styling effect on one whole page. This method separates the style from the content, but the style is not sharable among different pages.
  • <html>
    <head>
    <style TYPE="text/css">
    body {font: 12px; color: green;}
    h1 {font: 24px; color: red;}
    p {font: 10px; color: black;}
    </style>
    </head>
    <body>
    <h1>This is a sample for embedded style sheet</h1>
    <p>This is a text line</p>
    </body>
    </html>
  • Linked Style: Link a regular page to a text file containing style sheet specifications. This method separates the style from the content and provide maintainability via making it available for all pages that need it.
  • <html>
    <head>
    <link rel=stylesheet href="style sheet filename" type="text/css">
    </head>
    <body>
    <h1>This is a sample for embedded style sheet</h1>
    <p>This is a text line</p>
    </body>
    </html>

Cascading Rules

CSS information can be provided by various sources:
  • Author styles - style information provided by the web page author in the form of inline styles, embedded style, or linked style.
  • User style - a local CSS-file specified by the user using options in the web browser, and acting as an override, to be applied to all documents.
  • Browser style - the default style sheet applied by the user agent, e.g. the browser's default presentation of elements.
Rules:
  • Author's Style > User's Style > Browser's Style*
  • Inline Style > Embedded Style > Linked Style
* Browsers usually have a built-in style sheet that display some tags to a default setting.  For example: <h1> headings are already styled to be larger type than <h2> headings.

Versions

CSS has various versions developed throughout the years.
  • CSS1 - The first CSS specification was published in December 1996.  
    • Font properties such as typeface and emphasis
    • Color of text, backgrounds, and other elements
    • Text attributes such as spacing between words, letters, and lines of text
    • Alignment of text, images, tables and other elements
    • Margin, border, padding, and positioning for most elements
    • Unique identification and generic classification of groups of attributes
  • CSS2 - Version 2 was published as in May 1998.
    • Positioning: absolute, relative, and fixed positioning of elements and z-index
    • The concept of media types, support for aural style sheets and bidirectional text
    • New font properties such as shadows.
  • CSS3: This version, currently under development, is modularized and will consist of several separate recommendations. 

Tutorials