WHAT IS CSS?
Cascading Style Sheets. A 'Sheet' or page of code, which defines the style of a web document and also happens to cascade. The cascade bit just means that the code combines together to form the final look. If you're new to CSS, this wont make any sense yet, but it will soon.
body
{
background-color:#000000;
}
This is a chunk of CSS and it sets the background colour of the HTML tag 'body' ( leave the 'u' out of colour as it's American code ). This is about as basic as CSS gets. This block of code has a name and that name is rule. Each rule has a selector which in this case is the body tag. There are three types of selectors which will be covered later. background-color is also known as an attribute which has a value of #000000 ( The hex value for black ).
So now you know what it looks like, you might wonder, where does it go? Well CSS can be put in 3 main places in an HTML document:
- embedded
- external
- inline
Embedded CSS
This sits at the top of your HTML document in the <head> section. What you do is create a <style> tag and place your CSS code inside so the code ends up looking something like this:
<style type="text/css">
body
{
background-color:#000000
}
</style>
Generally, this is not a good place to put CSS. Placing it here means that the style sheet is only accessible on the page it is embedded in, meaning you'll need to have to code in every web page for it to apply.
External CSS
Most of your CSS should be applied using the external method. You place all your code inside a .css file and then apply it to each page using the following line:
<link href="styles.css" rel="stylesheet" type="text/css" />
This line adds a link to an external file, in this case styles.css which is located in the same directory as the webpage. The rel and type attributes tell the document what type of page is being linked.
Inline CSS
The other way to apply CSS is where you need to use it. For example, if you wanted a paragraph to be red, you could do the following:
<p style="color:#FF0000"> This text is red </p>
which results in this line:
This text is red
This method should only be used if you have a very simple site and only want to change one or two tags. It's also the only method you can use when creating HTML emails due to email client code restrictions.
