If your reading this your probably either new to web design, or still using tables and deciding it’s time to move on, after all tables are for tabular data, not layout structure!
What is CSS?
CSS stands for Cascading Style Sheet - but to put it simply it is where you can add style to your page. CSS manipulates HTML tags and allows you can change things from background colours to widths, heights and positions.
There are some real benefits of building good CSS layouts; it makes websites easier to maintain, uses less code which results in faster loading pages, allows you to build interchangable layouts by just swapping the style sheet and totally change a design (see www.csszengarden.com for a working example of this).
I suppose the best place to start would be with a basic HTML document, so whatever your using, (notepad if you hadn’t thought about software yet!), create a new file and call it index.htm - this is recognised by the server as the first page to load, becoming our home page.
What does an HTML document look like?
<html>
<head></head>
<body></body>
</html>
OK, these are the main parts of an HTML page, the <html> tag telling the browser the page has HTML content, the <head> tags are for telling the browser about the page, using <meta> tags, the <title></title> tag, and our CSS include among other things which we will explore later. That just leaves the <body> section, this is where we put anything we want to display on the page.
HTML Syntax
All HTML tags start with the less than symbol, then the name of the tag followed by a greater than symbol. You can assign attributes to these tags, but the most important thing to remember is to close your tags. Any data you want to use will go inside the appropriate tag. So using our <body> tag as an example we are opening the tag by declaring <body> and then closing it with </body> (note the / to tell the browser it is a closing tag). We will get to adding content inside the tags further down this tutorial.
Put that into your index.htm file - it will be the basic skeleton for any other HTML pages we make. Time to get the CSS involved…
How to include CSS
There are 3 ways to use CSS: inline, in the head section, or using an include to call an external page (we will be using the include method).
<head>
<link rel="stylesheet" type="text/css" href="site.css">
</head>
OK now make another file and call it site.css -we can now begin to style the website by manipulating the HTML tags using classes and id’s, or by calling an HTML tag directly. We’ve just included it in our index.htm file, so we can try changing a few basic things to see how it works.
Your site.css should be blank to start with as it isn’t an HTML page.
CSS Syntax
body {
background:#000000;
color:#ffffff;
}
CSS syntax is made up of three parts: a selector, a property and a value. So body is our selector, we are telling CSS we want to change the body element of the HTML. Background and color (representing font color) are both properties, where we tell the CSS what we want to change about the HTML element. Finally the value which in this case is the hexdecimal value giving us a color (the background black, the text white) . If your not familar with just type the word, like black, or white!
Save that and go back to your index.htm file, time to add some content!
Adding Content
<body>
<h1>This is a header</h1>
<p>This is some content inside a paragraph.</p>
</body>
Remember, for every tag that is opened there must be a closing tag with the same name (there are exceptions to this rule but we will find out about them later), in the example above the <h1> tag is the opening for the header with the </h1> calling the end. That means anything we put inside those tags will carry it’s attributes, which we can change using CSS.
Go back to your CSS, lets give the header and paragraph text some style.
Changing HTML elements
h1 {
font-size:16px;
font-family:Arial, Verdana;
color:#ff0000;
}
p {
font-size:12px;
}
OK, we’ve introduced a few new properties: font-size and font-family (choose your font type, remember to choose a common font that everyone has - Arial and Verdana are safe bets).
Save that and you should end up with a black page, with a red header and white paragraph text. Because we set the color of the font in the body, it will be inherited by all elements inside it, such as <p>. Of course you can override it by redeclaring it, like we have with the <h1>.
Try playing around with a few different ideas to get used to how you can manipulate various HTML tags. For a good list of tags available check out http://www.w3schools.com/tags/
I will be posting another tutorial next week explaining classes and ID’s and how they can be used to build a website layout using CSS.
Coop - Another Dude
Did this tutorial help you? If so, click the bookmark button, stumble me, add me to your twitter and tell your friends! Alternatively, sign up and leave a comment!
Not what you were looking for? Then leave a comment or email us and we’ll get you the tutorials you need.
Help me out by voting for this tutorial
Did this post help you? If so help us continue to grow and Digg this page or Share on Twitter!
If you haven't already, sign up to our RSS feed or register to recieve updates direct to your email!
Nice start, can’t wait for the next one. this could be a nice resource to keep in the file. I like good guides always helpfull with my bad memory.
Great intro on CSS!
This is really a must for me to bookmark. You brought up a good point and thanks for that.
Thank you so much for posting this. This gives me some ideas on how to create my own CSS-website.
Om nom nom nom
Great Infomation looking for this.
Thanks and Keep up the good work!