CSS Tutorial :: Part I

CSS Example #1

Defining the style of an element

Well, welcome to the first of my CSS examples... In these examples, source code is displayed in the green boxes, while the result of executing the code is displayed in the yellow boxes.

We can define the style applied to a single element by using the attribute style. Tris attribute is valid for every HTML element as its syntax structure is this:

<command style="property:value;">Content goes here...</command>

This is an inline style and it has the highest priority in the CSS specificity. This makes sense, since we are differentiating a particular element from a generality of them. We will see this later, now we will see just a basic example below:

<p style="color:red;">Red Text</p>

Red Text

CSS Example #2

Defining the style of an element

As you can see, the structure is very simple: inside the attribute style we type a property, two points, a value, and a semicolon that closes the sentence. We can add as many properties as we want, separating them with semicolons. The previous example would be the right way of applying font properties in HTML text, instead of the deprecated element font. Some common properties for the element style are:

font-style: specifies the style of the font and the possible values are normal and italic.

font-weight: specifies the weight (thickness) of the font and the possible values are normal, bold or a number between 100 and 900.

font-family: specifies the family (variant) of the font and admits as value any valid font name. It is required to set font-family before attempting some other stylings over fonts, such as font-size.

font-size: specifies the size of the font in pixels (px), typographic points (pt), centimeters (cm), milimeters (mm), inches (in), etc... It is assigned an integer number immediately followed (without whitespacing) of one of these abbreviations. Some units, such as measure units based on font sizes, allow float numbers.

color: specifies the color of the font; we can assign to this property a hexadecimal value or a color name for the most basic colors.

background-color: specifies the background color of the font, this is, the characters will appear like when we use a marker to highlight some text in a bloc, enclosed within a colored rectangle. Values for this property are assigned equally than in the property color.

text-align: specifies text alignment and the possible values are left, right, center and justify. This property is only for elements that are displayed as block, such as p, h1 or blockquote, and will not work in elements displayed as inline, such as span.

CSS Example #3

Defining the style of a document

If we want to easily apply styles that are common to an entire page, we have to use the command style inside the header of the page, this is, inside <head>...</header>. The CSS commands have to be placed inside <style>...</style>, where they are invoked by the different selectors that we need to use. The basic structure is shown below. The attribute type="text/css" indicates that it is a stylesheet. It is not really necessary to add this attribute now that newer browsers are in use, but it will not harm to add it. I personally prefer to make my code as complete as possible, since it can make the code stronger against unexpected errors.

One way of adding a stylesheet to a page is by using the src attribute like in this example: <STYLE type="text/css" src="css/style.css"></STYLE>. When the page loads the content of the file is embedded inside the style element. Another way of calling an external stylesheet is by using the element link like this: <link href="css/style.css" type="text/css"/>. Including the CSS code directly in the document instead of embedding or linking it, is intended only if we want to apply special styles for that document.

<title>My webpage</title>
<style type="text/css">

CSS Example #4

Identifiers and classes

Semantic elements provide an excellent base to work with styling, but the list of available elements is not exhaustive, because HTML was created as a simple markup language not intended as an interface designer. Due to this, elements such as content areas or navigation bars do not exist. We could create our own elements by using XML, but certainly, this is not a tutorial about XML. With CSS we differentiate elements by adding to them identifiers and classes as we need it. Then we would use selectors to apply properties to the elements that belong to a certain class or identifier. As the concept implies, here the idea is to use classes to indicate elements of similar characteristics that appear more than once in a document, while a certain identifier should be used only once in a document, for it refers to a single element, which has no equal in the document. For example, if we want all the headlines in a document to have the same style applied to them, we would use something like <h2 class="headline">This is a vulgar headline</h2>, and if we want a certain headline to have a distinctive feature, then we would mark it with an identifier like <h2 class="headline" id="special">This is a special headline</h2>. In the example we will apply effects to these by using selectors; don't worry about not understanding them, we will look at selectors later.

There exists a bad programming habit in CSS that can be acquired easily: to write an excess of classes in the code, in an attemp to gain more control over the elements. The result is a document filled with lots of unnecessary classes that make the code unnecesarily confuse. If you look at the code in this example, you see that every heading has been assigned a class. In many cases this can be required or useful, but in many others unnecessary. If all the h2 elements on the document (or in the website) are going to have the same style, it is unnecessary to assign them a class, since the elements can be styled by using their element type (h2 in this example). In this example .headline could be replaced by h2 and hence the class headline could be removed. If you find yourself adding many classes in a document, it could be as well a symptom of your HTML document being badly structured.

/* CSS in header */

<style type="text/css">
.headline {font-family:verdana,arial,sans-serif; font-size:18px;}
#special {font-family:verdana,arial,sans-serif; font-size:24px; color:#808080; text-transform:uppercase;}

/* (X)HTML */

<h2 class="headline" id="special">This is a special headline</h2>
<h2 class="headline">This is a vulgar headline</h2>
<h2 class="headline">This is a vulgar headline</h2>
<h2 class="headline">This is a vulgar headline</h2>

This is a special headline

This is a vulgar headline

This is a vulgar headline

This is a vulgar headline

CSS Example #5

Naming identifiers and classes

When naming identifiers and classes it is important to keep their names the more meaningful possible. It should be avoided to use names based in presentational characteristics, such as positioning or color, and focus in names that are based instead in the function of the element. So, if the presentational characteristics of the element change some day, the name will remain meaningful. Following this convention, some examples of bad names are: redMessage, leftColumn, topNavbar, firstParagraph... while some examples of good names are: errorMessage, secondaryContent, mainNavbar, introduction...

When writing names of identifiers and classes it is important to pay attention to uppercase and lowercase characters, for CSS is generally case-sensitive. However, the way that names are written in the code depends on the type of markup language. In XHTML names of identifiers and classes are case-sensitive, while in normal HTML they aren't. The best way of managing this is to be disciplined in our naming style, and always write the names to be equal in both the markup and the CSS. This will avoid problems.