getting started with css

Jump to: navigation, search

Getting started with CSS

This article is Almost Ready.



Summary

This guide covers the basic fundamentals of CSS, including CSS anatomy, selectors, comments, and how to apply it to HTML.

Introduction

This article covers the basics of CSS, to help you get started with this powerful styling language. You will learn how to apply CSS to HTML documents, either as inline styles using style attributes, embedded styles in a <style> element in the document <head> or as external files in their own document.

You will also learn that the latter — linking an external style sheet using a <link> element — makes the most sense in terms of maintenance and caching.

Additionally, an overview of the basic syntax of CSS is provided, including details about adding comments, selector types, and grouping selectors.

What is CSS?

Whilst HTML structures the document and tells browsers the function of page element (Markup indicates a link to another page, or specifies a page heading), CSS provides rules that instruct the browser how to display a certain element — styling, spacing, coloring, etc. If HTML is the foundation and bricks that make up the structure of a house, CSS is the plaster and paint that decorate it.

CSS styles are applied using a system of rules (or rulesets). The exact syntax for CSS rules is described below. CSS rules:

  1. Identify which HTML elements should have styling applied
  2. Specify the "properties" (color, size, font, and other attributes) of the styled HTML elements
  3. Contain the values that control the appearance of each property

For example, a CSS rule might state:

I want to find every <h2> element on a page, and change the color of text surrounded by these tags to green.

or

I want to find every <p> element with a class attribute of author-name, set the background color to red, resize the text to twice the size of normal paragraph text, and add 10 pixels of spacing around each instance.

CSS is not a programming language like JavaScript and it is not a markup language like HTML — actually there is nothing that can be compared to it. Technologies that defined interfaces before web development always mixed presentation and structure. As we've discussed earlier in the course, this is not a clever thing to do in an environment that changes as often as the Web, which is why CSS was invented.

Defining style rules

Style rules can operate on different sets of items, selected in different ways. For example, they can be directly applied to HTML elements (body, article, nav, list, p, em, strong, etc.), or they can be applied to any elements with custom made classes or IDs . This is the basic form:

selector {
  property1: value;
  property2: value;
  property3: value;
}

The pertinent parts are as follows:

  • The selector identifies which HTML elements are affected by the rule, using actual element names, such as <body>, or other identifiers such as class attribute values. When applied to the actual element names, selector is simply replaced by the name of that block. For classes the syntax is .classname, for IDs, #idname. A more complete description comes later.
  • The curly braces contain the property/value pairs, which are separated from each other by semi-colons; the properties are separated from their respective values by colons.
  • The properties define what you want to do to the element(s) you have selected. These come in wide varieties, which can affect attributes such as text color, background color, the position of the element on the page, font type, border color and thickness, and many other appearance and layout controls.
  • The values are the settings that specify details of each property applied to elements. The values are dependent on the property. For example, properties that affect color can use hexadecimal colors like #336699, RGB values like rgb(12,134,22) or color names like red, green, or blue. Properties that affect position, margins, width, height, and others can be measured in pixels, ems, percentages, centimeters, or other units.

Review this specific example:

p {
  margin: 5px;
  font-family: arial;
  color: blue;
}

The HTML element this rule affects is <p> — every <p> in the HTML document or documents that this CSS rule is applied to will display with these styles, unless they have more specific rules also applied to them, in which case the more specific rules will override this rule. The properties affected by this rule are the margins around the paragraphs, the font of the text inside the paragraph tags, and the color of that text. The margins are set to 5 pixels, the font is set as Arial, and the color of the text is set to blue.

A whole set of CSS rules are added to a CSS document to form a style sheet. This is the most basic syntax when writing CSS rules. Some rules are more complex, but not much — probably the coolest thing about CSS is its simplicity.

Whitespace in CSS

Note that whitespace in CSS works in exactly the same way as it does in HTML — excess whitespace is completely ignored by the browser that renders the CSS, so in most cases* you can add as much whitespace as you like to make the code easier to read. So this rule:

p {
  margin: 5px;
  font-family: arial;
  color: blue;
}

Is functionally identical to this rule:

p {margin: 5px;font-family: arial;color: blue;}
* There are a few exceptions where whitespace matters. For example, inside CSS function syntax, adding whitespace matters. So the property value url(background-image.png) would not work properly if you put a space between url and the rest of it, for example url (background-image.png).  But in general, as long as you include the necessary curly braces, colons, and semi-colons to separate out different parts, the browser understands the values you apply to properties. 

CSS comments

One thing to know early on is how to add comments in CSS. You add comments by enclosing them in /* and */. Comments can span several lines. Browsers will ignore commented lines of text:

