CSS Advanced

Today we’re going to create a top navigation menu and side menu in CSS. This is like any website menu that we would see on most websites.

Inline Menu

This is an example of a website menu:

We can see that the menu is entirely inline and is actually really just an unordered list. Consider the following code:

#menu {
     background-color:#4c4c4c;
     height:30px;
     font-size:30px;
     font-weight:700;
     padding:5px 0px;
}
#menu ul {list-style:none;}
#menu li {
     display:inline;
     padding:0px 10px;
}

<div id="menu">
     <ul>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
     </ul>
</div>

The CSS is setting the styles for the navigation menu… We have our ID selector #menu that is creating a background of #4c4c4c (grey), a height of 30px, a font size of 30px, a font weight of 700 (in other words, bold), and a padding of 5px that applies to the top and bottom ONLY.

#menu ul is basically saying that all <ul> elements inside of the ID #menu will have a list-style of none.

#menu li is saying that all <li> elements within the ID #menu will be displayed as inline elements (no breaks before or after the element, refer to the Display Property for more information) and will apply a 10px padding to the left and right sides ONLY.

Vertical Menu

A vertical menu is a menu that is, well, vertical.

Side Menus are easier to make than inline menus. Consider the following code:

#side-nav {
     background-color:#4c4c4c;
     display:block;
     width:150px;
}
#side-nav ul {
     list-style-image:url("images/bullet.png");
     margin:10px;
}
#side-nav li {
     padding:5px 0px;
     border-bottom:1px solid #3b3b3b;
}
#side-nav.no-border {border:none;}

<div id="side-nav">
     <ul>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li class="no-border"><a href="url">Link</a></li>
     </ul>
</div>

So we have our ID selector side-nav that is creating the background color of #4c4c4c (grey), displaying the selector as a block element and a width of 150px. Note: since only the width is defined, we can have an unlimited height.

Next, we have our selector that is saying that all <ul> elements within the side-nav selector will have a list style image of “bullet.png” and will have a 10px margin around all sides.

Finally, we have our selector that is saying all <li> elements within the side-nav selector will have a top and bottom padding of 5px ONLY and a bottom border that is 1px wide, solid, and the color #3b3b3b. There is something interesting, however; there is an additional selector defined that states a border is none which we used on the last <li> element of our vertical menu. This will make the menu look better, or at least more symmetrical.

I recommend you downloading Menu.zip (4.46KB) to see these menus in action!

Pseudo-elements are used to add special effects to some html elements.

Pseudo-elements are very much like pseudo-classes. The syntax for pseudo-elements is like pseudo-classes:

selector:pseudo-element {property:value;}

We can also use class selectors with our pseudo-elements:

selector.class:pseudo-element {property:value;}

Pseudo-elements

Since pseudo-elements exist to give some html elements some flair, we have a few special pseudo-elements that we need to be familiar with.

:first-line

As the name implies, this pseudo-element adds special styles to the first line of text. We can only use this pseudo-element with block-level elements (see Display Property for more details).

p:first-line {
     color:#ff9300;
     font-style:italic;
}

The above code would make the first line of text color turn to atomicpages orange and then change the first line of text to be italic. There are, however, certain properties that are not allowed when using the :first-line property. We can use the following:

1. all font properties
2. color
3. all background properties
4. text-decoration
5. clear
6. text-transform
7. letter-spacing
8. word-spacing
9. vertical-align
10. line-height

These are the only properties that are valid to use with the :first-line pseudo-element!

:first-letter

This pseudo-element applies unique styles to the first letter of text. Consider the following code:

p.a:first-letter {
     background:#fff url("images/fancy_a.gif") no-repeat;
     border:1px solid #ff9300;
     margin-left:25px;
}

This will load the first image of all p elements with the class “a” so:

<p class="a">very fancy image at the beginning of this makes this
sentence seem much more grandiloquent that it really is!</p>

This fancy_a.gif will also have a border of 1px which is solid and atomicpages orange and will have a left margin of 25px.

Like the :first-line pseudo-element, there are restrictions on which properties can be used with this pseudo-element.

