Web Developer Class: CSS Basics

By Vincent Wright

Applying Properties Using ID Selectors

ID selectors are added to the HTML element by using the "ID" attribute. ID selectors begin with # and are case sensitive. Unlike class selectors, ID selectors are unique across HTML elements. You can have the same ID selector in other HTML files, but there must only be one in the HTML document.

<style type="text/css">
#error
{
font-weight: bold;
color: red;
}
</style>


<p id="error">This is bold, red text.</p>

You can combine all three together.

<style type="text/css">
p
{
font-family: arial;
}
.makeRed
{
color: red;
}
#error
{
font-weight: bold;
}
</style>


<p id="error" class="makeRed">This is bold, red text with the arial font.</p>

CSS Syntax

The syntax of CSS is very important. CSS consists of 2 items: the selector and one or more declarations. The selector, as discussed above, can be a HTML element, a class selector, or an ID selector. The declaration syntax is a property and value separated by a colon (:). The end of the declaration must have a semicolon (;). This allows for multiple declarations to be used.

p
{
font-family: arial;
}

In the above example, "p" is the HTML element, "font-family" is the property, and "arial" is the value. Notice that there is a colon (:) between the property and the value, and there is a semicolon (;) at the end of the line. Also, the braces "{}" enclose the set of property/value pairs.

You can add the same declarations to multiple selectors by separating the selectors with a comma (,).

p, div, .arialFont, #error
{
font-family: arial;
}

As you can see, we made the <p> and <div> tags, the "arialFont" class, and the "error" ID use the arial font. This allows you to combine common properties. The advantage of this is a smaller file that is downloaded to the user which results in a fast loading page and less bandwidth used.

p, div, .arialFont, #error { font-family: arial; }

The example above shows how you can condense everything to one line to help make the file smaller. Using this format may reduce readability.

CSS Length and Percentages

Some CSS properties require length or percentage values. Length values are expressed using either relative units or absolute lengths. Relative units specify a length property relative to another length property and are expressed in em, ex, or px.

  • The em unit is the font-size of the current font. If a font-size is 10 pixels, then 1 em unit would be 10 pixels. You can specify an em with a decimal value, such as, .5. This would make the 1 em above 5 pixels instead of 10 pixels. You can also set the em unit to a value of 1.5 making the 10 pixels 15 pixels. The em unit is a good unit of measurement because it will allow the page to scale to different devices.
  • The ex unit is the x-height of the current font. The x-height of the font is the height of the lowercase "x". One ex unit is about half the height of the current font.
  • The px unit is the pixel height of the current font and is relative to the viewing device.

Absolute lengths consist of inches (in), centimeters (cm), millimeters (mm), points (pt), and picas (pc). A point is equal to 1/72nd of an inch and one pica is equal to 12 points.

Most designers will use pixels (px) for positioning elements and em for font sizes. Using em for font sizes allows for better accessibility and will allow the page to scale properly on different devices.

Percentages are a calculated value of some other element. This is usually the length of the other element. Percentages are express using the percent sign (%). The following example shows how the font-size for the body is set for 12 pixels, but the class, mySmallerText, will be 50% of that size or 6 pixels.

body
{
font-size: 12px;
}
.mySmallerText
{
font-size: 50%;
}

Comments

Comments can be added to the CSS file and are ignored by the browser when it interprets the file. Comments start with "/*" and end with "*/". Comments can span multiple lines, and can help with edits later. They can also be used to section off certain parts of the CSS file. Another thing comments are good for is to block out certain lines for testing changes. Keep in mind the comments are downloaded with the CSS file which will add to the overall size of the document.

/* Comments go here */

/* This comment
is on multiple
lines */

Conclusion

As you can see, CSS provides a better way of decorating HTML documents. If at all possible, it is always best to use a separate CSS file to hold the styles. Multiple styles for the same selector are merged into one style with the last property being applied over the others, hence the "cascading" part of Cascading Style Sheets. We will discuss text styling in our next article. See you then!




Page 2 of 2

Previous Page
1 2
 

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date