/* These are basic element selectors */
selector{
  property1: value;
  property2: value;
  property3: value;
}

You can add comments either between rules or inside the property block. For example, in the following CSS the second and third properties are enclosed inside comment delimiters, so they will be ignored by the browser. This is useful when you are testing the effect certain CSS rules have on your web page; just comment them out, save your CSS file, and reload the HTML page in a browser.

selector{
  property1: value;
  /* 
  property2: value;
  property3: value;
  */
}

Grouping selectors

You can also group different selectors. If you want to apply the same style to h1 and p, you can write the following CSS:

h1 {
  color: red;
}
 
p {
  color: red;
}

This however is not ideal, as you are repeating the same information. To remedy this, you can shorten the CSS by grouping the selectors together with a comma — the rules within the curly braces are applied to both selectors:

h1, p {
  color: red;
}

Basic types of selector

There are several different selectors, each matching a different part of the markup. The three types of selectors that you will encounter most often are:

Element selector

p {}

An element selector matches all the elements of that name on the page (<p> elements, in the case above). By specifying an HTML tag, you can affect all page elements that are surrounded by that tag.

Class selector

.example {}

A class selector matches all elements that have a class attribute with the value specified, so the above would match <p class="example">, <li class="example"> or <div class="example">, or any other element with a class of example. Note that class selectors do not test for any specific element name.

ID selector

#example {}

An ID selector matches all elements that have an id attribute with the value specified, so the above would match <p id="example">, <li id="example"> or <div id="example">, or any other element with an id of example. Note that ID selectors do not test for any element name. You can only have one of each ID per HTML document — they are unique to each page.

You can see the above selectors in action in the following examples. Notice that when you open the example in a browser the warning style is applied to both the list item and the paragraph (if the bullet disappears it is because you are setting a white text color on a white background).

Combining selectors

You can join selectors together to define even more specific rules:

  • p.warning {} matches all paragraphs with a class of warning.
  • div#example {} matches the element with an id attribute of example, but only when it is a div.
  • p.info, li.highlight {} matches paragraphs with a class of info and list items with a class of highlight.

Note that this does not mean that you can use a shorthand for the definition of your elements in HTML. For example, your HTML paragraph will still have to be in the form <p class="classname">, but you can style it specially in your CSS with p.classname {}.

In the following example we are using these to differentiate between the different warning styles:

CSS shorthand

Another thing you’ll come across regularly in this course is CSS shorthand. It is possible to combine several related CSS properties together into one property to save time and effort on your part. In this section we will look at the available types of shorthand.

For example, the border property is shorthand.

border: 2px solid black;

is equivalent to

border-width: 2px;
border-style: solid;
border-color: black;

Comparing individual and shorthand values

Consider the following margin rule:

div.foo {
  margin-top: 1em;
  margin-right: 1.5em;
  margin-bottom: 2em;
  margin-left: 2.5em;
}

Such a rule could also be written as:

div.foo {
  margin: 1em 1.5em 2em 2.5em;
}

These types of property can take less than four values too, as follows:

  1. Same value applied to all four sides — margin: 2px;
  2. First value applied to the top and bottom, second to the left and right — margin: 2px 5px;.
  3. First and third values applied to the top and bottom respectively, second value applied to the left and right — margin: 2px 5px 1px;.

There are a number of properties that work like this, including padding, margin and outline. You'll find more out about these later on.

Making the choice to use a single property or a shorthand value

Shorthand margin and padding properties tend to get the greatest share of use, though there are situations in which the shorthand properties are best avoided, or at least considered carefully, such as in the following situations:

  • When a single margin needs to be set. In a situation where only one property needs to be set, the act of simultaneously setting multiple properties usually violates the KISS (Keep It Simple, Stupid) Principle.
  • The selector to which your properties apply is subject to many edge cases. When this happens — which it will, sooner or later — the inevitable heap of shorthand values can become hard to follow when it comes time to repair or alter your layout.
  • The style sheet you’re writing will be maintained by people with limited CSS skills (or spatial reasoning ability). If you can get them to read this article you may not need to worry about this scenario, but it is best not to make any assumptions.
  • You need to supplant a value, to account for an edge case. This requirement is often a signal of a poorly designed document or style sheet, but those are hardly unheard of.


Applying CSS to HTML

There are three ways to apply CSS to an HTML document: inline styles, embedded styles and external style sheets. Unless you have a very good reason to use one of the first two always go for the third option. The reason for this will become obvious to you soon, but first here is an overview of the different options.

Inline styles

You can apply styles to a specific element using a style attribute, like this:

<p style="background:blue; color:white; padding:5px;">Paragraph</p>

Inside this attribute you list all the CSS properties and their values. Each property/value pair is separated from the others by a semi-colon, and each property is separated from its value within each pair by a colon. Try viewing the source of this example.

If you open this example in a browser you will see that the paragraph with the style attribute is blue with white text and has a different size from the others, as shown in Figure 1.

Screenshot of the Opera browser showing an applied inline style sheet

Figure 1: Opera shows the paragraph with the applied inline styles differently from the others.

The benefit of inline styles is that the browser will be forced to use these settings. Any styles defined in other style sheets or even embedded in the <head> of the document will be overridden by these styles.

The big problem with inline styles is that they make maintenance a lot harder than it should be. Using CSS is all about separating the presentation of the document from the structure, but inline styles are doing just the opposite — scattering presentation rules throughout the document.

In addition to the maintenance issue you do not take advantage of the most powerful part of CSS: the cascade. The concept of the cascade is discussed in more detail later, but for now all you need to know is that using the cascade means you define a look and feel in one place and the browser applies it to all the elements that match a certain rule.

Embedded styles

Embedded styles are placed in the <head> of the document inside a <style> element as in this example:

<style type="text/css" media="screen">
  p {
    color: white;
    background: blue; 
    padding: 5px;
  }
</style>

If you open the above link in a browser you will see that the defined styles get applied to all the paragraphs in the document, as shown in Figure 2. Also try looking at the example page’s source to see the CSS inside the head.

Screenshot of the Opera browser showing how an embedded style sheet affects a lot of elements

Figure 2: Opera shows all paragraphs with the styles defined in the embedded style sheet.

The benefit with embedded styles is that you don’t need to add a style attribute to each paragraph — you can style them all with one single definition. This also means that if you need to change the look and feel of all paragraphs, you can do it in one single location, however this is still limited to one document — what if you want to define the look of paragraphs for a whole site in one go? For this we use external style sheets.

External style sheets

External style sheets means putting all your CSS definitions in their own file, saving it with a file extension of .css, and then applying it to your HTML documents using a <link> element inside the document <head>. View source of our example page, and note that the <head> contains a <link> element that references this external CSS file, and verify that the styles defined in the external CSS file are applied to the HTML. Let’s have a closer look at that <link> element:

<link rel="stylesheet" href="styles.css" type="text/css" media="screen">

We’ve talked about the <link> element before in this course. Just to recap: the href attribute points to the CSS file, the media attribute defines which media should get these styles applied to it (screen in this case as we don’t want a printout to look like this) and the type defines what the linked resource is (a file extension is not enough to determine that).

Screenshot of the Opera browser showing how an external style sheet affects a lot of elements

Figure 3: Opera shows the styles defined in the external style sheet when it is linked with a link element.

This is the best of all worlds: you keep your look and feel definitions all in one single file, which means that you can make site-wide changes by changing one file, and the browser can load that once and then cache it for all other documents that reference it, meaning less to download.

@importing stylesheets

There is actually another way to import external style sheets into HTML files - the @import property. This is inserted into an embedded style sheet, in the same way as the embedded CSS shown above. The syntax looks as follows:

<style type="text/css" media="screen">
  @import url("styles.css");
 
  /* ...other import statements or CSS styles could go here... */
 
</style>

Sometimes import statements are written without the brackets, but they achieve the same goal. Another thing to be aware of is that @import should always be first in an embedded style sheet. Finally, you can specify that the imported style sheet be applied only to certain types of media by including the media type at the end of the import statement (this works in every browser except IE6 and below). The following does the same thing as the previous code example:

<style type="text/css">
  @import url("styles.css") screen;
 
  /* ...other import statements or CSS styles could go here... */
 
</style>

The first question you'll be asking is "why on earth do I need another way to apply external style sheets to my HTML documents?" Well, you don't really - I am mainly including information on @import here for the sake of completeness. There are a few minor advantages/disadvantages of using @import over <link> elements, but they are very minor, so it is really up to you which way you go. <link> elements are the recognised best way to do things these days.

  • As mentioned before, IE6 doesn't support putting the media type at the end of the @import line, so they are not a good way to go if you want to insert multiple stylesheets for different media.
  • You could argue that the code for multiple @import statements is smaller than the code for multiple <link> elements, but this is pretty negligible.



See also

Exercise Questions

  • What are the benefits and problems of inline styles and how do you apply them to an element?
  • What is a style rule? Describe the different components and syntax.
  • Say you have a bunch of style rules, what do you need to do to make them into an external style sheet?
  • What does the following CSS selector match: ul#nav{}?
  • What is the benefit of grouping selectors?
  • How can you define a print style sheet?