1. all font properties
2. color
3. all background properties
4. text-decoration
5. clear
6. text-transform
7. letter-spacing
8. word-spacing
9. vertical-align
10. line-height
11. margin properties
12. padding properties
13. float

:before

This pseudo-element is used to insert content before and element is rendered by the browser. Consider the following code:

span:before {background:#fff url("images/fancy_a.gif") no-repeat;}

This is saying that before every span element there will be that fancy “A” that we define earlier in this tutorial.

:after

This pseudo-element is used to insert content after and element is rendered by the browser. Consider the following code:

h4:after {background:#fff url("images/fancy_b.gif") no-repeat;}

This is saying that after every h4 element there will be that fancy “B”.

Now what does that accomplish? Nothing very significant in this case but you can download pseudo-elements.zip (7.76 KB) to see these pseudo-elements in action!

Pseudo-classes are little snippets of code that will add additional effects to some selectors.

Pseudo-classes

The syntax for Pseudo-classes is very much like the syntax for css:

selector {property:value;} /*CSS Syntax*/
selector:pseudo-class { /*Pseudo-class Syntax*/
     property:value;
     property:value;
}

:link, :visited, :active, :hover

A very widely used example of Pseudo-classes is adding styles to links. Consider the following:

a:link, a:visited {
     text-decoration:underline;
     color:#ff9300;
}
a:hover {
     text-decoration:none;
     color:#ff9300;
}

These are called “global link styles”, these are styles that will apply to any and all links on a page where this code is. We have our pseudo-classes a:link, a:visited, a:hover and each is doing something different.

1. a:link

a:link sets the styles for an unvisited link:

a:link {
     color:red;
     font-weight:bold;
}

2. a:visited

a:visited sets the styles for a visited link:

a:visited {
     color:blue;
     font-weight:bold;
}

3. a:hover

a:hover sets the styles for links that you mouse over:

a:hover {
     color:aqua;
     font-weight:bold;
     text-decoration:unerline;
}

4. a:active

This sets the styles for a link that is currently active:

a:active {
     color:coral;
     font-weight:bold;
     text-decoration:unerline;
}

Order

Order is key when using these particular pseudo-classes. When you write these styles you must follow the correct order to make it all work.

a:link { /*This must be first*/
     color:red;
     font-weight:bold;
}
a:visited {  /*This must be second*/
     color:coral;
     font-weight:bold;
}
a:hover {  /*This must be third*/
     text-decoration:unerline;
     color:blue;
     font-weight:bold;
}
a:active { /*This must be last*/
     color:green;
     font-weight:bold;
}

We can also group the pseudo-classes together like this:

a:link, a:visited {
     text-decoraton:none;
     color:#ff9300;
}
a:hover, a:active {
     text-decoration:unerline;
     color:coral;
}

Like other CSS selectors, we can add a class selector to the Pseudo-classes, this would enable us to apply these styles any where on our web page if we desired it to be so.

selector.class:pseudo-class {
     property:value;
     property:value;
}
a.fancy:link, a.fancy:visited {
     text-decoration:underline;
     color:#ff9300;
}

This class fancy will make a link and you visit that link that we create, it will be underlined and be that atomicpages orange color.

:first-child

The first-child pseudo-class is as it sounds. This will apply any styles that you define to the first-child element of a parent element. Consider the following code:

body {
     margin:auto;
     width:1000px;
     background-color:#4c4c4c;
     font:normal 11px Verdana, "Times New Roman", sans serif;
     color:#fff;
}
p:first-child {
     color:blue;
     text-decoration:underline;
     font-weight:700;
}

We can use the first-child pseudo-class in some very helpful ways too! If, for instance, you wanted to apply a style that would make the first paragraph unique, we could use the first-child pseudo-class to achieve this goal. Consider the following:

.fancy p:first-child {
     color:red;
     font-style:italic;
}

This would set the first paragraph of the class “fancy” to be red and italic and all subsequent paragraphs to be whatever we set the styles to.

If you want to see pseudo classes in action feel free to check out pseudo-casses.zip (1.88KB) and see these examples in action!

In this tutorial we’re going to talk about the float property. For this tutorial you will need to be familiar with the Basics of CSS and you should be familiar with the Advanced CSS tutorials until this point.

Float Property

The float property allows for an element to be pushed to the left or the right so other elements can wrap around it. Floated elements can only be moves horizontally (left or right). All floated elements will move as far right or as far left as it possibly can; this is dependent upon the nature of the container that the element is in.

Values

1. left – floats element to the left
2. right – floats element to the right
3. none – specifies no floating

Consider the following code:

body {
     margin:auto;
     width:1000px;
     background-color:#4c4c4c;
     font:verdana, "Times New Roman", san-serif;
     font-size:11px;
     color:#fff;
}
#container {
     width:300px;
     background:transparent url('image/img.jpg') repeat-x;
     min-height:125px;
     float:right;
}

We have made the body element have a width of 1000px (the rest of the styles are irrelevant) and then we defined an ID selector that has a width of 300px and a min-height of 125px (it has to be at least 125px tall) and this element will be pushed to the edge of the right side of the container.

Since floated elements allow other elements to wrap around the floated element. All elements before the float property will not be affected, however, all element thereafter the float property will be affected. Consider the following code:

body { /*...*/ }
#container {
     width:300px;
     background:transparent url('image/img.jpg') repeat-x;
     min-height:125px;
     float:right;
}
.float-right {float:right;}

