Basics of CSS

📅 2010-Nov-20 ⬩ ✍️ Ashwin Nanjappa ⬩ 🏷️ css, html, xml ⬩ 📚 Archive

Cascading Style Sheets (CSS) is the language used to describe the look of a HTML or XML document. When it is separate from the HTML document, it is specified as a set of rules. Each rule is of the format:

/* Note: This is a CSS comment. */
/* Simple rule format */
selector
{
    property: value;
}
/* Example: Display all paragraph text in monospace font. */
p
{
    font-family: monospace;
}

A selector can have many property-value pairs enclosed in the curly brackets and separated by semicolons:

/* A selector with multiple property-value pairs */
selector
{
    property0: value0;
    property1: value1;
}
/* Example: Display all paragraph text in monospace font that is italicized. */
p
{
    font-family: monospace;
    font-style: italic;
}

Many selectors that have the same property-value pairs can be grouped by using commas:

/* Multiple selectors with same property-value pairs */
selector1, selector2
{
    property: value;
}
/* Example: Display all paragraph and H1 header text in monospace font. */
p, h1
{
    font-family: monospace;
}

A style specified by CSS can generally be overridden by a CSS style that comes after it or by a style specified at the HTML element itself. To force a style use the !important specifier at the end of the value:

/* Example: Force all paragraph text to monospace font. */
p
{
    font-family: monospace !important;
}

Class

To define a class, prefix the class name with a period. Such a generic class can be used by any HTML element.

/* Example: A class named showMono */
.showMono
{
    font-family: monospace;
}

The showMono style from above will be applied on both the HTML elements in this example because it is generic:

<h1 class="showMono">Green Lantern!</h1>
<p class="showMono">Coming in 2011!</p>

To define a class on a specific HTML element, use this format:

/* Example: A class showMono defined only on paragraph element. */
p.showMono
{
    font-family: monospace;
}

This class would apply only on the parapraph element in HTML and would be ignored on other elements.

A ID is defined in CSS and used in HTML just like a class. The only difference is that the prefix used for ID is #. For example:

/* Example: ID named showMono defined only for paragraph element */
p#showItalic
{
    font-style: italic;
}
/* HTML snippet using the above ID */
<p id="showItalic">Green Lantern</p>

ANDing

Two class names can be ANDed together for use by a HTML element. In CSS, the class names are appended using periods. In HTML, they are separated by spaces.

/* Example: Classes showMono AND showItalic defined on paragraph element */
p.showMono.showItalic
{
    font-family: monospace;
    font-style: italic;
}
/* HTML snippet using above classes */
<p class="showMono showItalic">Green Lantern</p>

Nesting

A CSS style can be specified for use on a certain nested order of HTML elements. To define this in CSS, the selectors are separated by spaces:

/* Example: See below for HTML on which this style is effective. */
body.showBlack div p.showMono
{
    font-family: monospace;
}

<body class="showBlack">
    <div>
        <p class="showMono">Green Lantern</p>
    </div>
</body>

With these basics of CSS it should be easy to read and understand any CSS or HTML style code! 😊