Write a comment on this article

Introduction to CSS

HTML alone offers limited possibilities to format and layout a page. Cascading Style Sheets (CSS) help you to do that with a simple mechanism. It defines how HTML elements are to be displayed, e.g. the color, the font-size, the background-image, and so on.

There are three ways to define styles for a document:

  1. In an external stylesheet file (e.g. style.css).
  2. In the style element in the head of the document.
  3. Inside an element using the style attribute (inline style).

Of course you can use more than one method to define the style. You can even define multiple styles for the same element, but be aware of how the styles are overwritten:

  1. Browser's default style is overwritten by
  2. Style defined in an external file and in the style element in the head of the document (depending on the order of the style and link elements) are overwritten by
  3. Inline style inside an element

Syntax
Here is the basic CSS syntax consisting of a selector and one or more property-value-pairs:

selector {
  property:value;
}
select code
 

The following example sets the text color of all paragraph elements to red and underlines the text:

p {
  color:red;
  text-decoration:underline;
}
select code
 

Grouping
It is possible to group several selectors to save lines of code. You can do this by delimitting the selectors with a colon. Here is an example which sets the text color of all paragraph and anchor elements:

p,a {
  color:red;
}
select code
 

Selectors
The following table gives an overview of the the available selectors you can use:

Table 1: CSS selectors
Name Description Example
Universal selector: * The universal selector applies to any element.

* {
  color:red;
}

All elements are selected, like <p> and <a>:

<p>Some text here.</p>
<div>And some text here.</div>
Type selector You can use the tag name to select all tags with the given name.

p {
  color:red;
}

a {
  text-decoration:underline;
}

All <p> and <a> elements are selected:

<p>Some text here.</p>
<p>And some text here with a <a href="#">link</a>.</p>
Descendant selector This selector selects all elements that are inside the first selected elements.

p a {
  color:red;
}

All <a> elements which are inside a <p> element are selected:

<p>Some text here. <a href="#">First link</a> <a href="#">Second link</a></p>
<p>And some text here. <a href="#">Third link</a> <a href="#">Fourth link</a></p>
Child selector: > This selector selects all elements that are a direct child of the first selected elements.

p>a {
  color:red;
}

All <a> elements which are a direct child of a <p> element are selected:

<p>Some text here. <a href="#">First link</a> <a href="#">Second link</a></p>
<p>And some text here. <a href="#">Third link</a> <a href="#">Fourth link</a></p>
Pseudo-class selector: :

Pseudo-classes allow the formatting based on information that lies outside the document tree. e.g. the first line of a paragraph or the mouseover-handling.

The following pseudo-classes are available:

first-child (the first child of its parent)
link (a not yet visited hyperlink)
visited (an already visited hyperlink)
active (an active link)
hover (mouse over an element)
focus (focus on an element)
lang(c) (language-specific formatting)

a:hover {
  color:red;
}

All <a> elements turn into red color when the user moves the mouse over them:

<p>Some text here. <a href="#">First link</a> <a href="#">Second link</a></p>
<p>And some text here. <a href="#">Third link</a> <a href="#">Fourth link</a></p>
Class selector: . With this selector you can define different classes which can be used in different HTML elements by assigning the class attribute. If you leave out the tag-name you can use this class at any element. You can even use more than one class (delimit classes with a space).

p.myFirstClass {
  color:red;
}

.mySecondClass {
  text-decoration:underline;
}

The definitions above could be used like this:

<p class="myFirstClass">Some text here.</p>
<p class="myFirstClass mySecondClass">And some text here.</p>
<a class="mySecondClass">More text here.</a>
Id selector: # The id selector is used for elements with an id attribute, so it is more specific. If you leave out the tag-name you can use this id at any element. The id must not start with a number!

p#myFirstId {
  color:red;
}

.mySecondId {
  text-decoration:underline;
}

The definitions above could be used like this:

<p id="myFirstId">Some text here.</p>
<p class="mySecondId">And some text here.</p>
Attribute selector: []

This selector allows you to select elements with specific attributes.

The following possibilities are available:

[attribute] (the attribute is set)
[attribute="value"] (the attribute has an exact value)
[attribute~="value"] (the attribute contains the value in a space-seperated list)
[attribute|=lang] (language specific attribute)

input {
  border:1px solid #000;
}

input[type="radio"] {
  border:none;
}

The definitions above could be used like this:

<input type="text" />
<input type="radio" />

Tags

CSS, introduction, syntax, grouping, selector

Comments (0)

Leave a comment

If you have a question or a problem and you're looking for a solution, please use the forum. Comments might not be answered.

Your name (required, maximum 255 characters) ( remember)
Your message (required, maximum 5000 characters)
 
Insert these letters into the textfield below: bfFI (required, case-sensitive)
Drag the slider to the right (required)