<html>
<body>
<div id="container">
     <p>This element will be on the right edge of the page that is
1000px across.</p>
</div>
<p>This is some text</p>
<img src="image/img.gif" height="100" width="100" alt="img"
class="float-right" />
<p>This is some text</p>
</body>
</html>

This example would allow for the text to wrap around “img.gif” no matter what size the image is (in the case of the example it is 100px by 100px).

Floating Elements

As we mentioned before, floating an element will push the element to the right or left side of the container if possible. Consider the following code:

.fancy {
     width:500px;
     float:left;
}

<h2>Title here</h2>
<div class="fancy">
<img src="img.gif" height="64" width="64" alt="img" />
<p>Description here</p>
</div>

This will put the image inside of an area of 500 px wide and infinitely tall (depending the amount of content in that class selector).

Clear Property

How do we “turn off” floated elements? The clear property specifies which sides of a floated element you want to keep clear of other floating elements.

Values

1. left – clears the left side of the element
2. right – clears the right side of the element
3. both – clears both the left and right side of the element
4. none – does not clear either side of the element

Consider the following code:

<html>
<head>
<style type="text/css">
.clearfix {clear:both;}
.fancy {
     width:500px;
     float:left;
     margin5px;
}
</style>
</head>
<body>
<div class="fancy">
<h2>Fancy Pictures</h2>
<img src="img.gif" height="64" width="64" alt="img" />
<img src="img2.gif" height="64" width="64" alt="img" />
<img src="img3.gif" height="64" width="64" alt="img" />
<img src="img4.gif" height="64" width="64" alt="img" />
<img src="img5.gif" height="64" width="64" alt="img" />
<p class="clearfix">Some explanatory text here</p>
<img src="img6.gif" height="64" width="64" alt="img" />
<img src="img7.gif" height="64" width="64" alt="img" />
</div>
</body>
</html>

In the code above, you would have all of the styles we defined in the fancy class and then a break of text where no floated element is allowed (neither left or right). This will clear a space for the explanatory text where no floated element will exist. This can be useful for adding more titles or text to the “fancy” class we created.

It is recommended that you download the float.zip (41.4KB) to see this property in action!

Today we’re going to talk about advanced positioning techniques. This is a widely used property in CSS and it very useful! Positioning allows you to position an element, place one element behind another, and determine what happens when an element is too big.

The position of an element is controlled by top, right, bottom, and left properties. The stacking order of these elements is called the z-index property.

Position

As mentioned above, the position property allows us to specifically position an element on a web page, place one element behind or above another, and to determine what happens when an element is too big.

Properties to Know

1. position
• top
• right
• bottom
• left

