Lesson 7 - Basic CSS selectors and properties
In the previous lesson, Introduction to CSS (Cascading Style Sheets), we introduced you to CSS, explained what is CSS good for, and saw what a page using CSS looks like. Today, we're going to show you how to style websites using CSS, in detail.
We are going to style our website that we started a couple of lessons back. Open up Notepad++, create a new file, and select CSS as its language.
Just like HTML, all CSS is, is an ordinary text file.
Selectors
CSS is based on what we call selectors. As the name suggests, selectors allow us to select elements in a page based on specific criteria we have set and style those elements based on said criteria. Unlike HTML, all a CSS document needs is selectors (no doctype, head, body, or anything else).
Type selector
The simplest kind of selector is the type selector which
selects every element of the given type. If you wanted to select every
<h1>
on a page, you would do the following:
h1 {
}
Selectors are able to style elements of a given type (in this case h1). The selector is then followed by a block of curly brackets in which we specify the style properties that we want the elements to have.
text-align
The first CSS property we will cover is text-align. We add properties into the selector's curly brackets. A colon goes after the property name and its value is terminated by a semicolon. Let's center every h1's text on our page:
h1 { text-align: center; }
Cool, Now test it out on your page! Add the code above to a new CSS file and save it as style.css into the website folder.
Now all we have to do is link the HTML document to this CSS style page. Open
up your index.html and add the following line to the
<head>
:
<link rel="stylesheet" href="style.css" type="text/css" />
The page will now be styled based on what we write in the CSS document. Your page should now look something like this:
First-level headings (h1) now have their text centered. If we wanted to do the same thing for second-level headings, you wouldn't have to duplicate the code. All you would have to do is extend the selector by adding h2 to it (separated by a comma):
h1, h2 { text-align: center; }
The result:
Now we can center text, easily. As a matter of fact, you are also to center paragraphs, table cells, and loads of other elements this way. Most of CSS's properties are not limited to a specific element type.
We can assign the following values to the text-align
property:
- left - Aligns the text to the left
- right - Aligns the text to the right
- center - Centers the text
- justify - Aligns the text into a block where each line has the same width
We should only use the "justify" value when an element with the text is very wide (at least 800px), or else if creates ugly spaces otherwise (called "rivers" in typography). Magazines and news institutions deal with these sort of problems by splitting of words. Unfortunately, browsers do not split words for us at the moment.
color
Now let's add some color to our site! We use the
color
property in CSS to do just that. We can
enter the color value in different ways.
One way of doing it is using color constants. There are 16 constants available: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Unfortunately, all of the colors they chose are very ugly. Other than black and white, hardly anyone uses the color constants. CSS offers many other color constants which are, unfortunately, not valid and therefore not usable.
The most common way to specify a color is using RGB. As you probably know, every color your computer displays is made up of 3 components: red, green, and blue. We can make any color we could possibly think of using the 3.
Let's say that we wanted to add a blue color to our site. One way to do it is using the "blue" constant:
color: blue;
If you want, you could add it to the selector for h1 and h2 headings as well. The style would then look like this:
h1, h2 { text-align: center; color: blue; }
When there is more than one line in a selector, you write them on separate lines. Save the style and refresh the page. Your page should now look something like this:
Since we want a different tone than those of the 16 ugly default colors, change the code to this:
color: rgb(0, 0, 255);
The first zero means that there is 0 of the red component included, the green value has zero value as well, and the last component (blue), is set to the maximal value (255).
The syntax can also be simplified using hexadecimal notation. Blue in hexadecimal is written like this:
color: #0000FF;
The hexadecimal color syntax starts with a hashtag and is followed by 2 numbers for each RGB component follows (2 for red, 2 for green, and 2 for blue). Maximal value is FF. You can try yourself that both notations will color your heading to the same color, just like the original blue constant.
The hexadecimal approach is the most common because it is short. Although the value is "hard to read", every better graphic editor (like GIMP or Photoshop) will show you the HTML syntax of a selected color. You can also use our online Colorpicker where you can easily pick any color and get its HTML notation.
Let's set a "nicer" tone of blue for our headings. One that won't make our website look like a parrot.
h1, h2 { text-align: center; color: #0a294b; }
It's a substantially dark blue, but isn't pitch black, which feels comforting:
That is all for today. In the next lesson, The class selector and styling text in CSS, we're going to keep working on styling, which will be our main focus for quite a while Today's source code is available for download in the attachment below, as usual.
Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.
Download
By downloading the following file, you agree to the license terms
Downloaded 62x (69.12 kB)
Application includes source codes in language HTML