CSS Introduction


Cascading Style Sheets (CSS) are powerful tools of convenience when styling web pages. A style sheet is text that contains one or more rules that determine how certain HTML elements in your web page should be displayed. An HTML element is an individual component of an HTML document that usually has a start tag and an end tag. In HTML, the paragraph is represented by the p element and is shown below with the correct syntax. Before working with CSS you need to know HTML.

<h1>This is a heading</h1>
<p>This is the syntax for a paragraph</p>

CSS Style Rules

Each style rule is made of a selector (which indicates what will be formatted) and a declaration block (which describes the formatting that should be executed).

css-selector

Below is a few examples.

h1 {color:blue; font-size:12px}
p {
    color: red;
    text-align: center;
}

Element Selector

The id selector uses the id attribute of an HTML element to select a specific element. The id of an element should be unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element. An id name cannot start with a number! The style rule below will be applied to the HTML element with id=”para1″:

#para1 {
    text-align: center;
    color: red;
}

Class Selector

The class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class. A class name cannot start with a number. In the example below, all HTML elements with class=”center” will be red and center-aligned:

.center {
    text-align: center;
    color: red;
}

Specific Elements with a Class

You can also specify that specific elements that have a specific class will be affected. In the example below, only h1 elements (largest heading) withe the class of “center” will be affected.

h1.center {
    text-align: center;
    color: red;
}
<h1 class="center">This heading will be red and center-aligned</h1>
<h1>This heading will not be affected</h1>
<p class="center">This paragraph will not be affected.</p> 

HTML Elements with more than one class

HTML elements can also refer to more than one class. In the example below, the

element will be styled according to class=”center” and to class=”large”:

<p class="center large">This paragraph refers to two classes.</p>

Grouping CSS

f you have elements with the same style definitions, like this:

h1 {text-align: center; color: red; }
h2 {text-align: center; color: red; }
p { text-align: center; color: red; }

It will be better to group the selectors, to minimize the code. To group selectors, separate each selector with a comma. In the example below we have grouped the selectors from the code above:

h1, h2, p { text-align: center; color: red; }

CSS Comments

You start a comment with forward-slash star and end it with star forward-slash.

Sources of Information

There are many many good sources of CSS information out there on the web. Here are a couple of links for beginners.

Useful CSS tips for beginners by hongkiat.com.
CSS Syntax and Selectors by w3schools.com.
Mozilla Developers Network