Author

TheDesignJunkie.com is the blog of Cole Hicks. Cole is a web designer, consultant, and computer book author covering topics related to graphic design, the web, and web 2.0 technology.

Weekly newsletter packed full of the latest web design tips, tutorials. It's free to subscribe and you can opt-out at any time.

RSS Feeds

Login

CSS Tutorial Intro| What is CSS?

2 April 2008 - 21:42

Before we can understand what CSS is, you’ll first need to understand what HTML is. HTML is essentially the code used to give a web page it’s basic structure. HTML stands for Hyper Text Markup Language and it is written in the form of tags. These tags make up the structural elements of a page. According to wikipedia:

Elements are the basic structure for HTML markup. Elements have two basic properties: attributes and content. Each attribute and each element's content has certain restrictions that must be followed for an HTML document to be considered valid. An element usually has a start tag (e.g. <element-name>) and an end tag (e.g. </element-name>). The element's attributes are contained in the start tag and content is located between the tags (e.g. <element-name attribute="value">Content</element-name>). Some elements, such as , do not have any content and must not have a closing tag.

I assume that if you are looking at a CSS tutorial, you probably have an idea of what HTML is. However, if you are just trying to get a feel for things because you maybe said something like “yeah, I’m familiar with CSS” in a job interview then this is a good place to get a basic understanding.

Anyway… back to HTML for a quick second. So, HTML is made up of tags that create the basic page structure. It is separate from design. For example, a basic HTML page would that look something like this:

<html>
<body> My HTML Page
</body> </html>

Everything in between the body tag would show up in a web browser. In essence, HTML is the building block of the page and in order to learn CSS you need to know HTML first.

If you want to get a more detailed description you should check out Wikipedia’s entry on HTML:
http://en.wikipedia.org/wiki/HTML

Now that we’ve got that out of the way we can talk about CSS, or in other words – Cascading Style Sheets.

So, what is CSS?

CSS stands for Cascading Style Sheets. A style sheet is simply a text file with some rules that define how the elements of a page will be styled and what the layout will look like. For example, you can style text by assigning fonts, determining line spacing, and justification. You can style images by giving them boarders and padding, setting the size and providing them with mouse over effects, and you can control the layout of a page by positioning elements on the page.

Before CSS nearly all of the presentation for web pages was housed within HTML markup. This created all sorts of problems for folks. For example many people chose to use “font tags” to specify which fonts they wanted to use across their site. They would place these tags in each page and as the site grew and became outdated they soon realized they wanted to update their site. This created a problem because simply updating a the font across the site became a very big task. CSS solved this by allowing a single “style rule” to control the font across the entire site.

The concept to grasp is the CSS controls page appearance, while (x)HTML controls the basic structure. When creating websites you always want to separate form from content or in other words, separate the appearance from the structure. In the coming tutorials I’ll take you through the basics of the language, help you to learn how to construct CSS rules and by the end you’ll be well on your way to designing beautiful websites.

No Comments | Tags: CSS

CSS Tutorial #1 | Constructing a Style Rule

2 April 2008 - 21:42

The power of CSS comes from the ability to define rules for elements on the page. For example if you have a paragraph element like this:

Paragraph Element

You will construct a rule that tells it what to look like on the page. A rule is made up of two main parts. The selector and the declaration. The selector determines which elements are effected, and the declaration says what is going to happen.

For the above example lets imagine we wanted to make the paragraph blue. To do so, we could construct a rule like this:

P { color: blue;}

In this case the selector is “P”. The declaration is held inside the curly brackets and consists of the property/value pair “color:blue”. It is important to note that the property/value pair ends in a semicolon. This allows you to place multiple property/value pairs inside a declaration. So for example, you could also give the paragraph a border:

P { color: blue; border: 1px; }

And if you wanted to get really fancy you could also give it a background color. How about red:

P { color: blue; border: 1px; background: red; }

Looking at this in a browser we get something really ugly

When creatign style rules you need to always remember the semicolon between the property/value pairs, however just like with HTML you can be very relaxed when it comes to how you write the rules. For example this code:

p {color: blue;}

Works the same as this code:

p { color: blue; }

You can add spacing and returns to format your code and make it readable.

And that is it for tutorial 1. You now know how to construct a style rule.

- Cole

No Comments | Tags: CSS

CSS Tutorial | The Three Column Layout With Flexible Width

1 April 2008 - 23:56

For designers the three column layout is one of the most complicated, yet most requested designs. It generally consists of a header, a left side bar, a content column, a right sidebar, and a footer. The key to understanding how to create this layout is in understanding how to design with floats. This tutorial won’t go into every concept, but if you follow along you will get an understanding for how to create a simple three column, flexible layout using floats.

