Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Styling with CSS3 is good and easy

Thursday, December 11th, 2014 by Servage

css3Originally the HTML standard (Hyper Text Markup Language) included all styling inside the source code. Until HTML version 4 it was therefore often a very confusing task to read and understand large code files because of all their structure, content and design mixed together.

With the HTML standard constantly evolving over time the need for separation of content and style became apparent, thus the principle of dividing these things has become the accepted way of developing websites today. The mantra is simple, just remember that HTML is content, and CSS is design.

Example of mixed content and style

Like described above, the older HTML pages would include style-specific tags such as the <font> tag to set text font, size, color, etc. This is one of the tags which has been completely eliminated by the concept of division between content and design.

You will probably not see this very often in modern sites anymore:

<font face="verdana" color="green">This is some text!</font>

Example of separated content and style

The design information belongs in the so called cascading style sheet (CSS) file which is loaded into the page via a <link> tag in the page’s header section. The example from above would be converted to a pure content tag, for example the paragraph tag:

<p>This is some text!</p>

The corresponding design instructions would be given via a CSS selector with some properties:

p {
  font-family: Verdana;
  color: green; 
}

CSS selectors

You see above how the <p> tag is selected in CSS using “p”. This will essentially select any <p> tag in the entire document. Maybe this is what you want. Then the above sample is fine. However, if you need to select a specific <p> tag, or a group of specific <p> tags, then you need to use some more advanced selectors.

Select by element ID

Below is a sample <p> tag with an id attribute.

<p id="someId">This is some text!</p>

The following CSS selector can select the specific ID:

#someId {
  font-size: 10px;
}

Select by element class

Below is a sample <p> tab with a class attribute.

<p class="myClass">This is some text!</p>

The following CSS selector can select the specific ID:

.myClass {
  font-size: 10px;
}

More selectors

The above examples are the basic ways of selecting with CSS. There are plenty of other methods to select with CSS described here. You can select with combinations of class names, using attribute values, and also logical statements like “the first child element” and more. Understanding and using CSS selectors properly can significantly simplify your design workload when handling stylesheets. However, this requires you to be careful and disciplined regarding your HTML element structure and the use of IDs and class names. It is definitely a good idea to consider – and then systematically implement – a well planned system for your HTML elements.

Advanced styling

There are even further improvements available that range beyond what CSS3 can do. SASS and LESS are interesting technologies which can even further improve your stylesheet workflows. They are basically scripting languages for stylesheets, which allow you to include relative calculations and more inside your styles. For example you could define a base color, and then calculate a lighter variant of it, without having to declare the specific lighter color. This enables you to change only the base color, and everything else follows automatically, if it has been setup to be relative to the base. This is super convenient for larger projects, and something you should look at when you are comfortable with the use of CSS3.

References & More Reading

 

Styling with CSS3 is good and easy, 3.7 out of 5 based on 3 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.