CSS Back To Basics: Terminologies Explained

CSS or Cascading Stylesheets complete the defining language of design rules for our web. Artists everywhere are using CSS on a daily basis to create, organize, and encode sets of rules for basic website layouts. This has become the most popular language for front-end design and provides amazing abilities with the recent release of CSS3. But what does all of this code actually mean?

The language itself has been fully developed for a few years now. Confusion can arise mostly due to miscommunication and misuse of similar terms. CSS brings a lot of new concepts to the table. We’ll cover some of the most popular terminology to master as a CSS guru.

Why Specialize with CSS?

This question has been posed before, and even entering 2011 we can see the same results popping up. CSS is a robust language not in the likes to scripting or programming. It’s a style language, more specifically code used to describe how a web page should behave.

Using CSS we can directly manipulate attributes from individual HTML elements. All the blocks, paragraphs, links, and images can be affected through CSS rules. Refining presentation semantics for the web has always been a huge step. This is the main reason why CSS is still the leading player for designers – nobody has created anything better!

Properties and Values

This is the simplest way to break into CSS. All code falls down into two actions: choosing an element to apply designs and what to apply. The latter is created through property/value pairs.

As an example color: red; is a very simple property/value pair. The property we used is color which allows us to pass in any acceptable value to change text color. This could also be hex code or RGB (Red-Green-Blue) color data. Many times designers won’t mention the idea of values because it can be misleading.

Properties and values are really a single idea. Every property declaration requires a value, and values on their own are meaningless. There is much documentation online which goes over the many different properties and how they affect HTML elements. I would recommend purchasing a CSS reference book from any nearby book store. They are fairly cheap and hold most all the information you’d need.

Selector Values

Selectors are needed to complete an entire line of CSS code. These are what we declare to set what type of element we are targeting. There are many selectors and many are so convoluted the average designer wouldn’t need the skills. Check W3’s selector docs if you want to find out more.

The simplest way to begin style definitions is to use bare elements as property selectors. This means manipulating root code such as p for paragraphs, div for divisions, and even body and html can be used to manipulate the entire web page document. Below is a quick example of styling all paragraph elements.

p { font-family: Arial, sans-serif; color: #222; font-weight: bold; }

What gives CSS real weight is how accurate selector sniping can be. The best way to accomplish targeted styles is through 2 methods known as classes and IDs. These are commonplace ideas in HTML where you can set any element to have an ID and class value through attributes. Then using CSS it’s simple to apply styles to that specific block.

p#firstpar { font-size: 14px; } /* styles paragraph with ID of "firstpar" */
p.comment { font-size: 1.0em; line-height: 1.3em; } /* styles paragraph(s) with class of "comment" */

Length Units and Values

Often times these terms get mixed up, not a big surprise. Values were explained earlier as the placement we use to describe a property. Length units are also values in that they are used to describe a property.

The difference is these values require numerical data and therefore must return some form of units. Pixels (px) are the most prevalent and can be used for most anything: width/height, font size, padding/margins, to name a few.

Other than these you may see percentages (%) used often through fluid layouts. When setting width values to a percent the compiler will assume 100% to be the entire width of the web browser. This gives a lot of precision to designers when applying styles to layout structures and even page typography.

The Declaration Block

Now after putting all of these terms together we are finally able to discuss the core idea behind stylesheets. Blocks of code are used to delineate topic areas and specify element detailing. For example, below is a line of code for a simple navigation container:

div#nav { display: block; width: 100%; padding: 3px 6px; margin-bottom: 20px; }

The easiest way to display this code is to line properties one after the other. CSS developers have used blocks of code to break each property onto its own line. This agenda not only takes up much more room but reduces the ability to “skim” your sheet to find exactly what you need.

A better way to break up blocks of code is to separate convoluted elements into onto their own after they reach a threshold. This number is personal and will be different between developers. It’s the tipping point where logic dictates it silly to keep everything on a single line, mostly because of readability.

Below I’ve written an example of a block of navigation properties all together. This practice keeps deeper elements in the same location so edits to all navigation elements are much simpler.

div#nav  { display: block; width: 100%; padding: 3px 6px; margin-bottom: 20px; }
div#nav ul { list-style: none; display: block; }
div#nav ul li { float: left; margin-right: 10px; font-size: 12px; }
div#nav ul li a { color: #0f0f0f; text-decoration: none; display: inline-block; padding: 2px 5px; }

Possible Advancements from CSS2/CSS3

In the headlines recently has been non-stop talk about the amazing benefits from CSS3. But what has really changed in the language? Clearly old code will still run just fine. This at least shows complete backwards-compatibility between compilers (always a good thing).

Major differences are mostly related to new properties. These allow for rounded corners and drop-shadow effects to be rendered in-browser. CSS3 also offers new tools for describing colors in-document. HSL (Hue-Saturation-Lightness) is the newest in addition to HSLA which includes an Alpha channel to reduce opacity.

Attribute selectors are a huge step forward in regards to straight markup styling. With this style of code you can target a specific element name which contains attributes with certain values. These are mostly useful when working with markup such as XML where there aren’t standard design principles to manipulate nodes. The example below is a relatively simple idea:

div[attrib^="1"] { /* styles here */ }

The code above is part of the CSS selectors library. This would affect all div elements with an attribute “attrib” which also holds the value “1”. If this is still confusing reference the example below to clarify. In theory these two selectors should perform the same actions.

p[id^="primary"] { /* styles */ }
p#primary { /* styles */ }

Conclusion

After breaking down a few of the most overly-confused terms CSS seems like a walk in the park. The language is very intuitive and beginners can start designing within the first few hours on-hand. This is what makes CSS so popular among web developers.

The benefits of CSS3 have only just started to take effect. Over the new few years evolving web trends will show us just how much control we truly have over web page design. CSS currently stands proud as the dominant language for front-end website styling. Practicing into even rudimentary intermediate-level skills can produce bountiful design experience and further knowledge.