Links

Links have a substantial difference when it comes to CSS classes. There are 5 important styling classes that your browser superimposes on just one link. You have to overwrite each of these classes and in a particular order. Don’t stress, we will go through it together.

CSS Link Classes

  • a:link – sets the standard link styling
  • a:visited – sets the styling for a link that has been previously visited
  • a:hover – when a user hovers over a link, this sets that link’s new style
  • a:active – sets style when link is activated (clicked)
  • a:focus – sets style when the link has focus (often neglected)
Example
<style type=”text/css”>
a:link{color:#09F;}
a:visited{color:#999;}
a:hover{color:#CCC;}
a:active{color:#333;}
a:focus{color:#03F;}
</style>

<a href=”#”>blah blah</a>
Result

blah blah

Ack! I hate this overpowering my link’s classes, but I will bear it just for you on this tutorial. You might also be a little bit freaked out by the sudden by the one line per class formatting. I just did the tight formatting to save space (I am a big fan of wide open formatting and indentations). Can we get to talking about the code? Certainly, let’s use my link to see what’s happening.

In its normal state (a:link), we see it shows a color of #09F. Now, as we hover over it the a:hover class imposes a color of #CCC on the link. Next up, left click and hold it down on the link. This makes a:active take control, which tells the link’s color to turn #333. Now, give it a real click and look at it after the click. a:visited took the reins and said make its color property #999. Last, but not least, we have the less common a:focus. To see it in action try using the tab key to get to the link. You might not have known that this existed, but it most certainly does.

References

Lists

HTML lists can be styled with great detail, but we will cover a couple of these properties. This can become extremely complicated if you are attempting have very specific customizations to lists inside lists, which we will not be dealing with in this tutorial. Lists can be customized even more than standard paragraph.

CSS Common List Properties

  • list-style-type – sets the bullet style (roman numerals, numbers, circles, etc)
  • list-style-image: set a custom bullet style using an image

We will be using the first property with an ordered list and the other property with an unordered list.

Example
<style type=”text/css”>
ol.special{list-style-type:upper-roman;}
ul.special{list-style-image:url(/images/smiley4.gif);}
</style>

<ol class=”special”>
<li> test1 </li> 
<li> test2 </li>
</ol>
<ul class=”special”>
<li> test1 </li> 
<li> test2 </li>
</ul>
Result
  1. test 1
  2. test 2
  • test1
  • test2

We assigned both lists to a class called special this time so that I wouldn’t destroy my category lists on your left. Let’s discuss our ordered list first (ol). We changed the list-style-type property to a value of “upper-roman” that gives us the awesome incremental roman numeral effect in the first list.

In the second list, the unordered list (ul), we discover the super fantastic list-style-image property. Obviously, if we are setting an image and not a form of order, this is essentially useless in an ordered list. We create a CSS url reference, url(”) where we put our link inside the single quotations. In my case, I have a crazy smiley face to brighten the day.

Other Usable CSS Properties for lists

As I mentioned above, lists have more styling options than a paragraph. This means they can use everything that paragraphs can. The most common adjust I make to lists, is the to the margin and padding properties. Feel free to tinker with all kinds of properties; don’t limit yourself.

References

Tables

HTML tables by themselves are boring, but not when you add CSS styling to them. We will be focusing on how to use the table selectors and a cool odd and even effect on the table rows to make them more readable. I can’t tell you how many times I go to a website and am sitting there glaring at a table in a fit of anger. Why am I so angry you may ask? Because I keep losing my spot! They didn’t bother to use borders, or distinguish one row from another. Let’s try to be better than that.

CSS Table Selectors

Technically, we will just be dealing the standard HTML tags as selectors with no sub class. Essentially, we have 4 tags to discover and manipulate. Those tags are:

  • table – the whole table
  • tr – the rows in the table
  • th – the table headers
  • td – the table columns

I am going to attempt to knock this out with one single example. I will also show you some neat CSS rules to differentiate one row from its neighbors. Bring out the example, please!

Example
<style type=”text/css”>
.special table{color:#000;}
.special th{color:#FFF;background-color:#090;}
.special tr{width:400px;}
.special td{width:100px;}
.special tr:nth-child(even){background-color#FFF;}
.special tr:nth-child(odd){background-color:#CCC;}
</style>
Result
Heading 1 Heading 2 Heading 3 Heading 4
Row1 Col1 Row1 Col2 Row1 Col3 Row1 Col4
Row2 Col1 Row2 Col2 Row2 Col3 Row2 Col4
Row3 Col1 Row3 Col2 Row3 Col3 Row3 Col4

You might have noticed that I left the HTML code for the table out. That’s simply because it would make them example massive, and I will include it at the bottom. I gave all of the tables a special class so that it won’t affect how to print these pages. With the table CSS selector, we set the all the font in the table to the color #000. Next, we set our table headers (th) selectors apart from the td selectors. This gives us that solid green background and white font color at the top of the table. We only use the tr selector to set the width, which could have actually been done in the table, but I lacked a good example. After that, we set the width of our columns by using the td. Onto the cool alternating background color rows…

Different Style Rows

Fortunately, the w3 guys gave rise to CSS rules for developers to better customize the stylesheets. One of those “rules” is attains a numerical order of the table rows in a table. These implemented in a comparable manner to links by using a colon after the selector. Here, we used nth-child(even) to set all even rows’ background to #FFF. Alternatively, we employed nth-child(odd) to change all odd rows’ background to #CCC. See, that wasn’t too bad. Now as I promised:

Example
<table class=”special” cellpadding="0" cellspacing="0">

<tr>

<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>
</tr>
<tr>

<td>Row1 Col1</td>
<td>Row1 Col2</td>
<td>Row1 Col3</td>
<td>Row1 Col4</td>
</tr>
<tr>

<td>Row2 Col1</td>
<td>Row2 Col2</td>
<td>Row2 Col3</td>
<td>Row2 Col4</td>
</tr>
<tr>

<td>Row3 Col1</td>
<td>Row3 Col2</td>
<td>Row3 Col3</td>
<td>Row3 Col4</td>
</tr>
</table>

References

Border

The CSS property border has done wonders in the field of organization and separation of content. However, I would also argue that overuse of border leads to excessive visual distractions. Enough of my personal vendetta against overcrowding, let’s actually talk about borders. HTML elements are nested inside tags, which means they have implicit borders. We will be making those explicit with the CSS border properties. The properties of borders are very numerous and the majority of these border properties are useful. However, if we can categorize most of them in our minds, we will have a manageable list and idea of how to use borders.

Common CSS Border Properties

  • border-width – sets size of the border’s line width
  • border-color – sets size of the border’s line color
  • border-style – sets the border’s style
  • border-radius – gives the border a rounded line (Not supported in all browsers)

I know, I know. You’re thinking what the is point in telling me something that isn’t supported in all browser, but this one is super awesome and is supported in most current browsers. The border-radius breaks the mold of boring borders and in CSS3 they even have cool shadow effects! The others are pretty self-explanatory. Let’s code them up.

Example
<style type="text/css">
    div.special
    {
        width:150px;
        text-align:center;
        border-width:medium;
        border-color:#009;
        border-style:outset;
        border-radius:5px;
    }
</style>
<div class="special">
    Sample Content
</div>
Result
Sample Content

Boom! Now, we have an awesome looking border. We set the width and text alignment of the class really quick, but then we got into border properties. The border-width is somewhat tricky. I set it to medium just so you would scratch your head. It can actually be set to real quantifiable measures like 5px. It’s always good to know you can use the thin, medium, and thick though. Next, border-color doesn’t really elicit an explanation, but border-style certainly does. We have it set to outset here, which happened to be my favorite before CSS3 shadows. It can apply a few different styles like dashed, solid, outset, inset, etc. Finally, border-radius takes a measurement to determine how much to bend at each corner.

Border Sides

Now, I have withheld important information from you. Quite often, you might only want a border on the bottom, only on two sides, etc., this is very simple to do. The browser reads your CSS and assumes you want every side to display. In all actuality, we can just tell the sides not to show.

Example
<style type="text/css">
    div.special2
    {
        width:150px;
        text-align:center;
        border-style:solid;
        border-right:none;
        border-left:none;
        border-top:none;
    }
</style>
<div class="special2">
    Sample Content
</div>
Result
Sample Content

The bottom part of the border is only show because the rest were deliberately told not to display. If we wanted to completely make it disappear, which we don’t because that would be stupid, we would also have put border-bottom:none;. That would have given us an invisible border. You can also use border-bottom-style:none to do everything we just did with one line. All of the previous properties mention can be implemented just by typing border- plus the side top- for example plus the actual property color.

References

Margin and Padding

The CSS properties, margin and padding, are both aspects of spacing of an element and it’s content. Margin is the outside spacing of an HTML element from other elements. Padding is the spacing of the inside content from the perimeters of the element. Both are very commonly used and each one can be expressed collectively in terms of the sides of an HTML element. However, they can also be used to define the spacing of only one side. Also, both of these properties have a shorthand for defining the spacing of each side.

CSS Margin Property

As mentioned, the margin property gives an invisible border around an element. This property is very useful because it can prevent overcrowding. Time for an example.

Example
<style type="text/css">
    div.special
    {

width:200px; border-style: solid; border-width:thin; border-color:#000; margin:30px 20px 10px 25px; } </style> <div class=”special”> Sample Text </div>

Result
Sample Text

I have already set the width property and given it a border so that you can better understand this illustration. All right, so what’s with the 4 measurements? The margin property when defined in shorthand is top right bottom left. So, top is 30px, right is 20px, bottom is 10px, and left is 25px.

CSS Padding Property

Example
<style type="text/css">
    div.special2
    {
        width:200px;
        border-style: solid;
        border-width:thin;
        border-color:#000;
        padding:30px 20px 10px 25px;
    }
</style>
<div class="special2">
    Sample Text
</div>
Result
Sample Text

Now, we see the difference between margin and padding. Obviously, our div was bigger in the padding example. This is because the CSS property padding creates spacing between the div element and its contents. Clearly, this makes the div larger because of the extra internal spacing.

References