CSS stands for "Cascading Style Sheets", and is another set of code that allows you to seperate the design of your web pages from it’s content. For example you can add all of your text for your headings and paragraphs, mark it up with HTML and then style colours and fonts seperately with CSS.
It works alongside HTML so you really need to understand some of the basics of this code before you can use it effectively.
Here I will detail a little bit of info to give you an understanding of how it work’s and I garuantee that once you get to grips with this very effective code you wont be styling your web pages in any other way!
CSS can be used in three different way’s, depending on what you want to use it for.
Inline Style - You can use this within the body of your html document to style specific content only, for example to change the colour of a paragraph of text.
Internal Style Sheet - You can add this within the head section of your html document and then make reference to it within your body/content. This is useful if you are only working on one or two pages for example as it’s easy to maintain and is also useful if you only want a specific part of your page styled in a certain way.
External Style Sheet - You can add a link to a seperate .css file to the head section of all of your web/html pages. This allows you to use the same style for all your pages, keeping the style consistent across your whole site. If you have multple web pages is it a real benefit to be able to alter and maintain the style of your site from one place. It is also a great benefit to be able to keep all of your style rules in a single file.
The different way’s you use CSS, cascade and inherit in a specific order, meaning that one style will overwrite another. The order they inherit, in order of highest priority, is as follows:
Inline style
Internal style
External Style Sheet
However please not that if you link an external style sheet after you have inserted an internal style sheet, the internal style will be overwritten (just to confuse you).
In CSS you need to set rules to the things you want to style, for example you want all your large headings to be a certain size and certain colour.
A CSS rule consists of two parts, a "Selector" and one or more "Declarations".
Selector - A Selector is the HTML element you want to style, for example <h1>.
Declaration- A Decleration consists of two elements, a "Property" and a "Value".
Property -A Property for example is "color" and the value for example "blue".
This would look something like this:
h1 {
colour:blue;
font-size:36px;
}
Declaration groups are surrounded by {curly brackets} rather than the <angled brackets> used for html, and each declaration always ends with a semicolon;
You can add rules to all HTML elements. The rule will be directly inherited to the HTML element when the CSS style is linked to it. Some simple examples are to add one for the body tag, paragraph tags and other heading tags as follows:
My body rule is
body { background-color:#66CCFF; font-family:Arial, Helvetica, sans-serif; }
My paragraph rule is:
p { color:#0033FF; margin-left:80px; margin-right:80px; }
And my heading rule is:
h2 {text-align:center; color:#FFFFFF; font-size:26px; }
An example of my h3 rule is:
h3 {margin-left:80px; text-align:left; color:#FFFFFF; font-size:20px; }
External style sheets are files with the extention ".css" that you add all of your styles too as detailed above. Your WYSIWIG editor will give you the option to create css file rather than a html file.
To link a css file to your html file, you will need to add a link to the head section of your html document. For example, if you have a css file named "practice1.css" saved in a folder called "css", it would look something like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css /practice1.css"/>
</head>
<body>
<h1>My heading is styled as per the rules set in my attached css file</h1>
<p>My paragraph is styled as per the rules set in my attached css file</p>
</body>
</html>
Once you have linked your css file all of your marked up html content will then be magically styled as per the rules you added to your css file!
An internal style is entered into the head section of your html doc and can then be made reference to within the body section.
This may look something like this:
<html>
<head>
<style type="text/css">
h1 {
font-size:36px;
text- align: center;
}
</head>
<body>
<h1>All of my large heading now inherit the style I added in the head section.</h1>
</body>
</html>
Inline Style’s are written directly into your html tags. This is useful if you only want to specify a style for a small part of your page. However I would reccomend that you only use this in small doses.
You can apply any CSS style attribute to any HTML property, for example adding a different font colour to one of your paragraphs.
This may look something like this:
<html>
<head>
</head>
<body>
<p style="color:blue">Hello this paragraph text is blue</p>
<p>This paragraph text will go back to the default color of the page as no style had been added to it</p>
</body>
</html>
Well what I have detailed above is a good introduction to css, and probably enough info to get you going for now, however I will just mention that there are a lot of other things you can do with css!
CSS is really about creating great layouts for your web pages not just styling it’s content. This is the next stage of learning css, so once you have got your head around the basics i’d recommend doing some more research into this code as it really is quite amazing stuff!