Why HCd? Testimonials & Awards Bio: J. Hogue Bio: James Re Studies in [Web] Design HCd>CMS Tutorials Found Thoughts Contact / Location

CSS: Some basics

Now, you know how to write good xHTML markup. At this point, hopefully you are thinking, “But how do I make it look pretty?” That’s where CSS comes in.

CSS can style any xHTML element, and you can create your own custom elements to further control your layout. It’s not just fonts and colors, either. CSS can be used to lay out an entire page and position elements, even create drop-down menus.

Why Use CSS?

The reason behind our preference for using CSS vs. the old way of doing things (tables, lots of cut-up images, font or style tags) is a cleaner, more consistent presentation of the information, as well as better cross browser and cross-platform support. Your xHTML is stripped of unneccesary, stylistic markup and all the style elements instead are placed into one sheet that your pages link to. Change the style sheet, and all the pages that use it change. It can make things pretty convenient.

The other reason is a growing part of the web-designer’s manifesto: Accessibility. The original intent of the web was to try to make information available to people with a wide range of abilities, but during the nineties quick-boom, Flash-driven pages and other non-accesible media took over the scene. Slowly now, with better browsers and a wider understanding of the needs of people with disabilities, designers are making their code cleaner for software that reads web pages out loud and other methods for the vision-impaired.

So now that you know some of the Why, here is a little bit of the How. Keep in mind, I am a self-taught web hack. Over the past few years, I have learned exponentially more about designing with CSS, but I am far from knowing everything. Here are some tricks and explanations of what I do know, and when I know better, I’ll update this page, too.

Things You Should Know, Part 1: Block vs. Inline

CSS breaks xHTML elements down into two types; block-level elements or inline elements. A block level element without any parameters applied to it will expand to fill the container that it is in. If it is the first element on a page, it will be as wide as the browser window. An inline element is only as large as its content. Block-level elements and inline elements can both be controlled the same way, and a block-level element can be specified to display as an inline element, and vice versa, but it is important to know the difference and how the element will render.

