Introduction to CSS
For many people, Cascading Style Sheets (CSS) is a fairly alien topic. This tutorial helps to provide a comprehensive overview of CSS, allowing you to get started using it in your website.
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
What is CSS?
Where HTML is the language you use for designing the structure of a web page and adding the content, CSS is the language for adding styles, colours and layout options to the content you have written in HTML.
It allows you to define and create styles, which can either be linked to pre-existing tags such as <a> or <h1>, or completely new styles which you would reference by placing <div> around the content.
How to include a style sheet
The general practice for including a CSS file in your webpage is to place the following code in the <head> area of your page:
|
1 |
<link rel="stylesheet" type="text/css" href="style.css" /> |
The pathname (style.css) would need changing to the name and location of your CSS file.
The basic website
Here is the code of a simple website, ready to be styled with CSS. If you follow through the example and explanation, it should really help you when you come to create your own CSS styled web page.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Design Shack</title> </head> <body> <h1>Design Shack</h1> <p>Welcome to our website showcasing CSS and XHTML designs</p> <div class="box"> This content will be in a CSS styled box </div> </body> </html> |
At the moment, this website will look something like this. Very basic, and not too pretty. Let’s go ahead and create a CSS file to link to this page, defining some styles.
The basic style sheet
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
body { font-family: Verdana, Arial; font-size: 11px; color:#000; background: #FFF; } h1 { font-family: Arial, Verdana, Serif; color: #99723b; text-size: 18px; } .box { padding: 10px; border: 5px solid green; width: 300px; background: #f0f0f0; } |
The website now looks much better, with more colour, layout ideas and more attractive fonts.
Most of the code used above in the CSS example is very self explanatory. The body section applies to everything within the <body> HTML tag, h1 to everything inside a <h1> tag, and .box to anything within the <div> tags. The dot before box denotes this as a custom style, not a standard one such as body or h1.
Why is CSS important?
Most of the effects shown above can be achieved by using <font> tags in your design, or tables. The great thing about CSS is that it separates design from layout, and keeps your HTML code easy to read and understand. Pages load quicker, search engines have an easier time indexing your site and everyone benefits.
It also reduces the repetition of using lots of font tags, and if you wanted to change the look of all the headings on your website, you need only alter one CSS file rather than every single page.
Where to go from here
Start experimenting! Set up your own page in a similar way to above, try your own styles and see just how easy it is to achieve stunning visual effects with CSS.