External CSS
Welcome back to my HTML/CSS tutorial, Today you will be learning how to create external stylesheets. This is where CSS really becomes alive. This is the most efficient and useful way possible.
To get into that thou, I will need to explain the theory behind CSS, this is where you will be getting your ah-ha moment.
We will be discussing the
box model in CSS. Everything will be so clear to you after this is explained.
Everything on a web-page is a box, no other way to look at it. Everything is a box that fits inside another box.This means that
Margins, Padding, Dimensions, Border, Background, Font, Positioning; anything on a web page can be altered using CSS Box Model.
Steps:
- Open skeleton.html in notepad
- Save file as box_model.html
- Type as follow:
Code:
<html>[INDENT]<head>[/INDENT]
[INDENT=2]<title>Box Model</title>
<link rel="stylesheet" type="text/css" href="external.css">
[/INDENT]
[INDENT]</head>[/INDENT]
[INDENT]<body>[/INDENT]
[INDENT=2]<div id="container">[/INDENT]
[INDENT=3]<p>Edge of the White is the padding, after that is the red which is the border, then is the margin which is grey. And everything in the middle is the Content. This is what the box model is. I created this so that it would be easier. Seeing the box is the only way to learn the box model.</p>
<ul>[/INDENT]
[INDENT=4]<li>Box Model Shows</li>
<li>Margin</li>
<li>Padding</li>
<li>Border</li>
[/INDENT]
[INDENT=3]</ul>
<ol>[/INDENT]
[INDENT=4]<li>Box Model Shows</li>
<li>Margin</li>
<li>Padding</li>
<li>Border</li>
[/INDENT]
[INDENT=3]</ol>
<table>[/INDENT]
[INDENT=4]<td>Box Model Shows</td>
<td>Margin</td>
<td>Padding</td>
<td>Border</td>
[/INDENT]
[INDENT=3]</table>
[/INDENT]
[INDENT=2]
</div>
[/INDENT]
[INDENT]</body>
[/INDENT]
</html>
- Save file
External CSS File
- Open notepad
- Save file as external.css
- Type as follows:
Code:
body {
background: black;
}
#container {
background: gray;
width: 600px;
height: 400px;
margin: 0px auto;
border: 1px solid black;
}
p {
background: white;
border: 20px solid red;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
- Save file
- Open box-model.html in browser
Now replace the styling from above with this. Will really help with seeing how the box model works.
Code:
*{
border:1px solid red !important;
}
Now that you know exactly how CSS works and where it is used, you can now learn the standard way of using CSS. By making it external, it has to be only written once and used on many pages, this creates the look and feel of the whole website. Internal is the backup to external, it is to only be used on pages that need individual styling. In-line is only used when a single tag on the entire website needs individual styling.
I have explained the syntax of a CSS and what can be done, but that doesn?t really demonstrate why and how to use CSS. This post is the most important post in this thread.
How to use External CSS?
Simple, it is the same as internal but taken out and placed into a separate file from the HTML. This file is a ?.css? file. Then all you have to do is call the CSS file into the pages that will be using it. This is simply done by replacing the Internal CSS style tag to;
Code:
<link rel="stylesheet" type="text/css" href="name.css">
and taken the internal styles and the ending style tag away.
Play around with the code, always testing to see if you can achieve the effects you desire.
Soon I will have a little treat for everyone here on BHW! Hope you all will enjoy it.
"In life, there are no mistakes, only lessons."
? Vic Johnson, Day by Day with James Allen
