Cascading Style Sheets can work with Extensible Markup Language (XML) and facilitate the display of XML documents in a web browser. A style sheet has three main ingredients such as selector, property and value. A selector specifies an element or a class and id title to which a particular style will be applied. A property provides information on how to format the selector. A value, on the other hand, is the definite style that will be applied to the property on the selector.

The following piece of code will display all the paragraphs with the same font:

p {
font-family : arial;
}

In the above example, p is the selector. All the text written within the p tag is affected by the style mentioned, i.e. all the text will be displayed in Arial. The font-family is the property and ‘Arial’ is the value. So by looking at the above example, we can work out the format of a style declaration.

selector {
property : value ;
property2 : value ;
}

Each selector can contain multiple style properties which are grouped within curly braces, {}. The property is distinguished from the value with a colon. Each of the style statement ends with a semi-colon. A semi-colon is required to separate more than one style. It is always a good practice to use it all the times.

A selector is nothing but an HTML tag. You can also create classes and IDs. These genres of selectors are employed when you are not sure on which element a specific style is to be applied. The following code converts the background color to yellow. But it doesn’t mention the tags to be highlighted.

.highlight {
background-color : #ffff00;
}

To apply the style, you need to create a class in your HTML tags:

<h2 class=”highlight”>This headline is highlighted</h2>

There is also an alternative to this:

<span class=”highlight”></span>

CSS has many properties which you can use in your style sheets. One of these popular properties is font properties. Various font properties include font-family, font-size, font-style, font-variant and font-weight.

The font-family specifies the type of font to be displayed on the web browser. If your computer does not have that font family, then it is indulged in guess work. As a result, you may not get the desired effects you want. So it is always advisable to use standard or generic font names. You can arrange different font families in the order of your preference. If one font family is not supported by your web browser, then the next font family in the line is displayed. You need to separate each font family with a comma.

font-family : arial,geneva,helvetica,sans-serif;

Various font families which are quite popular with web browsers include serif, sans-serif, monospace, cursive and fantasy.

The font-size property defines the size of the font. The font can be mentioned as an exact size, a length, a relative size or a percentage of the available space. There are a number ways to specify the exact size like ems, pixels, picas, points, inches, centimeters and millimeters. There are also seven pre-defined font sizes in HTML and XML. They are: xx-small, x-small, small, medium, large, x-large and xx-large. The default size is medium.

The font-style defines the font whether the font is italic, normal or oblique. The font-variant property specifies whether the font is normal or small-caps. The default setting is normal. The font-weight property specifies the darkness or lightness of the text. Various values of font-weight are bold, bolder, lighter or a specific digit ranging from 100-900 and normal (the default).

Tags: Advanced CSS Features