Welcome to CSS Tutorial
Introduction : An introduction to Cascading Style SheetsCSS is the acronym for: ‘Cascading Style Sheets’. CSS is an extension to basic HTML that allows you to style your web pages.
An example of a style change would be to make words bold. In standard HTML you would use the <b> tag like so:
<b>make me bold</b>
This works fine, and there is nothing wrong with it per se, except that now if you wanted to say change all your text that you initially made bold to underlined, you would have to go to every spot in the page and change the tag.
Another disadvantage can be found in this example: say you wanted to make the above text bold, make the font style Verdana and change its color to red, you would need a lot of code wrapped around the text:
<font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif">
<strong>This is text</strong></font>
This is verbose and contributes to making your HTML messy. With CSS, you can create a custom style elsewhere and set all its properties, give it a unique name and then ‘tag’ your HTML to apply these stylistic properties:
<p>My CSS styled text</p>
And in between the tags at the top of your web page you would insert this CSS code that defines the style we just applied:
<style >
.myNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
</style>
In the above example we embed the css code directly into the page itself. This is fine for smaller projects or in situations where the styles you’re defining will only be used in a single page. There are many times when you will be applying your styles to many pages and it would be a hassle to have to copy and paste your CSS code into each page.
Besides the fact that you will be cluttering up your pages with the same CSS code, you also find yourself having to edit each of these pages if you want to make a style change. Like with JavaScript, you can define/create your CSS styles in a separate file and then link it to the page you want to apply the code to:
<link href="myFirstStyleSheet.css" rel="stylesheet" >
The above line of code links your external style sheet called ‘myFirstStyleSheet.css’ to the HTML document. You place this code in between the <head> </head> tags in your web page.How to create a linked external stylesheetTo create an external style sheet all you need to do is create a simple text document (on windows you simply right-click and select new -> text document) and then change the file from type .txt to .css.
You can change the file type by just changing the file’s extension. The file’s extension on windows tells the computer what kind of file it is and allows the computer to determine how to handle the file when for example you try to open it.
You probably guessed it; CSS files are just specially formatted text files, and much in the same way HTML pages are. There is nothing special or different in the file itself, rather it is the contents of the file that make an HTML document and a CSS page what they are.
When working with a external CSS document, there are a couple of points to remember:
1. You don’t add these tags in the CSS page itself as you would if you embedded the CSS code in your HTML:
<style ></style>
Since the CSS link in your web page says that you are linking to a CSS page, you don’t need to declare (in the external CSS file) that the code in the CSS page is CSS. That is what the above tags do. Instead you would just add your CSS code directly to the page like so:
.myNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
.my2ndNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
.my3rdNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
color: #FF0000;
}
In the above example I have created a series CSS classes that can be applied to any HTML tag like so:
<p>My CSS styled text</p>
or
<h2 ”my3rdNewStyle”>My CSS styled text</h2>
You will notice that in the above example I applied a CSS style to a <h2> tag. Normally this tag sets the size of the text that it wraps to a size that is preset in the browser (ex: 10 pixels).
When you apply a CSS class to it, the CSS code overrides the default size that you would normally get with an <h2> tag in favor of the size specified in the CSS class. So now you can see that CSS can override default HTML tag behavior!
In the above examples, I have CSS code where I define my CSS classes and then ‘apply’ them to various elements in the page. Another way to apply CSS is to globally redefine an HTML tag to look a certain way:
h1 { font-family: Garamond, "Times New Roman", serif; font-size: 200%; }
What this CSS code does is set the font style and size of all <h1> tags in one shot. Now you don’t have to apply a CSS class as we did before to any <h1> tags since they are automatically all affected by the CSS style rules.
Here is another example of where I give the whole page bigger margins:
body { margin-left: 15%; margin-right: 15%; }
As you can see, you can redefine any tag and change the way it looks! This can be very powerful:
div {
background: rgb(204,204,255);
padding: 0.5em;
border: 1px solid #000000;
}
The above CSS code sets that any <div></div> tag will now have a background color of ‘rgb(204,204,255)’ and have a padding of 0.5em and a thin 1 pixel border that is solid black.
A few things to explain about the above:
Color in CSS can be expressed in a few ways:
div {
background: green;
padding: 0.5em;
border: 1px solid #FF0000;
}
So instead of ‘rgb(204,204,255)’ , I just specified ‘green’.
By using RGB (RGB is the acronym for: ‘Red Green Blue’) and Hex color, you can really get the exact color you want easily when you know your codes. Luckily many programs (like Dreamweaver) provide easy to use color pickers for you so you don’t need to know the values for the code.
In this last example I will show you the ‘super cool’ CSS code that allows you to create link roll-over affects without images:
a:link { color: rgb(0, 0, 153) }
a:visited { color: rgb(153, 0, 153) }
a:hover { color: rgb(0, 96, 255) }
a:active { color: rgb(255, 0, 102) }
The above CSS will cause your links to change color when someone hovers their mouse pointer over it, instant rollovers with no images! One important note with the above code, is that it is important that the style declarations be in the right order:
“link-visited-hover-active”,
… otherwise it may break in some browsers.
CSS is very powerful and allows you to do things that you can’t do with standard HTML. It is supported nicely now in all the modern browsers and is a must learn tool for web designers.
The above examples are just a small sample of what you can do with CSS, but it should be more than enough for you to start styling your pages nicely.
Like with many technologies CSS has a lot of capability that most people will not need to use often, if at all. So don’t get caught in the trap of thinking that if there is some functionality/feature available that you have to use it.
BTW: The killersites forum has a search engine that allows you to do some pretty powerful searches against what was discussed.For example if you type ‘CSS’ in the search box, you will get a list of all the post regarding CSS. This feature will makes the forum archive a great source of information.
In this CSS tutorial I will not be able to show you everything there is about CSS, but you will learn how to create nice looking CSS styled web pages.After completing this tutorial, you should have enough information to explore CSS and web design even further.
… I know you knew that already, I just wanted to remind you!CSS reduces the number of tags usedBecause of the power of CSS, we will be able to reduce the number of HTML tags we use in a page big time, all the while still being able to layout great looking pages using only 6 types (for lack of better words) of HTML tags.
The tags we will use to layout the content:
The basic page templateGo to the Web Designers Killer Handbook home page and grab the practice HTML page that we will use as the starting template for this tutorial. You can find it under the heading: ‘To create the practice HTML page do the following:’ Follow the instructions there and create your basic HTML page.
Once you have created the template page, create a folder and name it something like: ‘myCSSwebsite’ and then drop the HTML page into it. In that same folder, create a new text document and call it: ‘myCSS.css’. Once created open that file and paste in this template CSS code and then save it:
/* Generic Selectors */
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #333333;
background-color: #F9F9F9;
}
p {
width: 80%;
}
li {
list-style-type: none;
line-height: 150%;
list-style-image: url(../images/arrowSmall.gif);
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #000000;
border-bottom: 1px solid #C6EC8C;
}
/**************** Pseudo classes ****************/
a:link {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}
li :link {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}
a:visited {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}
li a:visited {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
text-decoration: underline;
}
li a:hover {
display: block;
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #C6EC8C;
}
a:active {
color: rgb(255, 0, 102);
font-weight: bold;
}
/************************* ID's *************************/
#navigation {
position: absolute;
width: 210px;
height: 600px;
margin: 0;
margin-top: 50px;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}
#centerDoc {
position: absolute;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}
Don’t let the CSS freak you out, I will explain the important details and you will soon see how easy it really is. One last thing for you to do before I finish this part of the tutorial, we need to add some code to our HTML page.
In between the <body></body> tags you will need to insert this code:
<div id="navigation">
<h2>The Main navigation</h2>
</div>
<div id="centerDoc">
<h1>The Main Heading</h1>
Go to the Web Designers Killer Handbook home page and grab the
practice HTML page that we will used as the starting template for this
tutorial. You can find it under the heading: 'To create the practice HTML
page do the following:'.
Follow the instructions there and create your basic HTML page
... and do it now!</div>
And in between the <head> </head> tags you will need to insert this:
<title>First CSS Tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="myCSS.css" rel="stylesheet" >
With this in place we will be able to start styling our page. If you take a look at the HTML page now you may be surprised to see that we already started!
If you haven’t set the page up yet, please do so to make sure you have everything working thus far. Should you have any problems, go to the Forum and post your questions.
Share In Part 1 we created a classic two-column layout with left side navigation using CSS and only a few types of HTML tags.Part 1 presented the code for the page and explained what HTML tags we were going to use. Now we will look at the actual HTML code used so far and the CSS.
Our page so far is really very simple. As you may already know, all the content (text, images, Flash etc) that the user sees when viewing a web page is marked-up/coded with HTML in-between the <body> and </body> tags*.
In this case we have this:
<div id="navigation">
<h2>The Main navigation</h2>
</div>
<div id="centerDoc">
<h1>The Main Heading</h1>
<p>Go to the Web Designers Killer Handbook home page and grab the practice
HTML page that we will used as the starting template for this tutorial.
You can find it under the heading: 'To create the practice HTML page do
the following:'.
Follow the instructions there and create your basic HTML page ... and
do it now!</p>
</div>
In the above code we see that we have 2 main sections demarked by using <div> tags. As you learned in part one of this tutorial, <div> tags are designed to be used to create a ‘division’ in the document or in other words create a container. We have created two such containers and given them each of them a unique ID:
<div id="navigation">
...
</div>
You will notice that the entire contents of the page are contained in one of these two major page divisions. So the first questions are what are the rules of ID’s in HTML pages and why do we use them and assign them to page elements like DIVs?
And finally I have some <p> tags, and of course I insert the text that makes up this simple page in-between them.
Now I am going to jump to our CSS file that is attached to the HTML page. We attach the CSS document with this line of code in between the <head> </head> tags:
<head>
<link href="myCSS.css" rel="stylesheet" >
</head>
Like a normal page link we have an ‘href’ attribute this time pointing to a CSS document that has all our CSS code that will affect this page since it is linked to it. This is not the only way to associate CSS code to pages (there are a few other ways) but we will leave that to another article. So in the above link we name the CSS file name with this: ‘href=”myCSS.css”‘ and we tell the browser that the link is to a CSS page with this attribute: ‘”text/css”‘. All that is important here is that the link point to a CSS file with the name: ‘myCSS.css’
So now that we got the style sheet linked to the document, lets look at some CSS code. This first snippet of code ’styles’ the unique ID’s we were talking about before:
#navigation {
position: absolute;
width: 210px;
height: 600px;
margin: 0;
margin-top: 0px;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}
#centerDoc {
position: absolute;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}
There is a lot going on here so we will focus on just a few elements for now. In the above elements we have 2 selectors, one for each ID and each selectors are grouped/contained by using the curly brackets: { }. So here is the CSS selectors code with all their guts removed:
#navigation {
/*Look ma no CSS rules!*/
}
#centerDoc {
/*Look ma no CSS rules!*/
}
I just inserted the text: ‘/*Look ma no CSS rules!*/’ to show you where the CSS code would normally be. So now you can see that anything in between the curly brackets is part of one group or package that in CSS can generically be called a selector.
In our above examples you can see that there is some text that appears before a curly bracket. That text gives a name to the selector. So in this case we have two selector names and thus to selectors: #centerDoc and #navigation. So why do we have the # symbol in front of the text? Why can’t we call it simply ‘centerDoc’ and ‘navigation’?
Like HTML and programming certain text in certain places have special meaning that tells the system to do something particular. In this case whenever you have a # symbol in front of a name of a CSS selector we are saying that this selector is a special type of selector called an ‘ID’ selector. What is so special about an ID selector? That type of selector can only be applied to one element in the HTML page. Sounds familiar?
So those of you not asleep at the computer, now see that we have a CSS ID selector for each of our HTML divs that have an ID, and they have the same corresponding names. So the CSS selector #centerDoc applies to the div: ‘<div id=”centerDoc”>’ , you got it? Whatever CSS rules/styles we choose to code into our ID selector will change what appears inside the corresponding div. So for the div with the id of: ‘navigation’ we have these CSS rules:
#navigation {
position: absolute;
width: 210px;
height: 600px;
margin: 0;
margin-top: 0px;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}
Notice at the bottom we say all text will have a font-weight of ‘normal’:
font-weight: normal;
We could just as easily have said that we want all the text to appear in the div (the div with the ID ‘navigation’) bold instead:
font-weight: bold;
But I digress, I already go into detail about CSS in a my previous article on CSS. This tutorial was about creating an easy to use page template so I will point out the 2 main elements that make this thing work.
In our page the navigation div is sitting on the left and it has a border … why? It has a nice light green 1 pixel border because I set this in my CSS:
border-right: 1px solid #C6EC8C;
Pretty self explanatory, no? I would suggest changing the color of the border and changing the pixel thickness of the border and see how it looks.
Why is the navigation sitting on the left of the page while the centerDoc is to the right of it? Well first thing to look at is this line in the navigation selector:
position: absolute;
This tells the browser to just place this div on the page as is. This is oversimplifying the subject, but for our purposes this works for now.
The real magic in this is the CSS code for centerDoc:
#centerDoc {
position: absolute;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 50px;
margin-left: 235x;
}
The line :
padding: 0 0 20px 0; /*top right bottom left*/
Tells the browser to insert 20px (pixels) of padding to the bottom of the div with the ID ‘centerDoc’.
Let’s back up here a second. We just used something called ‘padding’ and it is what it sounds like: Space that is wrapped around our element (tag).
CSS has this feature and concept of a box model that essentially is a box that wraps around HTML elements. This box model consists of: padding, margins, borders and the actual content. This allows us to place a border around elements and space elements in relation to other elements. From the inside out it is ordered like so:
content -> padding -> border -> margin
So in our case anything in between our <div> tags is the ‘content’. Right after that comes the padding. Then there is a border and finally a margin. Margin and padding may seem like the same thing but if you think about it, you can see how being able to control the space before the border (padding) and after the border (margins) can really effect your layouts.
In this example you notice that the navigation div sits higher up on the page than the centerDoc div. This is not because of the order that which they appear in the HTML, as they normally would without CSS, rather it is because of the margin settings I set for each selector; for centerDoc I set the top margin to 50px:
margin-top: 50px;
And for the navigation div I set it to:
margin-top: 0px;
This sets its top margin to 0 pixels so it will therefore be 50 pixels higher than the centerDoc div. I would suggest that you move the position of the navigation div under the center doc div in the HTML just to see if it changes anything, you will see that where the div appears in the actual HTML code has nothing to do with how it will appear to the user now that CSS positioning has been used. Another thing to try is to play with the CSS values and see what happens, change the padding, change the margins etc .
Let’s finish this discussion of CSS in Part 3.
1. There is more HTML that appears on top of the first <body> tag that is very important to the page but does not actually directly have anything to do with what appears in the page (from the users perspective) so I won’t discuss it in this article.Share In part 2 of the tutorial we broke down the major sections of HTML on the page and established separation using DIV tags with unique ID’s attached to them:<div id="navigation"> ...</div>
<div id="centerDoc"> ...</div>
Using DIV’s (to position the major page sections) is the alternate method to what most people use: tables. I would argue one method is not necessarily better than the other. But consider that CSS in the ‘official’ method to position page elements and tables should only be used to hold tabular data.
On the other hand there are simply times when using tables is much easier and CSS just doesn’t cut it.
That said, our current layout (left or right side navigation) CSS is far easier to use and is an overall better solution.
Now that we have that covered, everything gets really easy from here. We’ve established our main document and the major sections are in place, all we need to do is add our text and images.
Breaking down the page:
This page is simple, we have just a single heading:
<h1>The Main Heading</h1>
And a single paragraph:
Go to the Web Designers Killer Handbook home page and grab the practice
HTML page that we will used as the starting template for this tutorial. You
can find it under the heading: 'To create the practice HTML page do the
following:'. Follow the instructions there and create your basic HTML page
... and do it now!
We define how the paragraphs and the headings will look in our CSS code:
p {
width: 80%;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}
This is pretty much self-explanatory. The only thing that should be mentioned is that we set the width of the <p> tags to 80%. This allows us to control all of our text width in one easy to edit spot.
The only thing missing from the page is the actual navigation. The best and easiest way to do this, is by using list (<li>) tags. That makes sense, since navigational menus are essentially a list of pages.
We styled the list item tags with this CSS:
li {
list-style-type: none;
line-height: 150%;
list-style-image: url(../images/arrowSmall.gif);
}
The above code uses an image as the bullets for the list and makes the space between the listed items 1 and ½ times larger than normal (I like a little more ‘breathing room’). You don’t have to have an image for the bullets, you could leave it with no images and no bullets by just removing the attribute:
list-style-image: url(../images/arrowSmall.gif);
Or you could use one of the built in bullet options: ‘disc’, ‘circle’ and ’square’.
Next you should add to the HTML page an unordered list (<ul></ul>) in between the navigation DIV’s just under the ‘main navigation’ heading:
<h2>The Main navigation</h2>
<ul>
<li><a href="cssTutorialPage1.htm">Page One</a></li>
<li><a href="cssTutorialPage2.htm">Page Two</a></li>
</ul>
To make things easier (for the purpose of the article), change the CSS affecting the list item tags (<li>) so that we use a built in bullet:
li {
list-style-type: disc;
line-height: 150%;
}
Now we have the navigation!
That pretty much covers our goals for this tutorial, but we have just scratched the surface of CSS. As you can see, we created a nice looking page, while using very few types of HTML tags. At this time there isn’t much text on the page, but we could add to the page easily, building it out to include lots of information and images with practically no HTML work at all!Share
Inserting images with CSSThis article assumes that you know at least basic HTML; you know what a tag is and how to use simple tags like the <img> or the <p> tag. If this is confusing you, you need to read my tutorial for total beginners on web design – it’s really easy and people seem to like it, so give it go!
Ok, I assume that everyone knows what images are, as we all have seen images on web pages. Images are not technically inserted into a web page (to be nerd precise), rather images are linked to web pages and typically we use the image tag (<img>) to create holding space (or a reference to the image) for the image.
When someone loads a web page (by going to the URL), it is the browser, at that moment, that actually gets the image from the web server and inserts it into the page for you to see – makes sense?
This is different from using a program like MS Word for example, where with Word, when you insert an image into a Word document, the image actually becomes ‘part’ of the actual document. When you save a Word file, all you need to keep track of is that one Word file, and you know the images you inserted will be there when you open it again no matter where you move the file.
Where as with an HTML page, since you are only referencing the images with the image tag, you have to make sure that the images you are linking to always stay in the same spot in relation to the web page. When people mess up that path between the HTML page and the images it is referencing, you get that broken link icon that everyone loves to see. You are seeing that broken link icon because the browser can’t find the image you are referencing in the <img> tag.
Ok, if you didn’t know much about the mechanics of images loading in web pages, now you know too much! Lets move to something practical.
Using CSS to insert images into your web pagesThis next part is really easy to understand, easy to use and can be very powerful – triple bonus! With CSS, all block-level and inline elements (tags) can have background images inserted into them. block-level tags are <p> and <div>.
Even though you can insert images into any type of tag (block-level or inline), I think it is better form in most situations to use block-level tags for this sort of thing. But in reality it doesn’t matter if you use block-level tags, or inline tags because you can turn any tag into a block-level tag and vice versa; with this simple CSS code I change any tag to block-level:
display: block;
Or the reverse:
display: inline;
So what? Remember my newsletter where I talked about inserting backgrounds with CSS? In the same way you can insert images in the backgrounds of your web pages, you can do it with any other element. This combined with some extra padding and you have your headline image where you want it.
Take a look at this code where I use this technique:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS image placement</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style media="screen">
#headline1 {
background-image: url(images/newsletter_headline1.gif);
background-repeat: no-repeat;
background-position: left top;
padding-top:68px;
margin-bottom:50px;
}
#headline2 {
background-image: url(images/newsletter_headline2.gif);
background-repeat: no-repeat;
background-position: left top;
padding-top:68px;
}
</style>
</head>
<body>
<div id="headline1">Some text … </div>
<div id="headline2">Some more text .. </div>
</body>
</html>
To keep this example easy to follow, I inserted the CSS code into the web page itself. Typically I would place my CSS code in a separate CSS file and link to it so that I could reuse the CSS code on many pages.
In the above CSS code you will notice that I insert a background image for each ID (headline1 and headline2) and I increase the padding at the top (padding-top:68px) to push down the text to make space for the background images.
This may seem unclear now, so just take a look at the page and then pop open the source code and check it out for yourself. Feel free to take a copy and play with the padding number and see how it changes things. Why did I add 68px to the padding? The image is 68px tall, but I could put any number I like to get the placement I want. Padding does not affect the background image; it only affects the contents inside the tag/element. In this case I used <div> tags.Share The 3 ways to insert CSS into your web pagesFor some of you, this may sound like a real lame article. But you ought to give it a chance because I don’t write about stuff you’ll never use! I avoid marginal, nerd centric ivory tower blather like a cat avoids water.
I’ve read hundreds (sadly, this is true) of those 2-inch thick nerd books (I don’t get out much) and I can’t stand it when people waste paper on that kind of generally useless stuff. So read on, eager student, and you will be well on your way to building your own killer web sites!
The wise people who created CSS came up with 3 basic ways for you to use CSS in your web pages:
1. With an external file that you link to in your web page:<link href="myCSSfile.css" rel="stylesheet" >
or using the import method:
<style media="all">
@import "myCSSfile.css";
</style>
Why use the import method versus the link method when using external style sheets? Use the import method if you want to support really old browsers like Netscape 4.0.
Let me explain: Netscape can’t handle most CSS beyond font settings and colors, if it finds any other types of CSS it could cause good old Netscape 4 to crash in some occasions or at the very least mangle your page.
Netscape 4 does not understand the @import method of linking to a style sheet like the newer browsers can, so Netscape just ignores it. You can use this to hide the fancy CCS code in the external style sheet by using the @import method so all the good browsers can reference it while keeping Netscape 4 out of the picture.
Netscape 4.0 is pretty much dead (that is really a good thing) so I personally don’t worry much about it. But for some of you, it may be of concern so I thought it should be mentioned.
2. By creating a CSS block in the web page itself; typically inserted at the top of the web page in between the <head> and </head> tags:<head>
<style >
p { padding-bottom: 12px; }
</style>
</head>
3. By inserting the CSS code right on the tag itself:<p >Your Text</p>
So some of you may be asking why have the 3 methods of including the CSS in a web page? The answer is: flexibility and laziness! Ok I’m kidding about the laziness, replace it with ‘precision’. So what the heck does that mean?
I think the easiest way to explain to you what’s going on, is by giving you real examples that demonstrate the differences. Wait a second, don’t fall asleep … the examples are short and I think that once you finish, you will see how easy it really is!
Another reason that you want to continue reading this article is that you will gain a good understanding of some fundamental (and practical) CSS principles – remember that the difference between people who are really good at what they do, and those who are not so good, is in the mastery of the basics. Lets get down on it!
Method 1: Create a separate CSS file and link it to your web page(s)The heading for this part of the article hints at why you would want to go through the trouble of creating a separate CSS file instead of just typing in the CSS code in the web page itself. Can you guess? Keep trying … times up! Did you get it? I could quote you some nerd centric description that describes the advantage; the problem is that only nerds who already know would understand!
In a nutshell: by keeping the CSS code in its own file, you can link that CSS file to as many web pages as you want. This has two major advantages:
The rule: If you are going to have more than one web page with the same stylistic properties (that look the same in some way) you should create a separate CSS file and link your web pages to it.
Method 2: Create a CSS block in the web page itselfThe Rule: Use this method if you want to override the CSS you have in a linked CSS file or if you only have a one-page web site.
Now that we covered the first method of putting all your CSS code in a separate file and linking to it, the other methods are easy to describe.
CSS stands for (is the acronym for): ‘Cascading Style Sheets.’ I think the words ’style sheets’ in CSS are self-describing … we know what ’style’ in style sheets mean. But what is the meaning of ‘cascading’ in CSS?
The cascading effect in CSSThe word ‘cascading’ in CSS describes a cascading mechanism; that is to say that the CSS code on the page itself will override the CSS code in a separate linked file. And subsequently, CSS declared ‘inline’ on the tag itself would override all other CSS.
So let’s look a practical example; let’s say you have a web site with 50 pages where the layout and fonts are the same on all 50 pages. Wisely you put the CSS information that sets the layout and font choices in a separate style sheet, but for a particular page you need to change the color of some of the text and add a border around a paragraph. This is a perfect example where you might want to place a little CSS in the page itself since the color and border will be unique to that page. Is this all sinking in?
Other
Centering Text with CSSShare Centering text and other elements can easily be done with the CSS text-align property. It can be applied to a division, the p tag – pretty much any block-level element.
Applying this to an internal or external stylesheet:
p {text-align: center;}
or this to inline styling:
<p >This is centered text</p>
will center your text.
The CSS Overflow Propert By default, elements in a website will expand to make room for whatever they contain. An empty division, for example, won’t show at all, but you can add 1 or 12 (whatever) paragraphs, and the division will be as big as it needs to be so everything inside is displayed.
But what happens if the dimensions of an element – let’s use a division for this demonstration – are set?
This division is set at a height and width of 100 and 200 pixel, respectively, and it has a colored background to display its dimension.The code that creates this looks like this:
<div >
<p>This division is set at a height and width of 100 and 200 pixel,
respectively, and it has a colored background to display its dimension.
</p></div>
In this example, overflow is no issue, there is nothing here to overflow. But what happens, if I add more content than this little box can hold?
Es war einmal ein kleines süßes Mädchen, das hatte jedermann lieb, der es nur ansah, am allerliebsten aber ihre Großmutter, die wußte gar nicht, was sie alles dem Kinde geben sollte. Einmal schenkte sie ihm ein Käppchen von rotem Sammet, und weil ihm das so wohl stand und es nichts anders mehr tragen wollte, hieß es nur das Rotkäppchen.My cup overfloweth! And this is where the overflow property comes into play. As you see, there is no overflow property applied to the above.
My cup overfloweth! And this is where the overflow property comes into play. As you see, there is no overflow property applied to the above.
My cup overfloweth! And this is where the overflow property comes into play. As you see, there is no overflow property applied to the above.
Geesh, I had to say that three times just to clear my overflow so one can actually read what is written. But it makes the point nicely – If you stick more content into a container than it can hold, you have a problem!
This is where the overflow property comes into play. As you see, there is no overflow property applied to the above, but the division is responding to the default, which is
div {overflow: visible; }
So I need to decide what to do with this overflow. One option is to hide it by applying ‘overflow: hidden’ to the CSS. In an internal or external stylesheet, the styling for our example division would then look like this:
div {
height: 100px;
width: 200px;
background: #EDEDED;
overflow: hidden;
}
And as we look at the result of this, it’s easy to realize what kind of problem we now have:
Es war einmal ein kleines süßes Mädchen, das hatte jedermann lieb, der es nur ansah, am allerliebsten aber ihre Großmutter, die wußte gar nicht, was sie alles dem Kinde geben sollte. Einmal schenkte sie ihm ein Käppchen von rotem Sammet, und weil ihm das so wohl stand und es nichts anders mehr tragen wollte, hieß es nur das Rotkäppchen.Obviously, this creates a whole new issue: Now, part of the text has disappeared, and unless folks look at the source – and who, with the exception of us geeks, would do that??? – they will never know what else you had to say.
Good news is that in addition to ‘visible’ and ‘hidden’, which we explored above, there are two additional values to chose from: ’scroll’ and ‘auto’. ‘Scroll’ will create a horizontal AND a vertical scrollbar to the box, whether one is needed or not.
This division is set at a height and width of 100 and 200 pixel, respectively.That doesn’t make much sense. Why put a scrollbar if there’s nothing to scroll to? But if you think that you would know, as you design your site, if your content will fit into its element or not, you are not 100% correct. Things may or may not fit when YOU look at them, but you can never be sure exactly how all the folks visiting have their settings adjusted and how things look to them. With that in mind
div {overflow: auto;}
is the perfect solution. A srollbar will appear if one is needed:
Es war einmal ein kleines süßes Mädchen, das hatte jedermann lieb, der es nur ansah, am allerliebsten aber ihre Großmutter, die wußte gar nicht, was sie alles dem Kinde geben sollte. Einmal schenkte sie ihm ein Käppchen von rotem Sammet, und weil ihm das so wohl stand und es nichts anders mehr tragen wollte, hieß es nur das Rotkäppchen.And not, if it’s not needed:
This division is set at a height and width of 100 and 200 pixel, respectively.
Styling a Horizontal Rule with CSSShare A quick and easy way to insert a dividing line into a website is with a horizontal rule, the hr tag.
This horizontal rule
was created by the following inline CSS:
<hr >
It could also be styled in your internal or external stylesheet (which is usually the better approach):
hr {
color: #f00;
background: #f00;
width: 75%;
height: 5px;
Styling iframes with CSSShare If you still haven’t heard, hear it now: FRAMES ARE DEAD – well, technically, they are more like the undead – the zombies of webdesign. They should be gone and forgotten but refuse to stay buried. It’s much better not to use them.
However, there may be a situation, where inserting a separate html document into your page makes sense. And there’s an app for that: Iframes (aka inline frames). This code inserts a basic page into an html page:
<iframe src="http://www.killersites.com/">
<p>Your browser does not support iframes.</p>
</iframe>
At this point, there is absolutely no styling applied to the iframe, and it looks like this. Note the line regarding lack of browser support. Iframes are supported by all the major browsers, but it’s a good idea to add this for the odd browser that doesn’t.
While I am a strong supporter of using the HTML strict doctype and writing validating, standard-compliant code – iframes will not validate, which leaves us with two options: Either suck up the iframe-related validation errors or switch to HTML transitional doctype for the pages with iframes.
CSS gives you the power to dress your iframe up a bit. The following attributes are available:
<iframe src="http://www.killersites.com"
name="Killersites.com" height="400px" width="700px"
frameborder="0" marginheight="20" marginwidth="35"
scrolling="auto">
<p>Your browser does not support iframes.</p>
</iframe>
Gives you that. And if you add a bit more CSS to the frame itself:
iframe {
margin-left: 95px;
}
All Caps with CSSShare While text in general is hard to read when written in all caps – and considered the electronic version of yelling – using CAPS for emphasize is a handy tool.
Headers are a place where capitalization is frequently used. And to assure that your header is displayed uniformly throughout the site without having to worry about actually writing in all caps, just use CSS:
h1 {
text-transform: uppercase;
}
With this, everything that has the h1 tag applied, will appear in all caps.
Another interesting text-transformation property is "capitalize"
h1 {text-transform: capitalize;
}
With this, all your words will begin with a capital letter!Multiple Background Images with CSSShare At times, it makes more sense to use background images than to insert them directly into the page. And while each element – like your body tag – can hold only one background image, they can be applied to several elements.
But pretty much every selector can hold a background image. On THIS PAGE, I have added the image to the html tag, the body tag, and the h1 and h2 tags (these are ’selectors’) – like so:
body {
background: url(bgimage.jpg) repeat-y right;
}
html {
background: url(bgimage.jpg) repeat-y left;
}
h1 {
background: url(bgimage.jpg) no-repeat right;
}
h2 {
background: url(bgimage.jpg) no-repeat left #ffc;
padding-left: 250px;
height: 150px;
}
#wrapper {
padding: 0 250px;
/*I'm using the right and left padding of the wrapper to keep
the content off the images */
}
Note that I’m a bit lazy at the moment, and am using the same image for all four selectors. Taking a closer look at each of them, also shows a bit more how things work:
The html tag (image displayed on the left) repeats the flower all the way down the monitor, regardless of how much content there is. Resize your window and see what happens.
The body tag, where the image is displayed to the right, only shows the image as far as the content goes.
The h1 tag only shows as much of the image as the space its content is taking up.
The h2 tag also has some height added to it (exactly 150px, the height of the background image), so it does show the entire image. I’ve also added the background color to more clearly demonstrate the space that’s taken up by h2.
Styling Lists with CSSShare We’ve already discussed navigation lists and list bullet images, but sometimes, a list is just a list. There are two types – the ordered list and the unordered list. The ordered list counts the items; the unordered list marks the individual items with bullets or other markers. The HTML is simple.
<ol>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ol>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
And, without any styling applied at all, that looks Like This.
We can affect the list item markers with some simple CSS and the list-style-property controls those. For unordered lists, we can chose between ul styles: disc, square, circle, or none – which looks like this, or between ol styles: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, upper-greek, lower-latin, upper-latin, armenian, or georgian, which looks like that.
Other than that, we can style the ul tag and the li tag. Anything added to the ul tag, affects the entire list, where properties applied to the li tag will affect the individual list items. So this CSS
ul {
background: #ffe566;
padding: 25px;
}
ol {
background: #828772;
padding: 15px;
}
ul li {
background: #fc6;
margin: 5px;
}
ol li {
background: #9cc;
padding: 10px;
margin-left: 35px;
}
Image Borders with CSSShare Sometimes, a website design benefits when images have frames – or borders. One way to get them is one image at a time, using a graphics program. But there is a much faster way – with CSS!
This code:
<img src="image.jpg" width="350px" height="262px"
alt="Rusty Stove in Luckenbach, Texas">
inserts a plain image into your page:
And if we add this to our CSS:
img {
border-color: #7d6b72;
border-style: solid;
border-width: 5px;
}
Then our image appears like this:
Actually, I would use shortcuts and write my CSS like this:
img {
border: 5px solid #7d6b72;
}
3-Column, Fixed Width Layout with CSSShare The three-column layout is probably the second most common layout used for websites. There’s usually a header and a footer – and then some content, maybe a sidebar for navigation, a column in the middle with some content info, and another column with some additional stuff, whatever that may be. What you put inside your columns doesn’t matter – the way to achieve the 3-column layout stays the same.
So let’s start with our basic HTML to put all the parts on paper — or in our case, on line. This is the basic outline of what’s between the body tags:
<div id="wrapper">
<div id="header"></div>
<div id="column-left"></div>
<div id="column-center"></div>
<div id="column-right"></div>
<div id="footer"></div>
</div>
For the entire HTML code – to include some filler content – see Basic HTML – No Styling. To see the code of the example page, just right-click and chose “View Source” from the drop-down. Most browsers offer that feature.
And of course what we get, is NOT a 3-column layout. It’s just one division on top of the next. That’s because we haven’t gotten to the ‘with CSS’ part of the title of this post yet. So let’s already!!
First, and just to make things easier to see, I will apply the fixed width and center my page. Here’s a post with the finer details Center-aligning a Website right here already. Here is the CSS that does that:
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 980px;
background: silver;
margin: 0 auto;
}
#header {
background: black;
color: white;
}
#column-left {
background: red;
}
#column-center {
background: yellow;
}
#column-right {
background: purple;
}
#footer {
background: green;
}
(Please note that you should really be using hex or rbg color codes, but for the purpose of this demonstration, color names are just easier to deal with.)
And it looks Like This. Now we just have to get our columns to act like columns and line up next to each other. There are different ways to do this, but I prefer to just float them all. So we’ll give them all a width and add float: left; to our three columns:
#column-left {
width: 250px;
float: left;
background: red;
}
#column-center {
width: 480px;
float: left;
background: yellow;
}
#column-right {
width: 250px;
float: left;
background: purple;
}
At this point, it’s important to be aware of a special characteristic of floats – I picture them as balloons – they float above our heads, without taking up any actual space among us. So just as you can place a box under a balloon without the two affecting each other’s space, our footer will act like the floated divisions are not even there, and line itself up neatly right under the header – where we do NOT want it to be. So we have to give the footer a special set of instructions:
#footer {
clear: both;
background: green;
}
Adding Comments to CSSShare Comments in a stylesheet are a good idea. Often, things that are obvious as you write them, make no sense a week or even years later – or to somebody else. So it can be very helpful to include explanations. However, we don’t want to browser to read and render those, as they are not meant to be displayed on the webpage, so we have to hide them.
/*
This is a HIDDEN Comment!
*/
That’s all it takes – a ‘/*’ to start, and a ‘*/’ to end. A few handy applications for these hidden comments are:
h1 {
color: #000000; /* black - because I forget */
font-size: 2em;
}
Another handy use for the comments are to help define the structure, so things are easier to find:
/* ----------------- Generic Styles ------------------ */
.alignleft { float: left;}
.alignright { float: right;}
.clear { clear: both;}
p { margin: 0 15px 10px;}
h1, h2, h3 {
font-family: Baskerville, Garamond, Palatino, "Palatino Linotype", "Hoefler Text", "Times New Roman", serif;
}
h2, h2 {
margin: 25px 20px 5px;
color: #9e6548;
font-size: 2em;
}
h3 {
margin: 25px 0 5px;
padding: 5px 25px;
background: #9e6548;
color: #f7efe3;
}
ul { margin-bottom: 25px; }
/* ----------------- The Header -------------- */
#header {
background: url(pics/stove.jpg) #f7efe3 no-repeat top right;
height: 200px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
#header h1 {
color: #9e6548;
font-size: 3em;
padding: 35px 25px 0;
}
/* ------------- Top Navigation ------------------- */
#topnav {
background: url(pics/nav.png) repeat-x;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold;
width: 679px;
height: 45px;
top: 55px;
position: relative;
padding-top: 13px;
}
#topnav li {
display: inline;
margin: 15px;
}
/* ------------ content -------------- */
#content, #contentPage, #indexPage {
float: left;
width: 635px;
padding: 35px;
}
#contentPage h2, #search h2 {
margin-top: 0;
margin-bottom: 0;
}
#contentPage h3, #search h3 {
margin-bottom: 10px;
}
/* ----------- Sidebar ---------------- */
#sidebar {
width: 205px;
background: #9e6548;
float: right;
margin: 12px 0;
color: #f7efe3;
padding: 20px 10px;
}
#sidebar h1, #sidebar h2 {
font-size: 1.4em;
margin: 25px 5px 5px;
color: #f7efe3;
}
/* ------------- footer ----------------------- */
#footer {
clear: both;
height: 40px;
font-size: .8em;
background: #9e6548;
color: #f7efe3;
text-align: center;
}
#footer p {
padding-top: 14px;
}
Margins and Paddingmargin and padding are the two most commonly used properties for spacing-out elements. A margin is the space outside of the element, whereas padding is the space inside the element.
HTML Dog, The Book HTML Dog is hosted by Titan Internet Change the CSS code for h2 to the following:
h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 1em;
padding: 3em;
}
You will see that this leaves one-character width space around the secondary header and the header itself is fat from the three-character width padding.
The four sides of an element can also be set individually. margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left are the self-explanatory properties you can use.
The Box ModelMargins, padding and borders (see next page) are all part of what's known as the Box Model. The Box Model works like this: in the middle you have the content area (let's say an image), surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin. It can be visually represented like this:
Margin box Border box Padding box Element box You don't have to use all of these, but it can be helpful to remember that the box model can be applied to every element on the page, and that's a powerful thing!
An example of a style change would be to make words bold. In standard HTML you would use the <b> tag like so:
<b>make me bold</b>
This works fine, and there is nothing wrong with it per se, except that now if you wanted to say change all your text that you initially made bold to underlined, you would have to go to every spot in the page and change the tag.
Another disadvantage can be found in this example: say you wanted to make the above text bold, make the font style Verdana and change its color to red, you would need a lot of code wrapped around the text:
<font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif">
<strong>This is text</strong></font>
This is verbose and contributes to making your HTML messy. With CSS, you can create a custom style elsewhere and set all its properties, give it a unique name and then ‘tag’ your HTML to apply these stylistic properties:
<p>My CSS styled text</p>
And in between the tags at the top of your web page you would insert this CSS code that defines the style we just applied:
<style >
.myNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
</style>
In the above example we embed the css code directly into the page itself. This is fine for smaller projects or in situations where the styles you’re defining will only be used in a single page. There are many times when you will be applying your styles to many pages and it would be a hassle to have to copy and paste your CSS code into each page.
Besides the fact that you will be cluttering up your pages with the same CSS code, you also find yourself having to edit each of these pages if you want to make a style change. Like with JavaScript, you can define/create your CSS styles in a separate file and then link it to the page you want to apply the code to:
<link href="myFirstStyleSheet.css" rel="stylesheet" >
The above line of code links your external style sheet called ‘myFirstStyleSheet.css’ to the HTML document. You place this code in between the <head> </head> tags in your web page.How to create a linked external stylesheetTo create an external style sheet all you need to do is create a simple text document (on windows you simply right-click and select new -> text document) and then change the file from type .txt to .css.
You can change the file type by just changing the file’s extension. The file’s extension on windows tells the computer what kind of file it is and allows the computer to determine how to handle the file when for example you try to open it.
You probably guessed it; CSS files are just specially formatted text files, and much in the same way HTML pages are. There is nothing special or different in the file itself, rather it is the contents of the file that make an HTML document and a CSS page what they are.
When working with a external CSS document, there are a couple of points to remember:
1. You don’t add these tags in the CSS page itself as you would if you embedded the CSS code in your HTML:
<style ></style>
Since the CSS link in your web page says that you are linking to a CSS page, you don’t need to declare (in the external CSS file) that the code in the CSS page is CSS. That is what the above tags do. Instead you would just add your CSS code directly to the page like so:
.myNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
.my2ndNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
.my3rdNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
color: #FF0000;
}
In the above example I have created a series CSS classes that can be applied to any HTML tag like so:
<p>My CSS styled text</p>
or
<h2 ”my3rdNewStyle”>My CSS styled text</h2>
You will notice that in the above example I applied a CSS style to a <h2> tag. Normally this tag sets the size of the text that it wraps to a size that is preset in the browser (ex: 10 pixels).
When you apply a CSS class to it, the CSS code overrides the default size that you would normally get with an <h2> tag in favor of the size specified in the CSS class. So now you can see that CSS can override default HTML tag behavior!
In the above examples, I have CSS code where I define my CSS classes and then ‘apply’ them to various elements in the page. Another way to apply CSS is to globally redefine an HTML tag to look a certain way:
h1 { font-family: Garamond, "Times New Roman", serif; font-size: 200%; }
What this CSS code does is set the font style and size of all <h1> tags in one shot. Now you don’t have to apply a CSS class as we did before to any <h1> tags since they are automatically all affected by the CSS style rules.
Here is another example of where I give the whole page bigger margins:
body { margin-left: 15%; margin-right: 15%; }
As you can see, you can redefine any tag and change the way it looks! This can be very powerful:
div {
background: rgb(204,204,255);
padding: 0.5em;
border: 1px solid #000000;
}
The above CSS code sets that any <div></div> tag will now have a background color of ‘rgb(204,204,255)’ and have a padding of 0.5em and a thin 1 pixel border that is solid black.
A few things to explain about the above:
Color in CSS can be expressed in a few ways:
- In Hex -> for example: #000000 – this is black and this: #FF0000 is red.
- In rgb -> rgb(204,204,255) is a light purple blue color.
- With named colors like: ‘red’ or ‘blue’
div {
background: green;
padding: 0.5em;
border: 1px solid #FF0000;
}
So instead of ‘rgb(204,204,255)’ , I just specified ‘green’.
By using RGB (RGB is the acronym for: ‘Red Green Blue’) and Hex color, you can really get the exact color you want easily when you know your codes. Luckily many programs (like Dreamweaver) provide easy to use color pickers for you so you don’t need to know the values for the code.
In this last example I will show you the ‘super cool’ CSS code that allows you to create link roll-over affects without images:
a:link { color: rgb(0, 0, 153) }
a:visited { color: rgb(153, 0, 153) }
a:hover { color: rgb(0, 96, 255) }
a:active { color: rgb(255, 0, 102) }
The above CSS will cause your links to change color when someone hovers their mouse pointer over it, instant rollovers with no images! One important note with the above code, is that it is important that the style declarations be in the right order:
“link-visited-hover-active”,
… otherwise it may break in some browsers.
CSS is very powerful and allows you to do things that you can’t do with standard HTML. It is supported nicely now in all the modern browsers and is a must learn tool for web designers.
The above examples are just a small sample of what you can do with CSS, but it should be more than enough for you to start styling your pages nicely.
Like with many technologies CSS has a lot of capability that most people will not need to use often, if at all. So don’t get caught in the trap of thinking that if there is some functionality/feature available that you have to use it.
BTW: The killersites forum has a search engine that allows you to do some pretty powerful searches against what was discussed.For example if you type ‘CSS’ in the search box, you will get a list of all the post regarding CSS. This feature will makes the forum archive a great source of information.
In this CSS tutorial I will not be able to show you everything there is about CSS, but you will learn how to create nice looking CSS styled web pages.After completing this tutorial, you should have enough information to explore CSS and web design even further.
- You can download the CSS and HTML files we build in this tutorial: CSS files
- You can check out what the page should look like here: CSS example page
- make text bold.
- position things a page.
- set the font style for a page or paragraph etc.
… I know you knew that already, I just wanted to remind you!CSS reduces the number of tags usedBecause of the power of CSS, we will be able to reduce the number of HTML tags we use in a page big time, all the while still being able to layout great looking pages using only 6 types (for lack of better words) of HTML tags.
The tags we will use to layout the content:
- <h> The Heading tags which range from ‘<h1></h1>’ to ‘<h6></h6>’, are going to be used to mark/tag headings in our pages. So the most important heading will be wrapped in a <h1> tag and the least important in a <h6> tag.
An example of a heading:
<h1><strong>CSS Template Layout</strong></h1>
This tells the browsers and the search engines too, that this page is primarily about: ‘CSS Template Layout’
All browsers have a default size (for each<h> tag) as to how it renders text when placed between these tags. Many of these defaults can be unusable (especially<h1>) because they come out too big. But never fear, CSS is here. We will use CSS to make the text sizes more to our liking. - <p> The Paragraph tag is used to mark parts of the pages as being ‘paragraphs’, simple enough. Paragraph tags are what they call a ‘block element’; that means that it acts like a block where a space is automatically inserted before and after each <p> tag pair. You see it work in the examples coming up.
- <ul> and <ol> List tags will be used to create our menus. The tag <ul> is the ‘un-ordered list tag’ that creates a list with bullets or other images/icons that do not specify or denote an order; hence the term ‘un-ordered’. The other list tag mentioned (<ol>) is the ‘ordered list tag’ and it creates a list that, instead of bullets, the list elements are marked with numbers or letters. Code examples to follow.
- <div> We all know what the <div> tag is about since we all read the previous article, right? We will use div’s to create containers for parts of our page. One div will be used to ‘hold’ our navigational menu and another div to ‘hold’ the main page.
- <a href> The most important tag in HTML: the ‘link tag’ or the ‘hyperlink tag’. This makes text ‘hyper’ so that when we click on it we can load another page or activate/call some JavaScript (otherwise known as ECMA script).
- <img> This is the ‘image tag’, allows you to link to images so that they show up in our pages. In HTML images are not embedded into the actual page, instead the image tag (<img>) only points to where the image is and the browser will attempt to load that image when a surfer loads your HTML page.
The basic page templateGo to the Web Designers Killer Handbook home page and grab the practice HTML page that we will use as the starting template for this tutorial. You can find it under the heading: ‘To create the practice HTML page do the following:’ Follow the instructions there and create your basic HTML page.
Once you have created the template page, create a folder and name it something like: ‘myCSSwebsite’ and then drop the HTML page into it. In that same folder, create a new text document and call it: ‘myCSS.css’. Once created open that file and paste in this template CSS code and then save it:
/* Generic Selectors */
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #333333;
background-color: #F9F9F9;
}
p {
width: 80%;
}
li {
list-style-type: none;
line-height: 150%;
list-style-image: url(../images/arrowSmall.gif);
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #000000;
border-bottom: 1px solid #C6EC8C;
}
/**************** Pseudo classes ****************/
a:link {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}
li :link {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}
a:visited {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}
li a:visited {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
text-decoration: underline;
}
li a:hover {
display: block;
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #C6EC8C;
}
a:active {
color: rgb(255, 0, 102);
font-weight: bold;
}
/************************* ID's *************************/
#navigation {
position: absolute;
width: 210px;
height: 600px;
margin: 0;
margin-top: 50px;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}
#centerDoc {
position: absolute;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}
Don’t let the CSS freak you out, I will explain the important details and you will soon see how easy it really is. One last thing for you to do before I finish this part of the tutorial, we need to add some code to our HTML page.
In between the <body></body> tags you will need to insert this code:
<div id="navigation">
<h2>The Main navigation</h2>
</div>
<div id="centerDoc">
<h1>The Main Heading</h1>
Go to the Web Designers Killer Handbook home page and grab the
practice HTML page that we will used as the starting template for this
tutorial. You can find it under the heading: 'To create the practice HTML
page do the following:'.
Follow the instructions there and create your basic HTML page
... and do it now!</div>
And in between the <head> </head> tags you will need to insert this:
<title>First CSS Tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="myCSS.css" rel="stylesheet" >
With this in place we will be able to start styling our page. If you take a look at the HTML page now you may be surprised to see that we already started!
If you haven’t set the page up yet, please do so to make sure you have everything working thus far. Should you have any problems, go to the Forum and post your questions.
Share In Part 1 we created a classic two-column layout with left side navigation using CSS and only a few types of HTML tags.Part 1 presented the code for the page and explained what HTML tags we were going to use. Now we will look at the actual HTML code used so far and the CSS.
Our page so far is really very simple. As you may already know, all the content (text, images, Flash etc) that the user sees when viewing a web page is marked-up/coded with HTML in-between the <body> and </body> tags*.
In this case we have this:
<div id="navigation">
<h2>The Main navigation</h2>
</div>
<div id="centerDoc">
<h1>The Main Heading</h1>
<p>Go to the Web Designers Killer Handbook home page and grab the practice
HTML page that we will used as the starting template for this tutorial.
You can find it under the heading: 'To create the practice HTML page do
the following:'.
Follow the instructions there and create your basic HTML page ... and
do it now!</p>
</div>
In the above code we see that we have 2 main sections demarked by using <div> tags. As you learned in part one of this tutorial, <div> tags are designed to be used to create a ‘division’ in the document or in other words create a container. We have created two such containers and given them each of them a unique ID:
<div id="navigation">
...
</div>
You will notice that the entire contents of the page are contained in one of these two major page divisions. So the first questions are what are the rules of ID’s in HTML pages and why do we use them and assign them to page elements like DIVs?
- First of all you can assign ID’s to any HTML tag. So I could have assigned an ID to a <p> tag as well.
- An ID in a page should only be used once. That is to say that no two elements should have the same ID. ID’s are meant to uniquely identify a page element. So in the above example we know that there is only one page element with an ID of ‘navigation’ and only page element with an ID of ‘centerDoc’. I like to use ID names that talk to you, it is pretty clear what is going on in each division we created above.
- ID’s on HTML page elements (tags) are used in CSS. We can target ID’s in our CSS code to change the appearance, position and even behavior of that element by referencing the ID of the element.
And finally I have some <p> tags, and of course I insert the text that makes up this simple page in-between them.
Now I am going to jump to our CSS file that is attached to the HTML page. We attach the CSS document with this line of code in between the <head> </head> tags:
<head>
<link href="myCSS.css" rel="stylesheet" >
</head>
Like a normal page link we have an ‘href’ attribute this time pointing to a CSS document that has all our CSS code that will affect this page since it is linked to it. This is not the only way to associate CSS code to pages (there are a few other ways) but we will leave that to another article. So in the above link we name the CSS file name with this: ‘href=”myCSS.css”‘ and we tell the browser that the link is to a CSS page with this attribute: ‘”text/css”‘. All that is important here is that the link point to a CSS file with the name: ‘myCSS.css’
So now that we got the style sheet linked to the document, lets look at some CSS code. This first snippet of code ’styles’ the unique ID’s we were talking about before:
#navigation {
position: absolute;
width: 210px;
height: 600px;
margin: 0;
margin-top: 0px;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}
#centerDoc {
position: absolute;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}
There is a lot going on here so we will focus on just a few elements for now. In the above elements we have 2 selectors, one for each ID and each selectors are grouped/contained by using the curly brackets: { }. So here is the CSS selectors code with all their guts removed:
#navigation {
/*Look ma no CSS rules!*/
}
#centerDoc {
/*Look ma no CSS rules!*/
}
I just inserted the text: ‘/*Look ma no CSS rules!*/’ to show you where the CSS code would normally be. So now you can see that anything in between the curly brackets is part of one group or package that in CSS can generically be called a selector.
In our above examples you can see that there is some text that appears before a curly bracket. That text gives a name to the selector. So in this case we have two selector names and thus to selectors: #centerDoc and #navigation. So why do we have the # symbol in front of the text? Why can’t we call it simply ‘centerDoc’ and ‘navigation’?
Like HTML and programming certain text in certain places have special meaning that tells the system to do something particular. In this case whenever you have a # symbol in front of a name of a CSS selector we are saying that this selector is a special type of selector called an ‘ID’ selector. What is so special about an ID selector? That type of selector can only be applied to one element in the HTML page. Sounds familiar?
So those of you not asleep at the computer, now see that we have a CSS ID selector for each of our HTML divs that have an ID, and they have the same corresponding names. So the CSS selector #centerDoc applies to the div: ‘<div id=”centerDoc”>’ , you got it? Whatever CSS rules/styles we choose to code into our ID selector will change what appears inside the corresponding div. So for the div with the id of: ‘navigation’ we have these CSS rules:
#navigation {
position: absolute;
width: 210px;
height: 600px;
margin: 0;
margin-top: 0px;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}
Notice at the bottom we say all text will have a font-weight of ‘normal’:
font-weight: normal;
We could just as easily have said that we want all the text to appear in the div (the div with the ID ‘navigation’) bold instead:
font-weight: bold;
But I digress, I already go into detail about CSS in a my previous article on CSS. This tutorial was about creating an easy to use page template so I will point out the 2 main elements that make this thing work.
In our page the navigation div is sitting on the left and it has a border … why? It has a nice light green 1 pixel border because I set this in my CSS:
border-right: 1px solid #C6EC8C;
Pretty self explanatory, no? I would suggest changing the color of the border and changing the pixel thickness of the border and see how it looks.
Why is the navigation sitting on the left of the page while the centerDoc is to the right of it? Well first thing to look at is this line in the navigation selector:
position: absolute;
This tells the browser to just place this div on the page as is. This is oversimplifying the subject, but for our purposes this works for now.
The real magic in this is the CSS code for centerDoc:
#centerDoc {
position: absolute;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 50px;
margin-left: 235x;
}
The line :
padding: 0 0 20px 0; /*top right bottom left*/
Tells the browser to insert 20px (pixels) of padding to the bottom of the div with the ID ‘centerDoc’.
Let’s back up here a second. We just used something called ‘padding’ and it is what it sounds like: Space that is wrapped around our element (tag).
CSS has this feature and concept of a box model that essentially is a box that wraps around HTML elements. This box model consists of: padding, margins, borders and the actual content. This allows us to place a border around elements and space elements in relation to other elements. From the inside out it is ordered like so:
content -> padding -> border -> margin
So in our case anything in between our <div> tags is the ‘content’. Right after that comes the padding. Then there is a border and finally a margin. Margin and padding may seem like the same thing but if you think about it, you can see how being able to control the space before the border (padding) and after the border (margins) can really effect your layouts.
In this example you notice that the navigation div sits higher up on the page than the centerDoc div. This is not because of the order that which they appear in the HTML, as they normally would without CSS, rather it is because of the margin settings I set for each selector; for centerDoc I set the top margin to 50px:
margin-top: 50px;
And for the navigation div I set it to:
margin-top: 0px;
This sets its top margin to 0 pixels so it will therefore be 50 pixels higher than the centerDoc div. I would suggest that you move the position of the navigation div under the center doc div in the HTML just to see if it changes anything, you will see that where the div appears in the actual HTML code has nothing to do with how it will appear to the user now that CSS positioning has been used. Another thing to try is to play with the CSS values and see what happens, change the padding, change the margins etc .
Let’s finish this discussion of CSS in Part 3.
1. There is more HTML that appears on top of the first <body> tag that is very important to the page but does not actually directly have anything to do with what appears in the page (from the users perspective) so I won’t discuss it in this article.Share In part 2 of the tutorial we broke down the major sections of HTML on the page and established separation using DIV tags with unique ID’s attached to them:<div id="navigation"> ...</div>
<div id="centerDoc"> ...</div>
Using DIV’s (to position the major page sections) is the alternate method to what most people use: tables. I would argue one method is not necessarily better than the other. But consider that CSS in the ‘official’ method to position page elements and tables should only be used to hold tabular data.
On the other hand there are simply times when using tables is much easier and CSS just doesn’t cut it.
That said, our current layout (left or right side navigation) CSS is far easier to use and is an overall better solution.
Now that we have that covered, everything gets really easy from here. We’ve established our main document and the major sections are in place, all we need to do is add our text and images.
Breaking down the page:
This page is simple, we have just a single heading:
<h1>The Main Heading</h1>
And a single paragraph:
Go to the Web Designers Killer Handbook home page and grab the practice
HTML page that we will used as the starting template for this tutorial. You
can find it under the heading: 'To create the practice HTML page do the
following:'. Follow the instructions there and create your basic HTML page
... and do it now!
We define how the paragraphs and the headings will look in our CSS code:
p {
width: 80%;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}
This is pretty much self-explanatory. The only thing that should be mentioned is that we set the width of the <p> tags to 80%. This allows us to control all of our text width in one easy to edit spot.
The only thing missing from the page is the actual navigation. The best and easiest way to do this, is by using list (<li>) tags. That makes sense, since navigational menus are essentially a list of pages.
We styled the list item tags with this CSS:
li {
list-style-type: none;
line-height: 150%;
list-style-image: url(../images/arrowSmall.gif);
}
The above code uses an image as the bullets for the list and makes the space between the listed items 1 and ½ times larger than normal (I like a little more ‘breathing room’). You don’t have to have an image for the bullets, you could leave it with no images and no bullets by just removing the attribute:
list-style-image: url(../images/arrowSmall.gif);
Or you could use one of the built in bullet options: ‘disc’, ‘circle’ and ’square’.
Next you should add to the HTML page an unordered list (<ul></ul>) in between the navigation DIV’s just under the ‘main navigation’ heading:
<h2>The Main navigation</h2>
<ul>
<li><a href="cssTutorialPage1.htm">Page One</a></li>
<li><a href="cssTutorialPage2.htm">Page Two</a></li>
</ul>
To make things easier (for the purpose of the article), change the CSS affecting the list item tags (<li>) so that we use a built in bullet:
li {
list-style-type: disc;
line-height: 150%;
}
Now we have the navigation!
That pretty much covers our goals for this tutorial, but we have just scratched the surface of CSS. As you can see, we created a nice looking page, while using very few types of HTML tags. At this time there isn’t much text on the page, but we could add to the page easily, building it out to include lots of information and images with practically no HTML work at all!Share
Inserting images with CSSThis article assumes that you know at least basic HTML; you know what a tag is and how to use simple tags like the <img> or the <p> tag. If this is confusing you, you need to read my tutorial for total beginners on web design – it’s really easy and people seem to like it, so give it go!
Ok, I assume that everyone knows what images are, as we all have seen images on web pages. Images are not technically inserted into a web page (to be nerd precise), rather images are linked to web pages and typically we use the image tag (<img>) to create holding space (or a reference to the image) for the image.
When someone loads a web page (by going to the URL), it is the browser, at that moment, that actually gets the image from the web server and inserts it into the page for you to see – makes sense?
This is different from using a program like MS Word for example, where with Word, when you insert an image into a Word document, the image actually becomes ‘part’ of the actual document. When you save a Word file, all you need to keep track of is that one Word file, and you know the images you inserted will be there when you open it again no matter where you move the file.
Where as with an HTML page, since you are only referencing the images with the image tag, you have to make sure that the images you are linking to always stay in the same spot in relation to the web page. When people mess up that path between the HTML page and the images it is referencing, you get that broken link icon that everyone loves to see. You are seeing that broken link icon because the browser can’t find the image you are referencing in the <img> tag.
Ok, if you didn’t know much about the mechanics of images loading in web pages, now you know too much! Lets move to something practical.
Using CSS to insert images into your web pagesThis next part is really easy to understand, easy to use and can be very powerful – triple bonus! With CSS, all block-level and inline elements (tags) can have background images inserted into them. block-level tags are <p> and <div>.
Even though you can insert images into any type of tag (block-level or inline), I think it is better form in most situations to use block-level tags for this sort of thing. But in reality it doesn’t matter if you use block-level tags, or inline tags because you can turn any tag into a block-level tag and vice versa; with this simple CSS code I change any tag to block-level:
display: block;
Or the reverse:
display: inline;
So what? Remember my newsletter where I talked about inserting backgrounds with CSS? In the same way you can insert images in the backgrounds of your web pages, you can do it with any other element. This combined with some extra padding and you have your headline image where you want it.
Take a look at this code where I use this technique:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS image placement</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style media="screen">
#headline1 {
background-image: url(images/newsletter_headline1.gif);
background-repeat: no-repeat;
background-position: left top;
padding-top:68px;
margin-bottom:50px;
}
#headline2 {
background-image: url(images/newsletter_headline2.gif);
background-repeat: no-repeat;
background-position: left top;
padding-top:68px;
}
</style>
</head>
<body>
<div id="headline1">Some text … </div>
<div id="headline2">Some more text .. </div>
</body>
</html>
To keep this example easy to follow, I inserted the CSS code into the web page itself. Typically I would place my CSS code in a separate CSS file and link to it so that I could reuse the CSS code on many pages.
In the above CSS code you will notice that I insert a background image for each ID (headline1 and headline2) and I increase the padding at the top (padding-top:68px) to push down the text to make space for the background images.
This may seem unclear now, so just take a look at the page and then pop open the source code and check it out for yourself. Feel free to take a copy and play with the padding number and see how it changes things. Why did I add 68px to the padding? The image is 68px tall, but I could put any number I like to get the placement I want. Padding does not affect the background image; it only affects the contents inside the tag/element. In this case I used <div> tags.Share The 3 ways to insert CSS into your web pagesFor some of you, this may sound like a real lame article. But you ought to give it a chance because I don’t write about stuff you’ll never use! I avoid marginal, nerd centric ivory tower blather like a cat avoids water.
I’ve read hundreds (sadly, this is true) of those 2-inch thick nerd books (I don’t get out much) and I can’t stand it when people waste paper on that kind of generally useless stuff. So read on, eager student, and you will be well on your way to building your own killer web sites!
The wise people who created CSS came up with 3 basic ways for you to use CSS in your web pages:
1. With an external file that you link to in your web page:<link href="myCSSfile.css" rel="stylesheet" >
or using the import method:
<style media="all">
@import "myCSSfile.css";
</style>
Why use the import method versus the link method when using external style sheets? Use the import method if you want to support really old browsers like Netscape 4.0.
Let me explain: Netscape can’t handle most CSS beyond font settings and colors, if it finds any other types of CSS it could cause good old Netscape 4 to crash in some occasions or at the very least mangle your page.
Netscape 4 does not understand the @import method of linking to a style sheet like the newer browsers can, so Netscape just ignores it. You can use this to hide the fancy CCS code in the external style sheet by using the @import method so all the good browsers can reference it while keeping Netscape 4 out of the picture.
Netscape 4.0 is pretty much dead (that is really a good thing) so I personally don’t worry much about it. But for some of you, it may be of concern so I thought it should be mentioned.
2. By creating a CSS block in the web page itself; typically inserted at the top of the web page in between the <head> and </head> tags:<head>
<style >
p { padding-bottom: 12px; }
</style>
</head>
3. By inserting the CSS code right on the tag itself:<p >Your Text</p>
So some of you may be asking why have the 3 methods of including the CSS in a web page? The answer is: flexibility and laziness! Ok I’m kidding about the laziness, replace it with ‘precision’. So what the heck does that mean?
I think the easiest way to explain to you what’s going on, is by giving you real examples that demonstrate the differences. Wait a second, don’t fall asleep … the examples are short and I think that once you finish, you will see how easy it really is!
Another reason that you want to continue reading this article is that you will gain a good understanding of some fundamental (and practical) CSS principles – remember that the difference between people who are really good at what they do, and those who are not so good, is in the mastery of the basics. Lets get down on it!
Method 1: Create a separate CSS file and link it to your web page(s)The heading for this part of the article hints at why you would want to go through the trouble of creating a separate CSS file instead of just typing in the CSS code in the web page itself. Can you guess? Keep trying … times up! Did you get it? I could quote you some nerd centric description that describes the advantage; the problem is that only nerds who already know would understand!
In a nutshell: by keeping the CSS code in its own file, you can link that CSS file to as many web pages as you want. This has two major advantages:
- You will have much less code in all your HTML pages – makes the pages neater and easier to manage and makes the web pages a little faster on the download. (Although this point is really minor in most cases, and is really over blown in my opinion by some people)
- It can potentially reduce the amount of work you have to do in a big way. Why you ask? Simple; lets say you have 50 web pages where you’ve set the text to be black and the headline text (text in between the <h3> tags for example) to blue. Then one day you decide you want to change the color of the text. Since the CSS that controls the text color for the 50 pages is in one CSS file, you can easily change the color of your text in all 50 pages by changing one line in the CSS file!
The rule: If you are going to have more than one web page with the same stylistic properties (that look the same in some way) you should create a separate CSS file and link your web pages to it.
Method 2: Create a CSS block in the web page itselfThe Rule: Use this method if you want to override the CSS you have in a linked CSS file or if you only have a one-page web site.
Now that we covered the first method of putting all your CSS code in a separate file and linking to it, the other methods are easy to describe.
CSS stands for (is the acronym for): ‘Cascading Style Sheets.’ I think the words ’style sheets’ in CSS are self-describing … we know what ’style’ in style sheets mean. But what is the meaning of ‘cascading’ in CSS?
The cascading effect in CSSThe word ‘cascading’ in CSS describes a cascading mechanism; that is to say that the CSS code on the page itself will override the CSS code in a separate linked file. And subsequently, CSS declared ‘inline’ on the tag itself would override all other CSS.
So let’s look a practical example; let’s say you have a web site with 50 pages where the layout and fonts are the same on all 50 pages. Wisely you put the CSS information that sets the layout and font choices in a separate style sheet, but for a particular page you need to change the color of some of the text and add a border around a paragraph. This is a perfect example where you might want to place a little CSS in the page itself since the color and border will be unique to that page. Is this all sinking in?
Other
Centering Text with CSSShare Centering text and other elements can easily be done with the CSS text-align property. It can be applied to a division, the p tag – pretty much any block-level element.
Applying this to an internal or external stylesheet:
p {text-align: center;}
or this to inline styling:
<p >This is centered text</p>
will center your text.
The CSS Overflow Propert By default, elements in a website will expand to make room for whatever they contain. An empty division, for example, won’t show at all, but you can add 1 or 12 (whatever) paragraphs, and the division will be as big as it needs to be so everything inside is displayed.
But what happens if the dimensions of an element – let’s use a division for this demonstration – are set?
This division is set at a height and width of 100 and 200 pixel, respectively, and it has a colored background to display its dimension.The code that creates this looks like this:
<div >
<p>This division is set at a height and width of 100 and 200 pixel,
respectively, and it has a colored background to display its dimension.
</p></div>
In this example, overflow is no issue, there is nothing here to overflow. But what happens, if I add more content than this little box can hold?
Es war einmal ein kleines süßes Mädchen, das hatte jedermann lieb, der es nur ansah, am allerliebsten aber ihre Großmutter, die wußte gar nicht, was sie alles dem Kinde geben sollte. Einmal schenkte sie ihm ein Käppchen von rotem Sammet, und weil ihm das so wohl stand und es nichts anders mehr tragen wollte, hieß es nur das Rotkäppchen.My cup overfloweth! And this is where the overflow property comes into play. As you see, there is no overflow property applied to the above.
My cup overfloweth! And this is where the overflow property comes into play. As you see, there is no overflow property applied to the above.
My cup overfloweth! And this is where the overflow property comes into play. As you see, there is no overflow property applied to the above.
Geesh, I had to say that three times just to clear my overflow so one can actually read what is written. But it makes the point nicely – If you stick more content into a container than it can hold, you have a problem!
This is where the overflow property comes into play. As you see, there is no overflow property applied to the above, but the division is responding to the default, which is
div {overflow: visible; }
So I need to decide what to do with this overflow. One option is to hide it by applying ‘overflow: hidden’ to the CSS. In an internal or external stylesheet, the styling for our example division would then look like this:
div {
height: 100px;
width: 200px;
background: #EDEDED;
overflow: hidden;
}
And as we look at the result of this, it’s easy to realize what kind of problem we now have:
Es war einmal ein kleines süßes Mädchen, das hatte jedermann lieb, der es nur ansah, am allerliebsten aber ihre Großmutter, die wußte gar nicht, was sie alles dem Kinde geben sollte. Einmal schenkte sie ihm ein Käppchen von rotem Sammet, und weil ihm das so wohl stand und es nichts anders mehr tragen wollte, hieß es nur das Rotkäppchen.Obviously, this creates a whole new issue: Now, part of the text has disappeared, and unless folks look at the source – and who, with the exception of us geeks, would do that??? – they will never know what else you had to say.
Good news is that in addition to ‘visible’ and ‘hidden’, which we explored above, there are two additional values to chose from: ’scroll’ and ‘auto’. ‘Scroll’ will create a horizontal AND a vertical scrollbar to the box, whether one is needed or not.
This division is set at a height and width of 100 and 200 pixel, respectively.That doesn’t make much sense. Why put a scrollbar if there’s nothing to scroll to? But if you think that you would know, as you design your site, if your content will fit into its element or not, you are not 100% correct. Things may or may not fit when YOU look at them, but you can never be sure exactly how all the folks visiting have their settings adjusted and how things look to them. With that in mind
div {overflow: auto;}
is the perfect solution. A srollbar will appear if one is needed:
Es war einmal ein kleines süßes Mädchen, das hatte jedermann lieb, der es nur ansah, am allerliebsten aber ihre Großmutter, die wußte gar nicht, was sie alles dem Kinde geben sollte. Einmal schenkte sie ihm ein Käppchen von rotem Sammet, und weil ihm das so wohl stand und es nichts anders mehr tragen wollte, hieß es nur das Rotkäppchen.And not, if it’s not needed:
This division is set at a height and width of 100 and 200 pixel, respectively.
Styling a Horizontal Rule with CSSShare A quick and easy way to insert a dividing line into a website is with a horizontal rule, the hr tag.
This horizontal rule
was created by the following inline CSS:
<hr >
It could also be styled in your internal or external stylesheet (which is usually the better approach):
hr {
color: #f00;
background: #f00;
width: 75%;
height: 5px;
Styling iframes with CSSShare If you still haven’t heard, hear it now: FRAMES ARE DEAD – well, technically, they are more like the undead – the zombies of webdesign. They should be gone and forgotten but refuse to stay buried. It’s much better not to use them.
However, there may be a situation, where inserting a separate html document into your page makes sense. And there’s an app for that: Iframes (aka inline frames). This code inserts a basic page into an html page:
<iframe src="http://www.killersites.com/">
<p>Your browser does not support iframes.</p>
</iframe>
At this point, there is absolutely no styling applied to the iframe, and it looks like this. Note the line regarding lack of browser support. Iframes are supported by all the major browsers, but it’s a good idea to add this for the odd browser that doesn’t.
While I am a strong supporter of using the HTML strict doctype and writing validating, standard-compliant code – iframes will not validate, which leaves us with two options: Either suck up the iframe-related validation errors or switch to HTML transitional doctype for the pages with iframes.
CSS gives you the power to dress your iframe up a bit. The following attributes are available:
- src (the URL of your iframe)
- longdesc (this specifies the URL of the iframe, but is hardly supported and can just as well be ignored)
- name (obviously, the name of your iframe)
- height (the height of your iframe)
- width (the width of your iframe)
- frameborder (1 or 0 – 1 is for yes, 0 for no)
- marginheight (determines the top and bottom margin of your iframe)
- marginwidth (determines right and left margins of your iframe
- scrolling (Do you want a scrollbar? Yes, no, or auto – ‘Yes’, is obvious. ‘No’ should not be used – what if someone does not see the entire content? If this is set to ‘no’, that viewer can never get to the hidden parts of what you’re inserting. ‘Auto’ lets the browser decide if one is needed and seems the best option here to me.)
- (align) – I’m just mentioning this for completeness; it has been deprecated. Don’t use it.
<iframe src="http://www.killersites.com"
name="Killersites.com" height="400px" width="700px"
frameborder="0" marginheight="20" marginwidth="35"
scrolling="auto">
<p>Your browser does not support iframes.</p>
</iframe>
Gives you that. And if you add a bit more CSS to the frame itself:
iframe {
margin-left: 95px;
}
All Caps with CSSShare While text in general is hard to read when written in all caps – and considered the electronic version of yelling – using CAPS for emphasize is a handy tool.
Headers are a place where capitalization is frequently used. And to assure that your header is displayed uniformly throughout the site without having to worry about actually writing in all caps, just use CSS:
h1 {
text-transform: uppercase;
}
With this, everything that has the h1 tag applied, will appear in all caps.
Another interesting text-transformation property is "capitalize"
h1 {text-transform: capitalize;
}
With this, all your words will begin with a capital letter!Multiple Background Images with CSSShare At times, it makes more sense to use background images than to insert them directly into the page. And while each element – like your body tag – can hold only one background image, they can be applied to several elements.
But pretty much every selector can hold a background image. On THIS PAGE, I have added the image to the html tag, the body tag, and the h1 and h2 tags (these are ’selectors’) – like so:
body {
background: url(bgimage.jpg) repeat-y right;
}
html {
background: url(bgimage.jpg) repeat-y left;
}
h1 {
background: url(bgimage.jpg) no-repeat right;
}
h2 {
background: url(bgimage.jpg) no-repeat left #ffc;
padding-left: 250px;
height: 150px;
}
#wrapper {
padding: 0 250px;
/*I'm using the right and left padding of the wrapper to keep
the content off the images */
}
Note that I’m a bit lazy at the moment, and am using the same image for all four selectors. Taking a closer look at each of them, also shows a bit more how things work:
The html tag (image displayed on the left) repeats the flower all the way down the monitor, regardless of how much content there is. Resize your window and see what happens.
The body tag, where the image is displayed to the right, only shows the image as far as the content goes.
The h1 tag only shows as much of the image as the space its content is taking up.
The h2 tag also has some height added to it (exactly 150px, the height of the background image), so it does show the entire image. I’ve also added the background color to more clearly demonstrate the space that’s taken up by h2.
Styling Lists with CSSShare We’ve already discussed navigation lists and list bullet images, but sometimes, a list is just a list. There are two types – the ordered list and the unordered list. The ordered list counts the items; the unordered list marks the individual items with bullets or other markers. The HTML is simple.
<ol>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ol>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
And, without any styling applied at all, that looks Like This.
We can affect the list item markers with some simple CSS and the list-style-property controls those. For unordered lists, we can chose between ul styles: disc, square, circle, or none – which looks like this, or between ol styles: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, upper-greek, lower-latin, upper-latin, armenian, or georgian, which looks like that.
Other than that, we can style the ul tag and the li tag. Anything added to the ul tag, affects the entire list, where properties applied to the li tag will affect the individual list items. So this CSS
ul {
background: #ffe566;
padding: 25px;
}
ol {
background: #828772;
padding: 15px;
}
ul li {
background: #fc6;
margin: 5px;
}
ol li {
background: #9cc;
padding: 10px;
margin-left: 35px;
}
Image Borders with CSSShare Sometimes, a website design benefits when images have frames – or borders. One way to get them is one image at a time, using a graphics program. But there is a much faster way – with CSS!
This code:
<img src="image.jpg" width="350px" height="262px"
alt="Rusty Stove in Luckenbach, Texas">
inserts a plain image into your page:
And if we add this to our CSS:
img {
border-color: #7d6b72;
border-style: solid;
border-width: 5px;
}
Then our image appears like this:
Actually, I would use shortcuts and write my CSS like this:
img {
border: 5px solid #7d6b72;
}
3-Column, Fixed Width Layout with CSSShare The three-column layout is probably the second most common layout used for websites. There’s usually a header and a footer – and then some content, maybe a sidebar for navigation, a column in the middle with some content info, and another column with some additional stuff, whatever that may be. What you put inside your columns doesn’t matter – the way to achieve the 3-column layout stays the same.
So let’s start with our basic HTML to put all the parts on paper — or in our case, on line. This is the basic outline of what’s between the body tags:
<div id="wrapper">
<div id="header"></div>
<div id="column-left"></div>
<div id="column-center"></div>
<div id="column-right"></div>
<div id="footer"></div>
</div>
For the entire HTML code – to include some filler content – see Basic HTML – No Styling. To see the code of the example page, just right-click and chose “View Source” from the drop-down. Most browsers offer that feature.
And of course what we get, is NOT a 3-column layout. It’s just one division on top of the next. That’s because we haven’t gotten to the ‘with CSS’ part of the title of this post yet. So let’s already!!
First, and just to make things easier to see, I will apply the fixed width and center my page. Here’s a post with the finer details Center-aligning a Website right here already. Here is the CSS that does that:
* {
margin: 0;
padding: 0;
}
#wrapper {
width: 980px;
background: silver;
margin: 0 auto;
}
#header {
background: black;
color: white;
}
#column-left {
background: red;
}
#column-center {
background: yellow;
}
#column-right {
background: purple;
}
#footer {
background: green;
}
(Please note that you should really be using hex or rbg color codes, but for the purpose of this demonstration, color names are just easier to deal with.)
And it looks Like This. Now we just have to get our columns to act like columns and line up next to each other. There are different ways to do this, but I prefer to just float them all. So we’ll give them all a width and add float: left; to our three columns:
#column-left {
width: 250px;
float: left;
background: red;
}
#column-center {
width: 480px;
float: left;
background: yellow;
}
#column-right {
width: 250px;
float: left;
background: purple;
}
At this point, it’s important to be aware of a special characteristic of floats – I picture them as balloons – they float above our heads, without taking up any actual space among us. So just as you can place a box under a balloon without the two affecting each other’s space, our footer will act like the floated divisions are not even there, and line itself up neatly right under the header – where we do NOT want it to be. So we have to give the footer a special set of instructions:
#footer {
clear: both;
background: green;
}
Adding Comments to CSSShare Comments in a stylesheet are a good idea. Often, things that are obvious as you write them, make no sense a week or even years later – or to somebody else. So it can be very helpful to include explanations. However, we don’t want to browser to read and render those, as they are not meant to be displayed on the webpage, so we have to hide them.
/*
This is a HIDDEN Comment!
*/
That’s all it takes – a ‘/*’ to start, and a ‘*/’ to end. A few handy applications for these hidden comments are:
h1 {
color: #000000; /* black - because I forget */
font-size: 2em;
}
Another handy use for the comments are to help define the structure, so things are easier to find:
/* ----------------- Generic Styles ------------------ */
.alignleft { float: left;}
.alignright { float: right;}
.clear { clear: both;}
p { margin: 0 15px 10px;}
h1, h2, h3 {
font-family: Baskerville, Garamond, Palatino, "Palatino Linotype", "Hoefler Text", "Times New Roman", serif;
}
h2, h2 {
margin: 25px 20px 5px;
color: #9e6548;
font-size: 2em;
}
h3 {
margin: 25px 0 5px;
padding: 5px 25px;
background: #9e6548;
color: #f7efe3;
}
ul { margin-bottom: 25px; }
/* ----------------- The Header -------------- */
#header {
background: url(pics/stove.jpg) #f7efe3 no-repeat top right;
height: 200px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
#header h1 {
color: #9e6548;
font-size: 3em;
padding: 35px 25px 0;
}
/* ------------- Top Navigation ------------------- */
#topnav {
background: url(pics/nav.png) repeat-x;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold;
width: 679px;
height: 45px;
top: 55px;
position: relative;
padding-top: 13px;
}
#topnav li {
display: inline;
margin: 15px;
}
/* ------------ content -------------- */
#content, #contentPage, #indexPage {
float: left;
width: 635px;
padding: 35px;
}
#contentPage h2, #search h2 {
margin-top: 0;
margin-bottom: 0;
}
#contentPage h3, #search h3 {
margin-bottom: 10px;
}
/* ----------- Sidebar ---------------- */
#sidebar {
width: 205px;
background: #9e6548;
float: right;
margin: 12px 0;
color: #f7efe3;
padding: 20px 10px;
}
#sidebar h1, #sidebar h2 {
font-size: 1.4em;
margin: 25px 5px 5px;
color: #f7efe3;
}
/* ------------- footer ----------------------- */
#footer {
clear: both;
height: 40px;
font-size: .8em;
background: #9e6548;
color: #f7efe3;
text-align: center;
}
#footer p {
padding-top: 14px;
}
Margins and Paddingmargin and padding are the two most commonly used properties for spacing-out elements. A margin is the space outside of the element, whereas padding is the space inside the element.
HTML Dog, The Book HTML Dog is hosted by Titan Internet Change the CSS code for h2 to the following:
h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 1em;
padding: 3em;
}
You will see that this leaves one-character width space around the secondary header and the header itself is fat from the three-character width padding.
The four sides of an element can also be set individually. margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left are the self-explanatory properties you can use.
The Box ModelMargins, padding and borders (see next page) are all part of what's known as the Box Model. The Box Model works like this: in the middle you have the content area (let's say an image), surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin. It can be visually represented like this:
Margin box Border box Padding box Element box You don't have to use all of these, but it can be helpful to remember that the box model can be applied to every element on the page, and that's a powerful thing!
