📅 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
{: value0;
property0: value1;
property1
}/* 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 */
, selector2
selector1
{;
property: value
}/* Example: Display all paragraph and H1 header text in monospace font. */
, h1
p
{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. */
.showMono
p
{font-family: monospace;
}
This class would apply only on the parapraph element in HTML and would be ignored on other elements.
ID
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 */
#showItalic
p
{font-style: italic;
}/* HTML snippet using the above ID */
>Green Lantern</p> <p id="showItalic"
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 */
.showMono.showItalic
p
{font-family: monospace;
font-style: italic;
}/* HTML snippet using above classes */
>Green Lantern</p> <p class="showMono showItalic"
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. */
.showBlack div p.showMono
body
{font-family: monospace;
}
>
<body class="showBlack">
<div>Green Lantern</p>
<p class="showMono">
</div> </body
With these basics of CSS it should be easy to read and understand any CSS or HTML style code! 😊