Note: the top, right, bottom, and left properties will NOT work unless a position property is defined first!

Values

1. static
2. fixed
3. absolute
4. relative

Static

All elements are positioned static by default. These are positioned by the normal flow of the web page and it is NOT changed by using the top, right, bottom, or left properties.

p.static {
     position:static;
     top:30px; /*This will not work*/
     right:25px; /*This will not work*/
}

Fixed

A fixed position is relative to the browser window. Its place is literally locked in place and if you scroll, the element will remain exactly where it is.

p.fixed {
     position:fixed;
     top:30px;
     right:25px;
}

The above code will place the element 30 px from the top of the browser window and 25 px to the right of the browser window while the position of the element is fixed. This means you can scroll the browser window and the element will literally be fixed on the page (it will not move). No matter where you are on the page, the element will always be visible.

If you use this fixed property, all other elements on the page will not know that it exists. The fixed element is removed from the normal flow of the web page so it does not impact any other elements. This also means that the fixed elements can overlap any other elements on the page.

Relative

A relative positioned element is relative to its “normal position” on the page. The relative positioned elements can be moved to overlap other elements; however, it is different in that the space for the normal flow of the page, is preserved. Even if two elements are over lapping the space for the elements is still preserved.

p.relative {
     position:relative;
     top:-50px;
     right:10px;
}

Note: this will be made clearer via example in a small downloadable zip archive at the end of this tutorial. I strongly recommend downloading this tutorial!!

Absolute

Elements that are absolutely positioned are removed from the normal flow of the web page. Like the fixed value, all other elements on the web page don’t know this element exists. This means elements can easily overlap one another.

p.absolute {
     position:absolute;
     top:50px;
     left:350px;
}

This element would be positioned in accordance to the html element of the web page. This would be exactly 50px from the top of the web page and 350px to the left of the web page as well.

If you wish to see these examples in action and read more about this material please download position.zip(57.0 KB)

Today we’re going to talk about the display and visibility properties of CSS. This is the second advanced tutorial and is intended for those of us that already understand the Basics of CSS.

Visibility

The Visibility of an element can be adjusted by using this visibility property. Let us say that we want to make a certain element invisible on a web page or that we want a certain to definitely be visible, we would use this visibility property.

Values

We can have three possible values for this visibility property.

1. hidden – hides the element (these elements still take up space)
2. visible – makes the element visible (default)
3. collapse – this removes a table row or table column without affecting the table layout. If this is used on non-table elements they will render as “hidden”.

Note: no version of IE 8 or less supports the collapse value for this property. Consider the following code:

.hidden {visibility:hidden;}

This class would make the element “hidden” but the space for it would still exist, but it would show nothing. This might be a little confusing at first, however, it is very easy! This is some visible text that we can see. This is some invisible text that we cannot see but still takes up space inside of the element. This is more text that we will write for the sake of this example. The more and more we write we see that there is this void in this paragraph and it feels as if something is missing, doesn’t it? You can actually look in the source code of this page and you will see this:

<span style="visibility:hidden;">This is some invisible text that
we cannot see but still takes up space inside
of the element.</span>

This was the code that was actually used to achieve this effect. We can see that that visibility property makes the desired element invisible (hidden) but it still takes up space.

We won’t go into great detail about the collapse property and the visible value is default so this is not needed in order for an element to show. For example:

p.fancy {
     color:#ff9300;
     text-decoration:underline;
     font-size:x-small;
     visibility:visible; /*This is default, therefore not needed*/
}

Display

The display property defines how an element is displayed on the web page. The display property is very useful and particularly powerful. If you’ve ever wondered how to make those fancy top navigation menus like on this blog, we would use a certain value for the display property.

Values