Here is some sample CSS and the output that it creates. We are using a “span” element, which inheritantly is an inline element, but by telling it to display block, I can show you the difference between the two:

  .span1 { display: block; border: 1px solid #c00; }
  .span2 { border: 1px solid #c00; }

This is a block level element

This is an inline element

Notice how the block level element is the width of its container, or the width of this page. The inline element, by contrast, is only as wide as it needs to be – only as wide as its contents. It is also important to note that it only works for width. Height, unless controlled by CSS, is always determined by contents – not by the container. The other way to tell a block-level element from an inline one is that block-level elements will typically kick proceeding elements down a line. Inline elements simply remain “in line”.

Below is a table that outlines the elements that are inheritantly either block or inline:

block-level by default inline by default
div span
h1, h2, h3 etc… a href (links), a name (anchors)
p, hr img (specified by the size of the image)
table, tr, th, td b or strong, i or em
pre, blockquote font, abbr, acronym, code
dl, ul, ol dd, dt, li
form input, select

This is by no means the definitive list, but it should give you an idea about how an element may act.

Things You Should Know, Part 2: The Box Model

CSS uses what is known as the Box Model to render elements. This simply means that an elements width and height is the addition of its margins, border, padding and width. A proper, standards-compliant browser will add all of these together to create the element (to test this theory and learn more, visit the now-famous Tantek page for the Box Model Hack. Recent browsers should no longer have this problem.)

Below is what a DIV with a width of 410 pixels, a padding of 15 pixels, a border of 10 pixels, and a margin or 25 pixels might look like. The overall width of the element is 510 pixels (width + border + padding) and the space around it (margin) is an additional 50px.

A visual example of the Box Model

The code that generated the element might look like this:

  div {
      width: 410px;
      margin: 25px;
      border: 10px solid red;
      padding: 15px;
      background-color: #999;
      font: bold 22px Georgia, Times, serif;
      color: #000;

It is important to note that a margin refers to the space around the element. The border frames the element, and the padding is the space inside of it (the black rule is not generated by the CSS, it was used to highlight the edges of the padding area). Notice how the background-color property only colors in the space inside the element.

Things You Should Know, Part 3: CSS language

Now that you have seen some CSS in action, you may be wondering what the heck it means. CSS by nature is a very straightforward language. It is a very friendly, almost conversational language, almost like you and the browser are out for drinks and you are saying “hey, would you mind using Arial here and could you make it blue?” Try to think of it that way. The elements are pretty self-explanatory, but there are some little tricks that I used above without any explanation. I’ll get to these later. Below are some of the major elements, what they mean, and how they are used:

name of tag definition similar tags
display how an element will display. This property is very powerful, and with the advance of jQuery and Ajax methods, some of its properties are even more important. Acceptable values include block, inline, none (as in, invisible), and the newly supported (and very cool) inline-block.  
width the width of an element, or minimum width min-width
height the height of an element, or minimum height min-height
margin the space around an element, or, the distance that other elements should stay away from this element margin-top
border a rule drawn around the edge of an element. Also includes border-width, border-color and border-style. Styles include solid, dashed, dotted, double, groove, inset, and outset. To define border as zero, use either “0” or “none” border-top
padding the empty space inside of an element padding-top
color defines the color of rendered elements inside of an element. Mostly applies to text and horizontal rules.  
background the background of an element. Background-position, and background-repeat refer to the control of background-images. Acceptable values for this tag are hex-color values (word color values), repeat/no-repeat/repeat-x/repeat-y, url("yourimage.jpg"), numeric positions (rendered from left to right and top to bottom) or descriptive position (top, left, center, etc...) background-color
font controls the way text is rendered by the browser. Fonts must be depreciated, meaning, declare your first pick, then your second, third, and so on, in case the user does not have that font available. font-family
line-height controls the space between lines of text. Acceptable values are numeric.  
text-transform controls the appearance of text regardless of how the code is formatted. Acceptable values are uppercase, lowercase, capitalize (not well supported), or none.  
text-decoration displays additional elements on text. Acceptable values are underline, overline, line-through, blink (not well-supported) or none  
These are called pseudo classes. They refer to an element’s style upon interaction. The “:link” style is what happens when an element has an <a href=""> tag associated with it; “:hover” is what it does when rolled over with the mouse; “:visited” is the style that is used when a link has been visited; and “:active” (which I think is useless now) is the style of the tag for that split second when a user clicks on it. Used in association with the “a” tag, mainly. Most other elements can have a :hover state, but it is not supported in IE 6.
position refers to the position of an element. There are four acceptable values: static, relative, absolute and fixed. Static is the default; relative and absolute position the element on the page, and require additional values such as “top” and “left”, where relative positions an element according to a nearby element, and absolute takes the element out of the page flow and sticks it somewhere relative to the top-left corner of the browser window; fixed takes absolute one step further and makes the element stay in place while other elements scroll around it as needed.  
float takes an element out of the normal flow on the page, and typically puts it next to another element; floating by its side. Acceptable values are none, right, or left. Can be tricky to use, this is a more advanced layout feature, but neccesary for most multi-column layouts.  
clear refers to the way an elements clears other elements. Most useful when other elements are floating – proceeding elements may get caught up in the float. A designation of clear:both; usually helps “restart” the normal page flow.  

Again, these are not all of the possible tags that can be used in CSS, but they are the main ones, and they will help get you started. For more info, I suggest a good reference book like O'Reilly’s CSS Pocket Reference.

Things You Should Know, Part 3: Bonus Lesson

Now it is time to reveal that little trick I mentioned earlier. It’s not that big of a deal, so don’t get too excited, but it can save a lot of time. The widely-supported version of CSS out, CSS 2.2, allows short-cut multi-tags, which means several of the most popular tags and designations can be combined into one tag. Here are some examples:

old way new short-cut
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin: 5px 10px;
(where top and bottom go first, then right and left)
padding-top: 2px;
padding-right: 5px;
padding-bottom: 0;
padding-left: 3px;
padding: 2px 5px 0 3px;
(where elements go clockwise)
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000;
border-top: 1px solid #000;
(elements can go in any order)
  also, secondary selectors can work with similar patterns:
border-weight: 2px 3px 4px 5px;
border-style: solid dotted;
border-color: #000 #ccc #999 #c00;
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 12px;
line-height: 18px;
font: bold 12px/18px Arial, sans-serif;
(this is the preferred order of elements, with normal, bold or italic being allowed as the font-style)
background-image: url("yourimage.jpg");
background-repeat: no-repeat;
background-position: top left;
background-color: #fff;
background: top left no-repeat url("yourimage.jpg") #fff;
(position is not needed as the default is top left. Typically, only a color, repeat and url are needed)

Ready for Lesson 2? Coming...

Notice: Undefined property: StaticPage::$id in /htdocs/content/layouts/studio.php on line 130