Cascading Style Sheets are a way to style your HTML.
The reason they're called "cascading" is because you can use one or more 'style sheets' for a single page, and they all kind of roll-together or merge, or even completely overwrite the previous style sheet.
There are 3 ways in which you can include CSS to style your HTML: External, Included, and Inline
External Style Sheets are Style Sheets that have been saved as a separate file (with .css extension).
Included Style Sheets are Style Sheets that are physically written and included in the <head> of your HTML page.
Inline Style Definitions are CSS style="" definitions that are written into each HTML TAG.
Here's an example of an External Style Sheet, saved as mystyle.css:
body{
And here's how you would link it to your HTML page:
background-colour:#000080;
background-image:url('images/mybackground.jpg');
color:#ffffff;
}
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://www.mywebsite.com/mystyle.css">
</head>
<body>
</body>
</html>
Here's an example of an Included Style Sheet:
<html>
<head>
<title></title>
<style>
body{
background-colour:#000080;
background-image: url('images/mybackground.jpg');
color:#ffffff;
}
</style>
</head>
<body>
</body>
</html>
Here's an example of an Inline Style Definition:
<html>
<head>
<title></title>
</head>
<body style="background-colour:#000080;background-image:url('images/mybackground.jpg');color:#ffffff">
</body>
</html>
The preferred method is External, for many reasons. It keeps your styling completely outside and separate from your HTML, and if you should ever need to alter your style sheet, you only have to edit one file, and the change will automatically apply to any HTML page linked to it. In other words... if you have 100 pages on your website, you would have to edit all 100 to make 1 small styling change if your CSS was Included or Inline!
So how do we use CSS?
I'm not going to describe every conceivable styling attribute... and there are lots, but let's explore how to use CSS to target & style certain elements in your HTML webpage.
There are 3 ways in which you can target CSS to style your HTML: by Tag, Class, or Id:
<div>This is just a div</div>
The 1st div is just a div
<div class="mydiv">Class of "mydiv"</div>
<div id="mydiv">Id of "mydiv"</div>
<div class="mydiv" id="mydiv">Class & Id of "mydiv"</div>
The 2nd div has been given a class name of "mydiv".
The 3rd div has been given an id of "mydiv".
The 4th div has both a class name and an id.
Let's style those divs by targeting them with some CSS styles:
div{
The 1st CSS Style targets every div element on the page.
width:150px;
height:20px;
padding:15px;
border:solid #ff0000;
background-color:#97C5F3;
}
.mydiv{
width:250px;
background-color:#fff;
}
#mydiv{
border:solid #008000;
}
The 2nd CSS Style targets any element (div or otherwise) with a class name of "mydiv" (.=class).
The 3rd CSS Style targets any element (div or otherwise) with an id of "mydiv" (#=id).
Here's how the divs look with those styles: