Basic of CSS

In this tutorial, you will learn the basics of CSS. This tutorial contains online editor which you can edit and run the codes to view the results. Try to solve the exercise by editing the codes in the online editor. This tutorial is not meant to be comprehensive. For more information please refer to the slide presentation available on eLearn@USM, reference book or the internet.

CSS Selectors

CSS selectors are used to select (find) HTML elements based on their element name, id, class, attribute, and more. The following are the basic CSS selector. More selectors can be referred here.

The element/type selector uses the element names to select specific element. To select all elements, write the element name e.g. a {...}.

The class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class e.g. .para {...}.

The id selector uses the id attribute of an HTML element to select a specific element. The id must be unique within a page, so the id selector is used to select one unique element. To select an element with a specific id, write a hash (#) character, followed by the id of the element e.g. #head3 {...}.

More about CSS selectors


Background and Colors

CSS color property allows you to specify the color of an element. You can specify any color in CSS in one of three ways. CSS background properties are used to define the background effects for elements. Refer here for valid color names and here for color converter.

Exercise

Edit the example as follows.
1. Change the background color to lightgrey.
2. Set the font color of the paragraph to #441586.


Margin and Padding

CSS margin properties are used to create space around elements, outside of any defined borders. Each side of an element (top, right, bottom, and left) margins can be set.

CSS padding properties are used to generate space around an element's content, inside of any defined borders. Each side of an element paddings can be set. Run the following examples and notice the margin and padding of the elements. Border properties is used to draw solid boundaries. More border is available here.

Exercise

Edit the example as follows.
1. For heading 4, set the margin to 0px and padding-top to 10px and the other sides to 5px.
2. For the paragraphs, set margin to 0px and padding to 5px.
3. Remove the borders for all elements.


Text

CSS font properties define the font family, boldness, size, and the style of a text. A browser will usually only display a font if it is installed on that user's computer. Browsers usually support at least one typeface from each of the groups (serif, san-serif, monospace). It is common to add the generic font name after your preferred choice of typefaces.

Exercise

Edit the example as follows.
1. Set the font-family to Arial and the font-size of the heading to 20px.
2. Set the font-size of the paragraphs to 16px;


Layout

CSS treats each HTML element as if it is in its own box. You can control how much space each box takes up by setting the width of the boxes and height. To separate boxes, use borders, margins, padding, and background colors. This box will either be a block-level box or an inline box.