Welcome to lesson 1 in CodeDesign's CSS series!
Now that you know how to build a page in HTML - it's time that we learn how to customize HTML with CSS! CSS stands for "Cascading Style Sheet" and is a language that gives you FULL control over every element in an HTML, XML, DHTML, or XHTML document. CSS even adds a few new elements to the fray!
CSS is how you take a great web page and edit every last detail to your liking. You can change anything from the position of something, to the background image, to the padding around that element. Quite frankly, you can hack a standard HTML tag until it is your own creation and displays the way you want it too!
Well, are you ready to take control of your web pages? - I thought so!
Making a CSS File
There are two ways of making a CSS file and attaching it to the page you want to have it effect. The first is by creating a file called "youname.css" (*.css) and then adding the following code to the head of the HTML file you want using the CSS.
<html>
<head>
<title>CodeDesign</title>
<link rel="stylesheet" type="text/css" href="yourname.css">
<!-- please don't name the style sheet "yourname" lol -->
</head>
<body>
...the rest of the page...
</body>
</html>For those of you who don't understand the above code you should read our HTML lessons first.
Basically, we place the tag pointing to the CSS in a very simple HTML file:
<link rel="stylesheet" type="text/css" href="yourname.css">Way 2
The second way of adding CSS code to your HTML document is by placing ALL the CSS code in the HEAD of the file.
<html>
<head>
<title>CodeDesign</title>
<style type="text/css">
p {
line-height: 1.5em;
color: #cccccc;
font:11px verdana, arial;
}
b{ color: red; }
</style>
</head>
<body>
...the rest of the page...
</body>
</html>Just so you know, adding each element's CSS to the HTML document can make the head of your HTML files very long! However, if you need to add a quick CSS customization to make all text within paragraphs ("") on this page the gray (color: #cccccc;); this is easier than making a whole new file and linking them.
Now that I have shown you the two ways of including CSS code, I want to go over the benefits of each form.
External File
Internal Code
As you can tell, the benefits are kind of one-sided...
Using CSS
So now that we know how to include CSS so that we can change things lets put our knowledge to work by making a HTML page that has CSS code attached to it. Open your code editor (like MS notepad or SciTE) and type the following code - then save it as "csslesson1.html" and open it in your browser.
<html>
<head>
<title>CodeDesign</title>
<style type="text/css">
BODY { background-color: #000; padding-left: 400px;}
p {
line-height: 1.5em;
color: #fff;
font:12px verdana, arial;
}
b{ color: red; }
</style>
</head>
<body>
<p> This is just some <b>Awesome</b> text that shows how you can use <b>CSS</b> to change the background color and the font colors!</p>
</body>
</html>Wow, the whole page is black with some text on the right side of the screen! Try re-sizing the window and you will notice that the text will never move any closer to the left side of the window. The reason that the page behaves like this is because we told the HTML file that the "BODY" element should have a 400 pixel cushion on the left side of the screen. In-other-words, NOTHING within the BODY tag can be less than 400 pixels to the left.
NOTE: If you are coding right, there should never be any visible elements (like paragraphs) out-side of the BODY element! The "BODY" is the place where you put all of the code your users will see, while the HEAD is where you put the code they won't see. (like the reference to the CSS file.)
Next, I want to look at the text in the <p> tag. It is white while anything in a <b> tag is red. While I am sure you can figure out which code makes the <b> tag red I want to show you the HEX values that are used to make the page black and the body white.
Black (to much color): 000000 (or the shorthand: 000)
White (lack of color): ffffff (or the shorthand: fff)Hex colors are the default for web design, and while I know that saying "color: red;" is easier, you can't use all of the colors in a 8 bit (which is the low end) color spectrum that way. There are MILLIONS of them, trying to name them all would be insane. So instead, if you have Photoshop, the GIMP (free), or just about any other color selection tool, (even online ones) you can find the HEX value for the perfect hue you want. Here are some more Hex colors:
Gray: CCCCCC (or the shorthand: CCC)
Blue: 0723ee (Or at least one of the millions of blue hues...)
Pink: ee07c0
Yellow: e6ee07So get used to seeing 6 (or 3) digit numbers as they are everywhere. :)
Now the last thing I want to cover really quick are the "font" and "line-height" CSS tags... uh... Actually, they explain themselves.
line-height: 1.5em;
font:12px verdana, arial;Well, that concludes lesson 1, for your homework (lol) I would like you to take the CSS out of the HTML file and stick it in it's own file. Here is what the CSS file should look like:
BODY { background-color: #000; padding-left: 400px;}
p {
line-height: 1.5em;
color: #fff;
font:12px verdana, arial;
}
b{ color: red; }It it up to you to make the HTML file :-)
| Attachment | Size |
|---|---|
| csslesson1.zip | 395 bytes |
You are gifted to teach, David. The greatest thing in our life is when we fulfill what He has called us to be.
~Sidharth
