CSS - Cascading Style Sheets

The idea behind the CSS is to separate style from the data in HTML documents.

Syntax

selector { property: value }

Selector is the HTML element or some other definition of exact element on the page (see below for selector definitions), property is attribute name and the value is the attribute value.

Example:

h1 { font-family: sans-serif; color: red; }

Styles can be applied in three ways:

1. inline (in style attribute of html element):

<p style="font-family: sans-serif; font-size: 20px;">Cheeeese</p>

2. internally (inside the <head> element):

<html>
<head>
<title>Using Styles</title>
<style type="text/css">
p {
font-family: sans-serif;
font-size: 12px;
color: red;
}
p.bold {
font-weight: bold;
}
p.blue {
color: blue;
}
</style>
</head>
<body>
<p>Hello paragraph</p>
<p class="bold">Hello boldy</p>
<p class="bold blue">Bold and blue</p>
</body>
</html>

3. external .css file (include this line in <head> element):

<link rel="stylesheet" type="text/css" href="mystyles.css">

Grouping

Define a group of elements and apply the same style to all of them.

h1, h3, p {
font-family: Arial;
color: red;
}

Subdividing tags by class definition

p {
font-family: Arial;
font-size: 12px;
}
p.error {
color: red;
}

It this case all <p> tags will show black text in Arial font, but tags that define class="error" will be colored in red.

<p>This text is black</p>
<p class="error">Error message</p>

Specifying more than one class

<p class="big bold red">My message</p>

You can combine different properties by specifying more than one class.

All-purpose properties

.blue {
color: blue;
}

These properties are not assigned to any specific selector, but can be used by any tag that defines class="blue". The next tags share the same property:

<p class="blue">Hello blue</p>
<h1 class="blue">The sky is blue</h1>
<span class="blue">Spanning over blue</span>

ID selectors

#blue {
color: blue;
font-size: 18px;
}

Unlike class selectors that can be used for multiple tags, the ID selectors target a single tag with unique id in the whole document.

<p id="blue">My message</p>

Attribute selectors

p[class] {
font-weight: bold;
}

In this case style can be applied to all tags that have any class declared. For example:

<p class="blue">Hello blue</p>

This line should produce blue and bold text, just because the tag has a class attribute.

What about CSS inheritance?

In CSS language, inheritance means that the child tag in HTML code will inherit the style of its parent tag. In practice, this means, if you define the red text color inside body selector, all text-based tags should apply red color to the text. ‘Cascading’ is just another word for inheritance.

body {
color: #888;
font-family: Arial, sans-serif;
}

It might be a good practice to put font-family property in body selector, since you probably want to use the same font throughout entire webpage.

Case sensitivity

HTML and CSS in general are NOT case sensitive. Body, BODY, body and bodY they all represent the same <body> tag, but CSS classes and ID selectors ARE case sensitive.

Lobbying for styles

What if two or more selectors define different looking styles (like colors)?

p.blue {
color: blue;
}

<p class="blue" style="color: red;">Error</p>

The 'closeness' factor decides which style will be applied. Style that is closer to the element should win:
1. inline style
2. internal <style> definition
3. external css definition
4. browser defaults

Styling text

Applying font, size and color to text.

p {
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
font-size: 12px;
font-weight: bold;
color: red;
}

Font-family property defines one or more fonts. If first font is not available on the system, second font will be used and so on. If none of fonts exist on the system, then default sans-serif font will be used.

Sans-serif font is type of writing without fancy curls on the ends of lines. Usually all lines in any letter have uniform thickness. Such fonts are: Arial, Verdana, Helvetica...

Serif fonts have curls on the ends of lines and line thickness varies. Such fonts are Times, New York, Garamond...
Sans-serif fonts are easily readable and therefore perfect for titles to attract attention, while serif fonts look more formal and can be used in the body of the message.

Monospace font like Courier, is typically used to represent a piece of computer code. Width of monospace characters is fixed (i has the same width as m). In HTML monospace fonts can be displayed with <code> tag.

You can also use your system’s default styles (buttons, fonts...). The fonts on the web page will look much more like the operating system you are using.

button { font: caption; }
icon { font: icon; }
menu { font: menu; }

<button>This is a caption on a button</button>

<icon>ICON FONT</icon>

<menu>menu font</menu>

Text alignment

p.right { text-align: right; }

Indenting text

p { text-indent: 2em; }

Border

Add border around elements

.border {
border: 1px solid #555555;
}

Transparency (opacity)

Make elements transparent

#popup {
opacity: 0.7;
filter: Alpha(opacity=70); /* IE8 and earlier */
}