Line25

Getting Started with CSS: A Practical Exercise

Read the full post

Learning how to write CSS is an essential lesson in any web design classroom. For you who are just starting out, here’s a beginner’s guide to help you learn the basics in proper CSS execution.

Preface

Performing even the most basic CSS task requires an eye for details. Code is poetry and not something for the restless. In this beginner’s guide tutorial we will show an example of how to create an html web page using div tag markup and later defining them in an external stylesheet.

Step 1 – The Markup and Use of Tags

The HTML markup comes first and you should always leave page styling (CSS) until the markup is completely finished.

HTML stands for Hypertext Mark-up Language and is the means to describe the structure of text-based information of a web page. Before you learn how to apply styling through CSS you will have to also learn how to apply the elements of structure.

When doing a markup you use “tags” that are surrounded by angle brackets. Tags are used so that you may define what you want on the web page. The CSS is later applied to define where the content of each tag should appear in the web browser window, and how it should look.

Elementary tags in web page are:

<html>
<head>

<title></title>

</head>

<body>

</body>
</html>

It is within the <body> tag you then use more tags to markup web page element and content.

A very important tag that is used to divide and define structure is the <div>. Using this tag you may divide your web page into boxes. Within a div tag you can then add more tags to define its content (links, text, images etc.), later to be styled in the CSS.

Use an image editor (Photoshop recommended) to draw a markup the boxes:

Photoshop wireframe

In code, this web page markup would look like below, as an example on how to use div tags:

<html>
<head>

<title></title>

</head>

<body>

<div id="wrapper">
<div id="header">

</div><!--Header-->

<div id="navigation">

</div><!--Navigation-->

<div id="menu">

</div><!--Menu-->

<div id="content">


</div><!--Content-->

<div id="footer">

</div><!--Footer-->
</div>

</body>
</html>

As you can see, we have given the div tag an ID. This is to later be able to define every individual tag in the stylesheet. “ID” is used to mark a tag for unique styling, while “class” is used for reoccurring design elements.

Also, the first div tag in the markup; the “wrapper” we use to wrap around all other tags. This is to later be able to position the web page as we wish.

Step 2 – Linking to Stylesheet

As established, the CSS stylesheet is where you define design elements for your web page. You can choose to create an internal stylesheet or an external. In this tutorial we will show you how to use an external stylesheet.

If you preview your web page in your web browser now, nothing will appear. That is simply because you have not yet given the tags any color or form. And since the stylesheet will be a separate external file, the first thing you have to do is to make sure your web page includes a path to the CSS.

Add this code between <head></head>:

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

Step 3 – Creating the CSS

The CSS syntax consists of the selector, property and value. The selector is the tag you want to define in design, the property what kind of attribute you wish to add, and value how the property is added.

The selector, except the body tag, is written to the CSS with either “#” or “.” before the selector name; # defining selector ID and . (dot) defining selector class. A selector can be defined by any number of properties and to work has to be wrapped within { }.

	#selector {
	
		property:value;
		property:value;
		property:value;
	
	}

We will now define the following tags as selectors in the stylesheet, according to a number of different properties and values.

Selectors to be defined in the CSS:

  • body
  • wrapper
  • header
  • navigation
  • menu
  • content
  • footer

Properties and possible values in the CSS:

The background property can be defined with an image or color, or both. To display an image, the value has to include a path to the image source. To display a color only, a hexadecimal is used. For both, the hexadecimal is defined before the image source.

The color property is used to define the color of text of a selector. The value is written as hexadecimal (e.g. #FFFFFF for white)

The font-family property lets you decide what font type the web page text should have. It is standard to include at least three font-family types, so if the web browser does not support the first, it has more to choose from (e.g. Trebuchet MS, Arial, Times New Roman)

The font-size property defines the size of the font and is written in pixels.

The margin property is used to define the position of the selector. The values are written to define the selector’s sides’ distance from the browser’s window frame, as top, left, bottom, right. As we want to position the web page in the center, we write 0px auto 0px. All the four values do not however always have to be defined.

The width property defines the desired width in pixels we want our selector box to have.

The height property defines the height in pixels

The float property allows us to position elements inside selectors, mainly to the left or right.

Now, to create the CSS file, open your favorite text editor (EditPlus recommended) and save the new document as style.css (the name we gave the css file when creating the path in the web page head tag) in the folder where your web page are located. Then add the following code:

body {
	background: #f3f2f3;
	color: #000000;
	font-family: Trebuchet MS, Arial, Times New Roman;
	font-size: 12px;
}

#wrapper {
	background: #FFFFFF;
	margin: 60px auto;
	width: 900px;
	height: 1024px;
}

#header {
	background: #838283;
	height: 200px;
	width: 900px;	
}

