Web Development Blog
Tutorials and Tips
Subscribe to the Blog
Related Resources
Are you ready to build a new site?
Need help planning your social media campaign?
Visit my services page to learn how I can help you with your next Internet project.
I’m not going to teach you CSS: Lesson 2
In our first lesson on CSS, I introduced you to the concept, gave you a new homework assignment and showed you an example of a simple site—with and without its accompanying stylesheet. For that example I used the Wolf site I had built as part of our first homework assignment for learning XHTML/HTML. Today I am going to show you how I added the styles to that site.
Incorporating a stylesheet into your site involves two basic steps
- Create a stylesheet file: Using a plain text editor, such as Notepad or Textedit, open a new file and save it with a .css extension. This will become your external stylesheet. and should be stored in the same directory as the .html files used in your site. The one I used in this project is called wolf.css. Later we will add the styles to this file.
- Link to the stylesheet: Open each of the .html files in your site and add
<link rel="stylesheet" href="wolf.css" type="text/css" media="all" />
after your title—which will be found somewhere between <head> and </head>. Replace wolf.css with the name of your own css file.
While reading about this, you may have learned that one can include a stylesheet via the @import rule or via link, as we have done here. While there are pros and cons to each method, link is suitable for our project.
Adding styles to the sheet
For this project we will be creating styles for each of the elements used in our existing site. Below I will provide a brief explanation of each. To learn more about CSS selectors and structure I recommend perusing Cascading Style Sheets: The Definitive Guide, 2nd Edition, by Eric Meyer. You can view the complete style sheet here. Like HTML and XHTML files, this is a plain text document.
Styling the <body>
body {margin:0px; padding:0px; font-family: Georgia, "Times New Roman", Times, serif; font-size:small; font-style:normal; font-weight:normal; color:#000; background-color: #fff;}
By styling the body we can control the overall content of our pages. In this case we've declared that there should be no margins or borders, the font for any type on the page should be serif—preferably Georgia, the font-size will be small (causing its size to vary somewhat between browsers), the style and weight should be normal (rather than italic or bold), the color should be black and the background should be white (Web colors are specified by a # followed by their 6 digit hecadecimal value, but when all 6 are identical, three will suffice. You can view a hexadecimal color chart here).
Styling paragraphs
p {border: 0; margin: 0px; padding: 0px 60px 14px 30px; line-height : 140%}
We don't have to define a font for paragraphs because that was already set in the body. What I have defined here is that there will be no border or margin, but that there will be 60 pixels of padding on the right, 14 below and 30 to the left of each paragraph (padding is listed in the order of top, right, bottom and left). Additionally I have created a line-height of 140% to create extra space between lines. This increases readability when lines are long. Short lines, such as those found in newspaper columns would require less spacing. I could have skipped the border style, as the default would be 0. However sometimes I will add a border in the development process just to see where the boundaries of an element may be. Once I'm satisfied with the layout I then change it back to 0.
Styling headers
h1, h2, h3, h4, h5, h6 {font-family:Verdana, Arial, sans-serif;}
While all other fonts will be serif, I have defined all headers to use a sans-serif font.
Specifying the look and position of the main header—it's not just about the type
h1 { height:66px; font-size:21px; line-height:66px; font-weight:bold; margin:0px 0px -2px 0px; padding:10px 0px 0px 0px; background-color: #cad5f1; color:#024c20; border-bottom: 1px solid #024c20;}
Here I've specified that the height should be 66 pixels to match the photo of the wolf, and create a large rectangular area. My font-size is 21px. Font sizes can be set in a variety of ways. Normally relative sizes such as small or medium are best, but here I needed an exact size to help determine the position. By setting line-height to the same size as the element and adding 10 pixels of padding to the top, I was able to create approximately centered vertical positioning. Controlling vertical positioning in CSS is complicated, unreliable and often reliant upon a certain amount of duct tape and rubber bands. Feel free to experiment amongst yourselves. The background color of the entire area is light blue, the type color is dark green and the whole expanse has a bottom border that matches the type.
Styling images that fall inside h1 headers—the wolf head
h1 img {float: left; padding: 0px 60px 0px 0px; vertical-align: baseline; margin:0px 0px 0px 0px; background-color: transparent; }
While up to now you have seen me add styles to certain elements, CSS also lets us style elements within a certain context. In this case, the wolf head image that we had placed inside the h1 will have 60 pixels of padding to the right (to add space between the photo and the type), the image is aligned to the bottom of the h1, the background color is transparent so that we can see the blue of the h1 and we have no margin.
Styling all headers
h2 {border: 0; color: #3a024c; background-color: #fff; font-size: 18px; padding: 10px 0px 10px 30px; }
h3 {border: 0; color: #3a024c; background-color: #fff; font-size: 16px; padding: 10px 0px 10px 30px; }
h4 {border: 0; margin: 0; color: #000; background-color: #fff; font-size: 12px; padding: 0px 0px 10px 0px; }
h5 {border: 0; margin: 0; color: #3a024c; font-size: 12px; font-weight: bold; padding: 0px 0px 2px 0px; background-color: #fff;}
h6 {clear:both; position: relative; color: #024c20; background-color: #fff; font-size: 10px; font-weight: normal; margin-left:0px; padding: 5px 5px 5px 30px; width:100%; text-align: left; border-top: 1px solid #024c20; }
Although I used only h1, h3, and h6 headers, I created files for all headers in case the site grew and I had further need of them. In h2-h3 you only see small differences in size, color and positioning, but the h6 which we use for the footer has some added features. "clear-both" ensures that this will be positioned below all other elements on the page. Its position is relative to those elements rather than to the page itself. This is why it floats just below the text rather than stays fixed to the bottom of the page.
The latter is very difficult to do with CSS alone and would require additional code and more duct-tape. I stress this because this issue has frustrated many a Web designer and is particularly annoying to those who found it so easy to accomplish when using tables.
Styling lists—the menu
ul { clear:both; color: #FFFFFF; background-color: transparent; margin: 0; padding: 3px 60px 3px 6px; white-space: nowrap; text-align:right; }
Here we've defined the container of the list to come after the preceding elements, to have no margin, 3 pixels of padding on top and bottom, 60 to the right and 6 to the left. The list elements will all align to the right.
The horizontal list doesn't work
well on the links page.
ul li { color: #024c20; background-color: transparent; font-family:Verdana, Arial, sans-serif; font-size:12px; display: inline; padding : 3px 3px 3px 3px; margin : 0px 16px 0px 0px;
}Here we define how the items of the list will behave. In addition to assigning such qualities as font and color we have set the list to display inline. Instead of displaying as a vertical list of elements with bullets, as it did in the unstyled pages, our list is set to display horizontally on one line. Each element in the list will have 3 px of padding and 16 px of margin on the right just to add more space between the items in the menu.
While this is a nice way to handle our menu, it does create a problem. On the links page, we have a list of links to other pages about wolves. This too displays horizontally, although it would be more appropriate for it to be vertical. To make the two lists behave differently from one another we would need to add additional code to both the stylesheet and the .html file. We will discuss this in lesson three.
ul li a:link {background-color: transparent; color: #024c20; text-decoration: none; padding : 3px 3px 3px 3px; }
ul li a:visited {background-color: transparent; color: #3a024c; text-decoration: none; padding : 3px 3px 3px 3px; }
ul li a:hover { padding : 3px 3px 3px 3px; background-color: #024c20; color: #FFFFFF; }
Here we define how our links will act within the menu. In their regular state, they will be dark green, after being visited they will be purple, and when one hovers over the link with one's mouse the background will turn green.
Styling all other links
a:link { color: #02194c; background-color: #fff; text-decoration: underline; } a:visited { color: #3a024c; background-color: #fff; text-decoration: underline; } a:hover { color: #414c02; background-color: #fff; text-decoration: underline; }
Links that appear in other parts of the site will receive more traditional styling. They are always underlined, blue before being visited, purple after being visited and gray during hover. We differentiated these because our existing code allowed us to do so, and because links within paragraphs would look silly when hovering produces green rectangles.
Styling images
img {border: 0;}
Most images require very little styling, but when images are links they will show up with a blue border. I've created this so that if I were to link from an image it would not have a border.
Experiment yourselves
While I did not delve deeply into syntax and structure, I hope this example has given you a bit of an idea of how CSS works. In our next lesson we'll modify our XHTML files to accomodate additional styles that will give us more control over the look and layout of the site and I'll demonstrate how the same site can look entirely different just by changing the stylesheet.
p.s. I will be out of the office from September 1-13th. If you have Web development questions during this time, please contact Kevin.
No Comments »
No comments yet.