For those of you who simply want to download the complete files. You can get them here:
Flexible, Three Column Layout Template HTML
Flexible, Three Column Layout Template CSS

To get started building we’ll first build the basic HTML page.
<html> <head>


<title>Three Column Layout</title>
</head>
<body>

</body> </html>

So far, this is just like any other HTML page. It has a head element with a title, and a body. Next we’ll want to link this page to a style sheet. We’ve called our style sheet style_sheet.css. To link to the style sheet we use the link tag:

<link href="style_sheet.css" rel="stylesheet" type="text/css" />

Notice that the link tag targets the style sheet (style_sheet.css). The “rel” attribute defines the file as a style sheet, and the “type” attribute has a value of “text/css”.

We place the complete tag in our HTML page just under the title tag in the head of the document.

<html> <head>
<title>Three Column Layout</title> <link href="style_sheet.css" rel="stylesheet" type="text/css" /> </head> <body>
</body> </html>

Next we’ll add some div tags to give the page structure. Working like divs is like working within little boxes. Some boxes contain content and some simply contain more divs. Essentially the goal is to use CSS to organize the boxes on the page in a way that helps you achieve the layout you would like. To get started well need to first create the boxes we’ll use to organize the page. These boxes including a container, which houses the page, then a header, then a main content wrapper, then the content, the left sidebar, and the right sidebar, and finally the footer.

The code looks something like this:

<html>
<head>

<title>Three Column Layout</title>

<link href="style_sheet.css" rel="stylesheet" type="text/css" />

</head>

<body>


<div id="container">

     <div id="header">
	<h1>The Header</h1>
     </div>

     <div id="wrapper">

		<div id="content">
		<h3>Your Content</h3>
           	<p>this is your paragraph content</p>
           	<p>this is your paragraph content</p>
        	</div>

        	<div id="left-sidebar">
          	<h3>Sidebar Nav</h3>
	  	<ul>
		<li>nav link 1</li>
              	<li>nav link 2</li>
              	<li>nav link 3</li>
		</ul>
        	</div>
      </div>

		<div id="right-sidebar">
      		<h3>right sidebar</h3>
	  	     <ul><li>nav link 1</li>
              	           <li>nav link 2</li>
              	           <li>nav link 3</li>
           	                 </ul>
      		</div>


<div id="footer">
    <h3>Footer</h3>
</div>

</div>
</body>
</html>

Now that we have the divs in place lets take a look at what we want to do with our CSS. The following diagram is an illustration of how each div will fit together on the page and also which way we need to tell the content to float.

Looking back at the HTML you’ll notice that each div has an ID that pertains to the boxes on the illustration. These IDs are essential to the identification of each div with our CSS. What we’ll do next is create our style sheet and write a style rule for each of the IDs, floating the content right and left, assigning widths and even background color.

First lets create the style sheet. Open a plain text editor and save the file as “style_sheet.css”. Looking at the code you’ll notice that this is the name of the file you linked to in your HTML. Now, lets create our first rule.

body {
       font: .8em verdana, arial, sans-serif;
        }

So far so good. What we’ve done here is set a default page font. It is made up of the “body” selector, and the font property/value pair. Next we’ll add styles for container.

#container {
	min-width: 660px;
	max-width: 880px;
         }

For this code, we set a min-width of 660px and a max width of 880px. Next we’ll want to style the header.

#header {
	background: #cff;
	}

Since I want you to be able to see the header and know where to put any additional property/value pairs I added a background color.

Next we’ll style the wrapper. If you look at the diagram above you’ll notice that it floats left, and to get it to fit in the appropriate space we’ll make it 70% of the total width. That will make some room for the third column. The code looks like this:

#wrapper {
	float: left;
	width:70%;
	}

Next we style the main content. We want it to float to the right, and have a width of 60% of the wrapper div. Remember, this div takes it’s width from the total available width of the wrapper container, which is 70% of the page container. So the code looks like this:

#content {
	float: right;
	width: 60%;
	}

Next let’s add code for the left and right side bars. We’ll go ahead and give them a background color as well.

#left-sidebar {
	float: left;
	width: 30%;
	background:#f90;
	}

#right-sidebar {
	float: right;
	width: 30%;
	background:#c00;
	}

You’ll notice that the left sidebar floats left and the right sidebar floats right. The last bit of code we need to add is for the footer.

#footer {
	clear:both;
	Background: #cff;
	}

Notice that the footer has one additional property/vlaue pair. That is the “clear” property. What this does is ensure that the footer doesn’t bounce up and down above any of the divs before it in the HTML code.

