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 (;)

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.

Presentation

CSS