• Web Design and Development Blog - Rochester MN

  • blog » home

Some basic CSS Tips

April 17th, 2008 · No Comments

For all of you that wanted to build a site with css but didn’t know where to start or could only get things working in one browser this should help you out.

  1. The difference between margin and padding
  2. Classes vs ID’s (dot vs pound syntax)
  3. Using the cascade

1. The difference between margin and padding

Although it may not seem logical to start off talking about a specific property of css, this will help with some frustrating hair-pulling nights. IE 6 and Firefox display margin and padding differently. I haven’t tested this in IE 7 yet it works fine in that so this should cover you for all cases.

  • IE 6 – if you have the following css
    • margin:0px 0px 0px 15px; OR margin-left: 15px;
    • IE 6 will actually display your items as
      • margin:0px 0px 0px 30px; OR margin-left:30px;
      • It doesn’t physically change your code but you will end up with a doubling of the left margin, causing major headaches when trying to position items in place. The solution is to use the padding property, since padding doesn’t do the left side doubling error.
    • padding:0px 0px 0px 15px; OR padding-left:15px;

If you learn to use padding properly you can create some extremely complex designs using only css.

2. Classes vs ID’s (dot vs pound sytax)

This is quite a bit easier than the padding issue listed about but still important. Classes can be set to any item multiple times in a document, however an ID can only be set once per document. This is related more to javascript using the DOM but thats for another topic.

Other than only being used once per page classes and ID’s work the same. You can use the same styling for each item.

#myStyle {
padding:0px; margin:0px; color:#FFCC00; text-decoration:underline;
}

.myStyle {
padding:0px; margin:0px; color:#FFCC00; text-decoration:underline;
}

both of the above items will make text red and underlined with no space around it. Not a particularly useful style but you get the idea. You would use the following styles in this fashion

<p id=”myStyle”>your text here</p>
or
<p class=”myStyle”>your text here</p>

3. Using the cascade

The cascade is why css was created. You can set a style in the top of the document and can base all of your other tags off this master line. Making minor tweaks here and there you can easily update portions of your site with a new look and feel without having to recode anything. Take a look at http://www.csszengarden.com/ to see what you can do with css.

body {
font-family:Arial, Verdana, sans-serif; font-size:1.0em; color:#999999;
}

So the above style will set the font to Arial, roughly 14pt and gray for the entire body tag. Notice how I didn’t put . or # in front of body. This will set it to the specific tag on the page, rather than having to write <body class=”body”>. Now if you add the next style below body you can update the font size and color without having to actually change your code.

p {
font-size:1.5em; color:#FFCC00;
}

this will make any <p> tag in your site roughly 20pt and red. However if you use an <h#> tag the color will still be gray. Pretty cool.

However, the real power comes in when you target a specific item on the page. For example.

<div class=”holder”>
<p>Your text</p>
<div class=”text”>
<p>More text</p>
</div>
</div>

the css to target “More text” would look like this
div.holder div.text p {
your styles here
}

this way you don’t have to give each <p> tag within the div text a specific class, you can easily add and change the code within that div without worrying about if someone adds more <p> tags that the styles dont carry over.

Take a look at how our site is built and learn from that.

At a later time we’ll discuss the float, and position tags.

~RDS

Tags: Coding

Web Design Blogs - BlogCatalog Blog Directory
Minnesota Yellow Pages
Blog Directory
Add blog to our directory.

Find us on Facebook

Follow us on Twitter

Recent Posts

Website Launch: Northland Foundation Supportworks
Reynolds Design Studio is proud to announce the launch of Northland Foundation Supportworks (NFS). NFS is the commercial foundation repair division of American Waterworks out...

View Full Blog »

Contact Us Today

Bookmark Us!