Finally, when you put all the code together you get this:

#left-sidebar {
	float: left;
	width: 30%;
	background:#f90;
	}

#right-sidebar {
	float: right;
	width: 30%;
	background:#c00;
	}

You’ll notice that the left sidebar floats left and the right sidebar floats right. The last bit of code we need to add is for the footer.



body {
	font: .8em verdana, arial, sans-serif;
     }

#container {
	min-width: 660px;
	max-width: 880px;

         }

#header {
	Background: #cff;
	}

#wrapper {
	float: left;
	width:70%;
	}

#content {
	float: right;
	width: 60%;
	}

#left-sidebar {
	float: left;
	width: 30%;
	background:#f90;
	}

#right-sidebar {
	float: right;
	width: 30%;
	background:#c00;
	}

#footer {
	clear:both;
	Background: #cff;
	}

Feel free to copy and paste the HTML and CSS for your own stuff.

Enjoy!

Cole

8 Comments | Tags: CSS

CSS Tutorial 1 | What is CSS and How Does it Work?

15 November 2007 - 23:12

CSS (Cascading Style Sheets) is a way to style HTML content. CSS provides a method for separating the content of a web page from the instructions used to determine layout and design. When creating websites, as a rule of thumb, you want to separate the content from the design of the site so that as you make changes to the site over time you are able to effectively apply those changes across the site with minimal effort.

For example, if you have a 300 page website and decide you want to change the font color on the site it could be either a simple change or a change that could take all day depending on whether or not you implemented a cascading style sheet. If you did implement a cascading style sheet you would simply need to change a line of code. If you didn’t you would need to go in and change the font tag across 300 pages.

So how does CSS work?

As you know, HTML tags have elements, attributes, and values. So an HTML page with simple paragraph might look something like this:

<html>
<head>
</head>
<body>

<p class="CSS_01" >A tutorial on CSS (cascading style sheets)</p>

</body>
</html>

In this example you have a paragraph element with an “class” attribute. That attribute has a value of “CSS_01″. Assigning a “class” attribute is like giving the paragraph a name. As we create our CSS we will be able to refer to the “class” and provide instructions for how to style elements with class value of “CSS_01″. As I stated earlier, style instructions should be kept separate from page content. In order to do that we need to create a style sheet as a separate file from our HTML page. To do this, open a new file in a plain text editor and save it as css_01_sheet.css. You’ll also want to create and save your HTML file if you haven’t done so already. Save them in the same folder on your desktop or wherever you like.

CSS code is similar to HTML in that it is plain text. There is nothing fancy about it and with any text editor you can read it. It is important to note that when you create a style sheet you need to save it with the extension .css rather than .txt.

Now that you have created a blank cascading style sheet the first thing to do is link the style sheet to the html page. To do this we add a line of code to our HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="css_01_sheet.css" />
</head>
<body>
<p class="CSS_01">A tutorial on CSS (cascading style sheets)</p>
</body>
</html>

The line that we have added is a “link” element. The link element is what we use to link the CSS style sheet to the html page. What it does is say to the browser “hey, there is a style sheet for this page in this location that you need to look at”. The “rel” attribute tells the browser what it is. The “type” attribute tells the browser how the code is going to be written. In this case text/css. And the “href” attribute tells the browser were to look. Since we placed the files in the same directory all we need is the file name.

Next we need to create a style rule in our CSS style sheet. In CSS, style rules are made up of what are called Selectors, Properties, and Values. This is similar to Elements, Attributes, and Values in HTML. Here is a quick look at the syntax:

selector {property:value; property:value;}

Here’s how it works, for each Selector there is a Property/Value pair. Selectors, “select” elements on an HTML page and use Property/Value pairs to style the content. Let’s go to our style sheet and create a selector. To begin we add the following code to our style sheet:

p.CSS_01 {}

Looking at the code notice the format used. What we have done is select the paragraph tag by typing the letter “p”. We then clarified that we want to select only paragraph tags with a specific class. That class is specified by typing .CSS_01 right after “p”. Remember in our HTML code that we gave the paragraph a class attribute with the value of CSS_01. This is how we know which element we are applying the style rule to. The last bit of code is the two curly brackets “{}”. These brackets will contain our Property/Value pairs. There several property value pairs that we could apply. For our purposes here we’ll choose a font, and a background color:

p.CSS_01 {
          background-color: yellow;
          font-family: "verdana", "arial";
          }
Notice how property value pairs work. First you identify the property in this case “background-color” and “font-family”. Then you assign values. It is important to note that some properties can have multiple values such as “font-family”. We’ll go into more detail in latter tutorials.

