Lesson 7 - Basic CSS selectors and properties

HTML and CSS First website 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.

Creating a new CSS file in Notepad++

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:

Centering headings in CSS

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:

Centering headings using CSS

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:

Coloring headings using CSS

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:

Coloring headings using CSS

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.


 

Download

Downloaded 48x (69.12 kB)
Application includes source codes in language HTML

 

 

Article has been written for you by David Capka
Avatar
Do you like this article?
2 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn College The author learned IT at the Unicorn College - a prestigious college providing education on IT and economics.
Activities (7)

 

 

Comments

Avatar
Ardouin Best Saint Jean:7. July 9:45

<!DOCTYPE.html>
<html lang="en">
<meta charset="utf-8" />
<title>Who am i</title>
<link rel="stylesheet" href="style.css" type="text/css" />

<head>

</head>
<body>
<h1> a short bio</h1>
<p> A little bit of kind,
bad temper , nice you know how people can be , like up and down</p>

<p><img src="images/ARĀ­DOUIN.jpg" alt="myself" /></p>

<table border="1">

<thead>

<tr>
<td>Funny</td>
<td>Anger</td>
<td>Hatred</td>

</tr>
</thead>
<tbody>

<tr>
<td>wishing that every moment should stay like that</td>
<td>the worst part we don't like, but have to when it comes</td>
<td>the reverse of love, can't never beautifull</td>

</tr>
</tbody>

 
Reply 7. July 9:45
To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

1 messages from 1 displayed.