#navigation {
	background: #a2a2a2;
	width: 900px;
	height: 20px;
}

#menu {
	background: #333333;
	float: left;
	width: 200px;
	height: 624px;
}
 
#content {
	background: #d2d0d2;	
	width: 900px;
	height: 624px;
}

#footer {
	background: #838283;
	height: 180px;
	width: 900px;
}

Conclusion

You have now defined each tag/selector by the properties mentioned above. Previewed in the browser, your webpage should now look like this.

View Demo

The aim of this tutorial has been to create a practical drill for the CSS beginner. It will hopefully give you a basic understanding of the relation between the Hypertext markup language (Html), the external CSS stylesheet and how they are both defined and structured.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Web Hosting Search

Hi, my name is Brian Franklin and I work as a freelance web designer and writer. Currently, you’ll find me in any given Stockholm café tapping away on my notebook. Web design is what I do, and writing about it is what I love. If you are looking for web hosting, check out our guides and reviews to find the best host for your needs.

52 Comments

  1. Alis says:

    Great, a really useful starting point for beginner!

  2. Simple and useful, great post to start learning CSS. Thanks Brian.

  3. Abu Farhan says:

    I want to start learn css from this article, thanks

  4. Janportfolio says:

    Tnx, everytime I learn more and more, tnx

  5. Hi Brian,

    A good and useful tutorial for beginning to learn css. Would you go further into this object with all elements such as the css code for a fully functional menu?

    Thankx,
    Glenn

  6. Muy buen blog de diseño! great blog! thanks from Argentina.

  7. Luis Lopez says:

    really useful and well explain, i like it, even if is really basic

  8. Dzinepress says:

    helping stuff here.

  9. Just talking with a designer today about this and where he should go to learn the CSS basics. This is as well developed as I have seen for a beginner to understand.

  10. Nardyello says:

    Excellent info. The fundamental steps are broken down to a simple enough form in which newcomers can understand and learn from.

    Great job =]

  11. 9swords says:

    Nice post. Easy to understand and it covers the beginning of learning cascading style sheets in a way i have not seen before.

  12. Brian Jørgensen says:

    Great tutorial for absolute beginners at CSS.
    And very well explained.

  13. Adam says:

    Nice and clear:-)

  14. Alex Stan says:

    Hey, you have a typo on step 2:
    >, an extra >

    Also, i think you added too much margin on the wrapper on top and on the bottom, try 10px.

    Other than that, it’s a good guide

  15. Great guide for first time css users.

  16. Hernan_ says:

    When should we start learning CCS for HTML v5??. We all now it make our CSS code easier but is it yet to soon to bring it on?.

    (Sorry by my ENG :) )

  17. Rick says:

    Nice easy tutorial. One thing I noticed though ( and I am probably being nit-picky) is that you declared the width on the #wrapper and then you re-declared it on the children. This is not necessary if you are not changing the width of the child element.
    This is a real easy way to get your css file size down.
    Anyways keep up the good work!

  18. Lestraw says:

    Bien de bien, esta facil de aprender, gracias

  19. Pippa says:

    I’m just learning CSS so liked the article. Had a play, one quick question, should the content be width 900px or be 700px to keep he page the same size. The header and title and footer are all 900px and remain at this size but if text is entered into the content section this will expand?and the others don’t. Just checking as it’s the sections that confuse me the most.

    cheers
    Pip

  20. Adam says:

    This a great and very well explained article. Unfortunately the layout breaks in IE6. To fix this issue, change the width of the #content div to 700px and apply a float then clear the floats in the #footer.

    Thanks for the article!

  21. Elton Liu says:

    Greate advice for beginners, a fantastic well layout tutorial.

  22. hehe says:

    thanks!

  23. Thank you very much for the useful article. I’ve been working as a freelance web designer in Toronto since 1999 and I have my own opinion of what’s good and what’s bad in web design so I have to admit -yours is VERY good. stylish, informative, clean and well coded. my respect and thanks for the article once again

    Best regards from Toronto,
    Mike /Toronto Web Design & SEO

  24. This post really cleared up some confusion for me. Thank you for your well thought-out post. I feel much better knowing what’s going on with my CSS rather than just pointing and clicking in Dreamweaver!

  25. dijifx says:

    Very nicely explained. I have just started tampering with CSS.

  26. MB says:

    Thank you. I am just starting out in CSS and found this very easy to read + understand. :)

  27. Thank you for this, we will use it in our content. It is always difficult explaining CSS to complete beginners.

  28. machmoed says:

    thank’s brian.

  29. DARIO says:

    Great, I’m beginer in coding really great and thanks a lot.There are not so many people to share their knowlege with others.

  30. Jeff says:

    Nice article for beginners

  31. andiaz says:

    thanks, i will use this as a template for my nexts designs.

Comments are now closed