Now, save all of your documents and open up your HTML page in a browser. You should see something like this:

Congratulations. You have just created your first CSS style sheet, linked it to your HTML page, built a style rule, and styled your content. You are well on your way to becoming a CSS master. Keep an eye out for the next tutorial!

No Comments | Tags: CSS

CSS Tip #4 | Creating Navigation Rollovers With CSS

7 November 2007 - 3:08

What are rollovers you ask? You remember, way back when you had image rollovers that you had to implement with Javascript. Basically when you moused over a bit of text in the navigation that bit of text would appear to light up. In the past it was created with images of the text. We had one image as the default state and another as the “on mouseover” state and we used Javascript to make it happen. I know, I’m dating myself, but people used this all the way up to about 2002 and some designers still do it!

Anyway, thankfully we now have cascading style sheets or in other words, CSS. The advantage to using CSS to create a rollover effect is that you no longer need images. With cascading style sheets we have the ability to create the rollover effect and attribute it to the text itself. This is a huge advantage in two ways:

First, there are no images to load so the navigation doesn’t pop into place or take any extra time to generate. It is a much faster system.

Second, it allows for search engines to index more text on your page and helps with ranking.

So how do we get started? Just follow these few steps:

Step 1, Create the Navigation DIV

To begin we’ll want to make sure that our navigation links are contained in a DIV tag. We do this so that we can be sure we are styling the appropriate set of links. Of course you could also specify a default rollover state for all links with CSS if you wanted to, but for our purposes we will be focusing on how to create rollovers in CSS for navigation. To set up our navigation to accept css rollovers with begin with the following example navigation links contained within a DIV tag:

<div id="nav">

  <ul>

      <li><a href="link1"> Link 1 </a></li>
      <li><a href="link1"> Link 1 </a></li>
      <li><a href="link1"> Link 1 </a></li>

  <ul>

</div>

Notice that I set my links up within an unordered list. You could set them up any way you like, but I find that using and unordered list is a nice way to manage organization.

Step 2, Create a CSS Style Rule

Next we want to create a CSS style rule. In this rule we’ll be styling the links and the list items.

#nav ul{margin:0; padding:9px}
#nav ul li{display: inline}
#nav ul li a{padding: 4px 7px 4px 7px; background:#F0F3F7; color: #555;}
#nav ul li a:hover{background: #ff0; color: #000; text-decoration: none;}
#nav ul li a:active{background: #fff; color: #00C; text-decoration: none;}

I know, that is a lot of code for a tip! But don’t worry we’ll go through it line by line so that you know what is going on. The first line #nav ul{margin:0; padding:9px} sets up a margin of zero (meaning none) and adds padding around the list. The second line #nav ul li{display: inline} tells us that rather than display a list of bullets, we want to display the list in line. In other words, all on one line without the bullets. The next line is attributed to styling the link itself #nav ul li a{padding: 4px 7px 4px 7px; background:#F0F3F7; color: #555;} On this line you’ll notice that we added some padding around the link, gave a background color and a color for the text. This creates the illusion that the text is contained in a box. The next two lines are similar, they are simply saying that on hover and on click change things a bit. Here is the final result:

That is all there is too it. If you want to display the elements as a list rather than in-line simply remove the line about display: inline. Also, if you want, you can download the HTML and the CSS in one HTML page. HTML and CSS Style Example for CSS Tutorial #4

Fell free to use the code as you like.

No Comments | Tags: CSS

CSS Tip #3 | Custom Link Colors with CSS

6 November 2007 - 21:35

Creating a custom link color is one of the first things people learn to do with CSS. And, now that you are on your way to learning how to use cascading style sheets, or in other words, CSS. You want to know how to use cascading style sheets to create custom link colors too. Here’s how.

Link Pseudo-Classes

Links have a number of states associated with them. There is an “active” link, which refers to when a mouse is clicking down on the link; a “visited” link, which refers to when the link has already been visited; a general “link” state, which refers to the default link state on the page; and last there is a “hover” state, which is related to when a mouse is hovering over the link. In CSS we call these states Pseudo-Classes and they are written as a cascade in this order: :link, :visited, :hover, and :active:

Create the Link Element

Next we’ll create the link element for each of the Pseudo-Classes mentioned above. We place these in our style sheet which is linked to the content we are styling:


  a:link { }
  a:visited { }
  a:hover { }
  a:active { }

Add Color Property

