📅 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.
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 */
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! 😊