An introduction to {CSS} & {CSS3}

What are Cascading Style Sheets (CSS)?

Following on from our earlier 'Jargon Busting Series: An introduction to HTML5' article last month we will now look at CSS3 and why this is a key part in the overall structure, look and performance of a website. As with HyperText Markup Language (HTML), CSS has undergone many changes and variations over its lifetime.

CSS was initially released on 17 December 1996 and is developed by the World Wide Web Consortium (W3C). It didn't become popular until around 2000 when browsers began to use more than the basic fonts & colours and HTML began to evolve using a larger variety of styling. Since then it has gone from strength to strength and we are now on the fourth variation - CSS1 / CSS2 / CSS2.1 - CSS3.

The official line on CSS from the W3C is the following:

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colours, and spacing) to Web documents. World Wide Web Consortium

And this pretty much sums up perfectly what CSS does to a webpage. It controls the way all HTML elements look on a web page and allows the developer to change the look and feel of every element from how big a heading is to the colour of the background. But it does much more than that and we can actually position elements very specifically on a web page with just a line of text. More on that later on.

The filename extension for a CSS file is .css and it can be written in any kind of text editing software.

What does CSS actually do?

Before we look any further into CSS and CSS3 I want to briefly explain where the style sheets come into play when visiting a web page. Take a look at the diagram below.

The three crucial elements of a web page consist of the HTML, the CSS and finally (but not always necessary) the JavaScript (we will come onto JavaScript in a future Jargon Busting article).

1. HTML - the building blocks for all web pages creating areas of content, displaying images and generating lists. This is created in HTML or XHTML.

2. CSS - this stage now defines exactly how each HTML element will look and where it should be positioned. This basically controls everything on the web page and determines how these elements should be displayed to the end-user.

3. JavaScript [optional] - the page has been built and styled from the previous two stages. JavaScript is now ready in the browser and brings web pages to life with animations, (helpful) popups and form validation.

Hopefully, that will give you an idea of how a web page is built up of layers and how the browser then uses these layers to display the page in all of its glory. You can also now get a good idea of why CSS is so important to the make-up of a web page. Without it we would need to add styles directly to every element on a web page which would take time.

What does CSS look like?

Below is what a group of normal CSS selectors looks like. In this example there are three different headings that we have control over on a web page. We have the first; second and third heading selectors (h1, h2, and h3) but notice they all have very different text size (font-size) and also the text colour (color). This would mean that the first heading is quite large and red in colour. The second heading is of medium size and blue and any third heading will be smaller and green. In essence wherever you have a h1 tag they will ALL be large and red. This highlights the purpose of the Cascading Style Sheet quite well.

The style sheet is intended to cascade through all elements on a web page and style whatever it recognises in sequence.

Selectors

h1 {
  font-size: 2em;
  color: red; 
}

h2 {
  font-size: 1.5em;
  color: blue;
}

h3 {
  font-size: 1em;
  color: green;
}

Attributes

An attribute is different to a selector as this is specified by the developer and not the HTML elements themselves. As an example all web pages will use some kind of h1, > or ul and these can be styled accordingly using a CSS selector. You can then use an attribute to be even more specific about how something should look, such as this example making a paragraph bold:

Notice how the tag in the HTML has an id (an identifier unique to the document) of 'makemebold' and in the CSS we match that with p#makemebold. The browser instantly knows to match these two and make the wording bold. Without the CSS attribute the wording would not change.

The exciting arrival of CSS3

CSS3 is the natural progression and includes a lot of new and exciting tricks up its sleeve. Unlike previous versions, CSS3 is also now a series of modules that have been designed independently from each other so that parts of the new CSS3 specification can move faster than others. This means that evolution of the whole new specification can move at a more flexible and timely rate.

Here are some examples of the new CSS3 properties available to use today:

Border Radius (-webkit-border-radius, border-radius) - Round the corners of an element with a specified radius value.

Example: http://neography.com/experiment/circles/solarsystem/ [An experiment with CSS3 border-radius, transforms & animations]

Text Shadow (text-shadow) - Adds a shadow to text, with options for the direction, amount of blur, and colour of the shadow.

Example: https://codepen.io/simurai/full/Atnmy [CSS3 inset text-shadow]

Multiple background images - The ability to apply more than one background image on an element, as opposed to just one at present.

Example: https://www.css3.info/preview/multiple-backgrounds/ [Multiple Backgrounds with CSS3]

Opacity (opacity) - Defines how opaque an element is. A value of 1 means that the element is fully opaque, while a value of 0 means it will be fully transparent.

Example: https://24ways.org/ [Various background opacity elements]

RGBA (rgba) - Adds the ability to specify an RGBA colour value with a level of opacity too.

Example: https://24ways.org/2009/working-with-rgba-colour/ [Working with RGBA colours]

Box Shadow (-webkit-box-shadow, box-shadow) - In a similar fashion to Text Shadow, this adds a shadow to an element giving the illusion that it is lifted slightly off the page.

Example: https://www.css3.info/preview/box-shadow/ [Box Shadow elements] or https://www.ebay.co.uk/ [Top header has a Box Shadow to lift it off the page]

The future of the web

So does this help the website of the future or just add more time and effort in order to create the same designs. Below is a great quote to help me answer that question, according to Dan Cederholm [CSS3 FOR WEB DESIGNERS - A Book Apart]:

'A website's visual experience can be grouped into critical and non-critical categories. The latter are where CSS3 can be applied today.Dan Cederholm

This tells us that CSS3 will not completely take over the world of CSS just yet, but instead add on a few exciting, and in some cases long-awaited properties that will without doubt benefit the way we design and build websites of the future. This modular structure will allow developers to build more visually striking web pages with better effects, aid user experience and make websites load faster (something that will help with mobile websites especially).

Finally...

Check out the CSS3 browser test - https://css3test.com/ and see how many tests your current browser passes and what features are recognised. As with the new version of HTML5, CSS3 is a natural evolution of the standard way of styling web pages and it will continue to grow when further properties (or modules) are released. We would be silly not to take notice of these new techniques but to take them with a pinch of salt. We as designers/developers must decide whether they will aid the way we design web pages or bloat the code behind each web page to the detriment of the page loading speed.