Next we add the color property and value to each of the Pseudo-Classes. This is what gives the link it’s special color for each of the states. It is important to note that if you want your link to appear as if it lights up you will want to make your hover and active states lighter than your default link state.


  a:link {color: #FF0000;}
  a:visited { color: #CC0033;}
  a:hover {color: #FF6600;}
  a:active {color: #FFFF33;}

So that we can demonstrate what this actually looks like, let’s create a simple web page with a few links and add this style to the page. We’ll add the style directly to the head. Normally you would link from the head off to your style sheet to pull in your styles, but since all we are doing is demonstrating how the CSS code works I’m putting it all together in one. Note: in practice, you should always separate your styles from your content in a separate style sheet. This is the point of using cascading style sheets. The styles should always be separate from the content so that you can easily change the layout and design of your work down the road.

Example HTML page with Custom Link Colors in CSS

Okay, now that you are aware that you should always separate styles from content, lets go ahead and demonstrate how to put them together

<html>
<head>
<title>Custom Link Styles with CSS</title>

<style type="text/CSS">
  a:link {color: #FF0000;}
  a:visited { color: #CC0033;}
  a:hover {color: #FF6600;}
  a:active {color: #FFFF33;}
</style>

</head>
<body>

<p><a href="some_URL">Default Link State</a></p>
<p><a href="some_URL">Visited Link State</a></p>
<p><a href="some_URL">Mouse Hovering Link State</a></p>
<p><a href="some_URL">Active Link State</a></p>

</body>
</html>

Looking at these links in a web browser you now get something like this:

No Comments | Tags: CSS

CSS Tip #2 | Use Your Own Images for Bullet Points!

5 November 2007 - 20:00

I know you have seen them on the cool websites. You know, those drop down lists with custom bullet point markers. The only problem is that at this moment you don’t know how to do that, well with CSS you can. Here is how:

Create a Unordered List Element

To be begin you’ll need to add an unordered list element to your style sheet. Something like this:

      ul { }

Add the List-Style-Image Property

Next you’ll want to add the list-style-image property value. You don’t have the ability to resize your image here so you will want to be sure that you specify the path your your image and that your image is appropriately sized. :

      ul {
          list-style-image: url(Your_image.gif);
         }

Add the List-Style-Type Property (optional)

Last, as a precaution you will want to add the list-style-type property to your element. This is a precaution, just in case for whatever reason your image doesn’t load to the page.

      ul {
          list-style-type: disc;
          list-style-image: url(Your_image.gif);
         }

No Comments | Tags: CSS

CSS Tip #1 | Creating a Border Around an Image

4 November 2007 - 23:25

At some point everyone needs to know how to create borders around images. Here is an example of how to do that

Create the Image Element

First, we’ll need to create an image element within your style sheet. It should look something like this:

img { }

Add the Border Property

Next we’ll want to add the border property to our image element like this:

img { border: 1px solid #E7E9EB ; }

Notice that the border property has a few values, first is the line size. We specified 1px here, then is they syle type, in this case it is solid, and last we specified the color.

Add Padding (Optional)

So that the border doesn’t sit right up against the image we’ll go ahead and add some padding using the padding element:

img { border: 1px #E7E9EB solid;
padding: 3px; }

Add a Background Color (Optional)

Next lets give the image a background color. This will help distinguish the padded area around the image.

    img {

           border: 1px #E7E9EB solid;

           padding: 3px;

           background-color: #FCFCFC; }

Now upload an image to your page you should get the following:

Notice the nice simple border around the image. And of course, the best part is that you have complete control over it. Additionally, by adding a class and or ID structure you can specify which images in which areas of your site you want to have specific styles.

No Comments | Tags: CSS

Author

Newsletter

RSS Feeds

Blogroll

Tags

Archive

Login

CSS Tutorial Intro| What is CSS?

2 April 2008 - 21:42

CSS Tutorial #1 | Constructing a Style Rule

2 April 2008 - 21:42

CSS Tutorial | The Three Column Layout With Flexible Width

1 April 2008 - 23:56

CSS Tutorial 1 | What is CSS and How Does it Work?

15 November 2007 - 23:12

CSS Tip #4 | Creating Navigation Rollovers With CSS

7 November 2007 - 3:08

Step 1, Create the Navigation DIV

Step 2, Create a CSS Style Rule

CSS Tip #3 | Custom Link Colors with CSS

6 November 2007 - 21:35

Link Pseudo-Classes

Create the Link Element

Add Color Property

Example HTML page with Custom Link Colors in CSS

CSS Tip #2 | Use Your Own Images for Bullet Points!

5 November 2007 - 20:00

Create a Unordered List Element

Add the List-Style-Image Property

Add the List-Style-Type Property (optional)

CSS Tip #1 | Creating a Border Around an Image

4 November 2007 - 23:25

Create the Image Element

Add the Border Property

Add Padding (Optional)

Add a Background Color (Optional)