1. none – hides element completely (no box)
2. block – creates a box (line breaks above and below)
3. inline – creates inline element (no line breaks at all)
4. inline-block – creates block but it is laid out as an inline box
5. compact – basically this box will nest against another box is there is enough space
6. inline-table – element will create a box with no breaks before or after the <table>
7. list-item – creates list (like a ul) in a block but the li are inline elements
8. run-in – your browser will create a block or inline box depending on how it is used ¹
9. table – this will behave like a table (a CSS alternative to th, td, and tr elements!)
10. table-caption – behaves like a table caption
11. table-header-group – behaves like a table header group
12. table-row – behaves like a table row
13. table-row-group – behaves like a table row group
14. table-cell – behaves like a table cell
15. table-column – behaves like a table column
16. table-column-group – behaves like table column (like <colgroup>)
17. table-footer – behaves like a table footer
18. table-footer-group – behaves like a footer row group

As we can see there are many many values we can have for the display property and each does something unique. These will take time to explain so I highly recommend you download display.zip (67.9KB)
or you check out Quirksmode for a very comprehensive overview of the display property.

1. This is only supported in the latest version of IE and Opera 9.2 and Opera 10. All otehr browsers don’t necessarily support this value. You can read all about the run-in value from W3C if you want to learn more about it.

Now that we have all of the Basics of CSS down pat, we can move onto more advanced methods of writing and implementing style sheets!

Today we’re going to talk about grouping and nesting selectors and dimensions.

Grouping and Nesting

You might find yourself with selectors having the same values inside of your internal or external style sheet. Maybe it is about a specific link within a certain area of your web site, heading elements, or just about anything else you would want to group.

Grouping

Grouping allows us to apply multiple properties and values to multiple selectors but in a condensed fashion.

Let us assume we have some code:

h1 {color:#ff9300;}
h3 {color:#ff9300;}
span {color:#ff9300;}
p {color:#ff9300;}

So we have everything within the h1, h3, span, and p elements is the color #ff9300. Since all of these elements have a common property we can group these elements like this:

h1, h3, span, p {color:#ff9300;}

This space saver will have the same effect but on multiple selectors. The single color property will be applied to all of these html elements. Note: grouping elements will apply all properties and values to the grouped elements. Example:

html, body, p, span, a:link, {
     margin: 0;
     padding: 0;
     font:verdana, "Times New Roman", sans serif;
     color:#ff9300;
}

This means margin:0; padding:0; font:verdana, “Times New Roman”, sans serif; and color#ff9300; will be applied to all of those selectors.

Nesting

Nesting will allow you to apply styles to a selector within a selector. Consider the following:

#fancy p {
     background-color:#000;
     font-weight:700;
     text-decoration:none;
     color:#ff9300;
}

So we have our ID selector with an additional selector after it. So if we have something with the ID selector such as:

<div id="fancy">
     <p>Some fancy text here</p>
</div>

It is saying everything within the fancy ID that is inside of any p element will have all of those properties and values. We have used this type of nesting in previous CSS tutorials.

Dimensions

We covered the width and height properties in the box model tutorial. We going to introduce a few new properties that we can use to further control how tall/wide an element is.

The Height property will set the height of the element and the Width property will set the width of the element. Consider the following code:

h2, h3 {
     height:100px;
     width:300px;
}

This will set all h2 and/or h3 elements to w height of 100px by 300px regardless of how much space it is taking up on the page. These two elements will always be this height. What if we wanted those two elements to be within a certain area of space?

Properties

1. width – defines width (will always be)
2. height – defines height (will always be)
3. max-width – defines max width (cannot be bigger than)
4. min-width – defines min width (will not be smaller than)
5. max-height – defines max height (cannot be taller than)
6. min-height – defines min height (will not be shorter than)

The last four properties are new to us. So let us improve on the previous code!

h2, h3 {
     max-height:100px;
     max-width:300px;
}

Given the code above, this will set the h2 and h3 elements to be no larger than 100px by 300px but can also be 0px by 0px if the element is empty (has no content).

Although it seems like this property would be somewhat useless, there has been situation where something a web page wasn’t working the way I wanted it to. Perhaps the top navigation menu was wrapping when I resized the browser windows and I wanted the entire page to keep its consistency. I would use a max-width and min-width property to define the space, lo and behold it worked!

For a very comprehensive overview of the above tutorial, please download advanced-part1.zip (66.7KB)