Etna Interactive
709 Fiero Lane, Suite 43
/ San Luis Obispo, CA 93401
Tel (866) 374-3762
Fax (805) 543-2014

Cascading Style Sheet Basics Part Two: What & How

Welcome back to Part Two of Etna’s CSS “share the knowledge” primer. In the previous post, we talked about the benefits of different types of cascading style sheets (CSS) and where to find it.

What Is CSS?

The basic layout of an element in a style sheet is selector { property: value }. To have more than one property for a selector, separate them with a semi-colon. There are lots of properties that can be grouped together in a type of shorthand.

#calloutbox { border-width: 1px; border-style: solid; border-color: #e6e6e6; } will give you exactly the same results as #calloutbox { border: 1px solid #e6e6e6; }

There are many types of selectors in CSS but it is most important to understand the difference between classes and IDs. A class is identified by a period in the CSS. An ID is identified by a pound sign (#) in the CSS. The big difference between the two is that classes can be used over and over on a page. IDs are exclusive and can only be used once on a page.

The most critical concept to understand about CSS is inheritance. This is the “cascading” part of cascading style sheets. When you nest one element inside another, the nested element will inherit the properties assigned to the containing element… that is, unless you modify the inner elements values independently. The example below shows how the ID called content has a text color that is red. That red color “cascades” into all elements inside #content, until it is overwritten by the blue class.

How Do We Use CSS?

In the CSS:
#content { border: 2px solid orange; color: red; }
#content p { margin: 0 0 10px; }
#content p.bigfont { font-size: 34px; }
#content p.blue { color: blue; }

In the body:
<div id=“content”>
   <p>Text here.</p>
   <p class=“bigfont”>Big text here.</p>
   <p class=“blue”>Some colored text here.</p>
   <p class=“bigfont blue”>Some big, colored text here.</p>
</div>

On the screen:
css2


Sign up for our newsletter to have these articles emailed to you.

Leave a Comment

Fields marked with * are required.