Posts Tagged ‘tag’

Redefining HTML tags with CSS

Monday, September 14th, 2009

As we discussed in our first lecture looking at HTML code, all HTML tags have a default set of visual rules defined by the browser. A significant part of Web design is redefining those rules so those HTML tags look good, even damn good, in our sites.

The example we used in class was to look at the common paragraph, or p tag. Paragraphs unless told otherwise, are black, left aligned, 100% wide (as defined by their enclosing element), have a margin in between them, are displayed in Times or Times New Roman, and are 16 pixels (1 em) tall.

It is quite easy to write the selector for an HTML – just write the name of the tag:

p

The above tag will control all paragraphs on the page. To be honest, you will likely find it much more practical to use contextual selectors to redefine most HTML tags.

CSS Review

Tuesday, October 14th, 2008

By way of review for everyone, here is a quick post going over the basics. These are the things you need to know when using style sheets.

1: Use an external style sheet. This file is going to be named just like any other web file, but with a .css extension. In theory, you will only need one .css file per Web site.

2: Minimize the number of divs you use. We all know the pain that is the Creighton CSS assignment. Break down your layout into a minimal number of divs, with a minimal amount of nesting. Create the divs to follow the flow of the page (container, navigation, sidebar, content, footer, etc). I recommend almost always using a #container div to surround your layout.

3. Give your divs IDs, not classes. Format your divs using IDs. Remember, classes are for small, nitpicky changes that can happen to any element on a page. Divs with IDs are all unique elements, and need their own rules.

4. IDs always start with “#” in your style sheet. A pound sign tells the browser that the rule is to be applied to the element with that ID. No pound sign, no formatting.

5. Classes always start with “.” in your style sheet. Again, the leading dot tells the browser the following is a class. Classes should be rare.

6. Redefined tags don’t have any leading character at all. You will need to redefine at least a few HTML tags in any site, specifically the body, a (including the pseudo-classes), and likely many p and heading (h1, h2, etc) tags.

7. If you want divs to be “side by side,” they will need to float. If you want two columns, both divs will likely need to be floated.

8. Spaces mean something. Don’t use spaces in the names of IDs or classes. 

#content p

In the above example, the space tells the browser that the rule will format any paragraph inside of the #content div.

9. Less is more. Try to work with a minimal set of divs and classes. This does not mean, however, that you will only have a few rules. Within those divs create as many text styles as you need by redefining paragraphs, headings and unordered lists (ul and li tags). This entire blog really only uses five divs.

10. Test your site in all browsers. Make sure you check your site in Safari, Firefox and Internet Explorer 6. IE6 is famous for breaking sites, and still, sadly, quite popular. This will require finding a Windows computer with that browser installed. One day, if all the planets align, I might be able to get a copy of Windows with IE6 in the Murphy lab.

Good luck. Be patient. This is not rocket science.