Posts Tagged ‘rule’

The Anatomy (and Rules) of a CSS Rule

Monday, September 14th, 2009

There are two distinct elements to a CSS rule: the selector and the declaration.

  • The selector describes the element controlled by the rule, which can be an HTML tag, an ID, a class, or basically anything else that can be controlled using cascading style sheets.
  • The declaration tells the browser what should happen to the selected element. The declaration always follows the selector, and is surrounded by brackets: { declaration }

For the following example, the body tag is being selected, and the rule is declaring that the background color be black.

body { background-color: #000000; }

Inside the declaration, there are two elements separated by a colon (:)

  • the property, in this case background-color
  • and the value, in this case #000000, or black

Although Dreamweaver is going to write our rules for us, it is important to understand how the rule is structured, in case you need to be able to read rules designed by someone else later in the semester.

There are also some rules, wait – let’s call them guidelines, to remember when writing CSS rules.

  • Try to only use letters and numbers. Keep numbers to a minimum.
  • Use lowercase letters, but mimicking “Object Oriented Code” conventions is common. Often, capital letters are used to denote separate words, as in newsBox or leftNavigation
  • No spaces allowed. Spaces mean something, so don’t use them simply to separate words.
  • No punctuation allowed. You may use an underscore to simulate a space. As you will soon learn, certain punctuation marks and symbols characters have definite meaning in CSS rules.
  • Use classes sparingly. Classes should be used for nitpicky rules, or for tweaking existing rules. Don’t clutter up your style sheet with a ton of classes.
  • If something doesn’t work, relax. Stop. Take a deep breath. Look at the CSS and document structure again. CSS rules follow pretty strict logical structures. They will do exactly what they are told, but it’s possible that two rules are giving competing instructions. Use the Firefox Web Developer add-on to troubleshoot your CSS.
Tags: , , , , ,
Posted in Web Design |

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.

Tags: , , , , ,
Posted in Web Design |

Contextual Selectors

Monday, September 14th, 2009

Once you have created ID elements on your page, you will probably place additional elements in content inside these IDs. Contextual selectors allow you to control elements inside specific IDs.

Let’s say you defined all p tags to be Arial, size 12, black. However, you have a dark blue div (ID = sidebar) to hold navigation and news on the left side of the page, and the paragraphs inside the news box are showing as black text in a blue box – basically unreadable. You can create a style for the following rule:

#sidebar p

The space between #newsBox and p refers to the fact that the paragraph is inside the newsBox. You essentially read the rule backwards from right to left:

  • p controls all paragraphs;
  • space means inside of;
  • #sidebar refers to the div with ID sidebar

Spaces mean something in CSS rules, so be sure to use them in the proper context. Pun intended.

Tags: , , , , , ,
Posted in Random Stuff |

Need two columns? Float those divs!

Monday, September 14th, 2009

Divs want to display “block” style, meaning they want to sit atop one another. If you want them to work as two columns, you need to set them both to float.

What is a float? Well, the easiest analogy is that floated items allow content placed after them in the code to “wrap” around the floated item. If you have used InDesign, you have probably set the “Text Wrap” characteristics for a photo, allowing text to wrap around one side of the photo in question.

Floating is basically the same thing. By floating a div, you force the next div in the code to wrap around the floated div. In order to create two true columns, you must set them both to float.

Float property in Dreamweaver CSS Rule window.

Float property in Dreamweaver CSS Rule window.

Depending on your layout, you can choose to set them to float to either the left or the right. Web designers will often set them both to float the same direction, to control the space between columns more efficiently.

For an example using the Sequoia exercise, watch the video below:


Tags: , , , , , ,
Posted in Podcast, Web Design |

You Stay Classy, San Diego

Wednesday, January 14th, 2009

To be completely honest, I prefer my style sheets not to have a lot of class.

Classes in a style sheet are best used to make small, specific changes to existing elements. A good use of a class can also be applied to different types of elements, even several elements on a page. In that sense, a class is the opposite of an ID. Classes should also be used sparingly.

In my experience, classes can get very over used, and can be easily replaced by judicious use of contextual selectors, or even things as simple as IDs and redefined HTML tags.

Because classes often require the use of span tags, they tend to change the structural integrity of the code in a small way. I like to avoid this as much as humanly possible.

When creating a class, remember that all classes start with a dot, and should follow the same rules as other selectors (no spaces, etc, etc).

.thumbnailspace

Class names should be very descriptive of the outcome, so that other developers / designers down the line can figure out when to use the class properly. If you are selecting a chunk of text for a class, Dreamweaver will wrap the text in span tags. I would really take a look at how the text is structured to see if there are other alternatives to using span tags before using a class in any instance.

Classes are not bad things. They are just occasionally used when a simpler, more elegant solution is readily available.

Tags: , ,
Posted in Web Design |