CSS Tutorial part 3

CSS Links

CSS can be used to add fancy effects to your links, change hover colors and styles, and more.

Since the HTML element for links uses the <a> tag, we can likewise use “a” as the selector in our CSS code:

a {
color:#0000ff;
}

However, we know links can have multiple states. For example, when you highlight your mouse over the link, it can look different. If you’ve visited a link, it can also look different. How can we address these differences?

CSS has built-in “pseudo-classes” which allow us to handle the various states of a link. A pseudo-class looks like this:

a:visited {
color:#0000ff;
}

There are four link states: link, active, visited, and hover. The “link” state is reserved for links the user has not visited. The “active” state is what happens when a link is clicked on. The “visited” state is when a user has already viewed the page the link leads to before. The “hover” state is what happens when you put your mouse over the link but do not click it. We can apply all the states using pseudo-classes like below:

a:link {
color:#0000ff;
}
a:active {
color:#ff0000;
}
a:visited {
color:#000000;
}
a:hover {
color:#0000ff;
text-decoration:underline;
}

By default, links are underlined. If you wish to remove the underline from a link, use this code:

text-decoration: none;

Remember usability though! Users are accustomed to recognizing that links should be underlined.

CSS Borders

Borders can be used for decoration or to separate sections of your page.

Border Size

To set the size of our border, we use the border-width property:

p {
border-width:2px;
}

Don’t try this code just yet! In order to set a border, you must set both the size and the style of the border. We’ll get to that soon enough!

Border Colors

Border colors can be any hexadecimal value or color:

p {
border-color:red;
}

Border Style

There are several different border styles. Let’s first go over how to set our border style:

p {
border-style:dotted;
}

Now we are ready to start playing with the borders. Here is an example of all the different border styles you can use:

Solid

Dotted

Dashed

Double

Groove

Ridge

Inset

Outset

We can also compact our code on to one line only:

p {
border:2px dotted blue;
}

Play around with the borders and see what you like!

CSS Widths and Heights

Widths and heights in CSS are useful to setup the dimensions of our HTML elements.

There are two types of widths and heights: absolute and relative. Absolute dimensions will stay the same regardless of the browser or screen size of the user’s computer. Relative sizes will change depending on the browser and screen size.

Absolute sizes are usually expressed in pixels:

div {
width:100px;
height:200px;
}

Relative dimensions are expressed in percentage terms:

div {
width:100%;
height:50%;
}

Be sure to test out your web page on various screen and browser sizes to make sure everything looks right!

CSS Margins and Padding

“Margins” are how much an element is spaced away from its neighboring elements. “Padding” is how much distance elements or text inside the element with padding are spaced inside the element.

Think of “margins” as on the spacing on the outside; whereas, “padding” is the spacing on the inside.

Padding

Here’s what padding looks like:

Notice how my text has been pushed inside more. This box has a 10 pixel padding.

Now if we used less padding, the text would be pushed “in” less:

Notice how my text has been pushed inside less. This box has a 2 pixel padding.

Let’s take a look at the code to use for padding:

p {
padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;

We can pad each side of the element by a different number of pixels.

The above code can be compressed to one line:

p {
padding: 10px 20px 30px 40px;
}

In the above code, each side is padded in this order: top, right, bottom, left (clockwise). Each side is separated by spaces.

If we want all sides to use equal padding:

p {
padding: 10px;
}

Margins

The code for margins is very similar to the code for padding:

p {
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}

Again, we can compact this code as follows:

p {
margin: 10px 20px 30px 40px;
}

As with the padding order, each margin is spaced in this order: top, right, bottom, left (clockwise). Each side is separated by spaces.

Just as with the padding, if we want to space all sides equally, we can do it as follows:

p {
margin: 10px;
}

The above code will space the margins on every side by 10 pixels.

Markus

View more posts from this author