CSS (Stylesheets)

CSS - Cascading Style Sheets

Flexible, code compliant and accesible

CSS is an acronym for “Cascading Style Sheets” and it refers to the code responsible for the layout, styling and overall look of your website. CSS was introduced at the end of 1996, as a step towards improving the accessibility of websites, and is used in conjunction with HTML elements such as <div> and <span>.

  • Flexible
  • Cross-browser compatibility
  • Clean code
  • Structural and presentational separation
  • W3C standard
  • Improves accesibility
  • Device independent files
  • Cross-platform and language
CSS LESS markup

The word “cascading” is used because the styling code is read and applied to the webpage from the top of the css file downwards. By way of a very simplified example, if the first line of CSS tells the web browser to make paragraph text black, but the very bottom line calls for it to be green, the paragraph text will be displayed as green to the visitor, as it is applied after the black. (In practice, there are more complicated rules to take into account, this purely is an illustration for the use of word "cascading".

Previously, websites had been designed primarily with what is now an antiquated layout system which relied on frames and tables. Over time however, more and more people have moved away from frames and tables, as CSS became more popular and more powerful with fewer limitations, whilst the improper use of frames and tables is now seen as “bad practice”, due to the limitations and inaccessible code they use. CSS is encouraged not only by website developers, but also by search engines such as Google and Bing, whose web-crawlers “grade” sites on a number of factors, including their use of clean and “best-practice” code.

There are a number of benefits to using CSS, including being able to have one or more designated files specifically for CSS code. This means it is removed from the main webpage code, helping to keep the webpage code clean. It also makes it a (relatively) simple task for developers to create different styling and layouts for different sized devices, such as mobiles phones and tablets. Using a separate CSS file also means that when required, individual visitors can apply their own styling choices, over-ruling the default settings. This can be useful for situations such as when using screen readers.

The “syntax" of CSS is simple to understand. It is made up of a selector and a declaration block which together make up a rule. These rules make up the style sheet.

The selectors can either point to a specific section of the HTML code, via an “id” or “class” attribute, or they can point to all HTML elements such as a paragraph tag <p> or an unordered list <ul>.

The declaration block (inside the curly braces) then provides the actual styling code, which consists of a property and a value. For example:

p {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	color: #483D8B;
	font-size: 0.9em;
}

The selector in this example selects all of the paragraph tags, note the p, and the applies the Palatino Linotype font, with a purple colour, and a font size of 0.9em.

Font-family provides a range of fonts, in order of precedence (left to right), which web browsers can “fall back” on, if they are missing the font specified. This technique allows for maximum compatibility across as many platforms and devices as possible.

Color specifies the colour to be used for the font. In our example, we have specified it in hexadecimal format which is the preferred method, although it is also acceptable to specify RGB (which would be rgb(72,61,139) in our case) or a colour name (DarkSlateBlue).

Font-size as the name suggests, specifies the size at which the font should be displayed on the screen. Here, we have specified the size in the “em” measurement for best practice, as it is scalable - 1em represents one times the default font size, 2em it two times and so on. It is also possible to provide a pixel size, percentage, inch, centimetre and a few others. Generally, pixel and em measurements are used.

Over its lifetime, CSS has seen a number of revisions and the current version is CSS 3. Each version has brought new revisions, fixes and variations, with each version building upon the previous, ensuring backward-compatibility.

There are some support issues between CSS and the range of web browsers, such as Firefox, Chrome, Safari, Opera and Internet Explorer. Originally - back in the days when Netscape Navigator was the main competitor of Internet Explorer - there was some support for CSS, but it was not complete and contained many bugs. Still to this day, there are bugs and issues with CSS and different browsers, with developers having to sometimes rely on “work-a-rounds” in order to ensure compatibility with the major browsers. However, CSS has come a long way from when it was first introduced and has had a massive impact on not only how websites look, but also how we interact with them.

Call us on 01271 815024

For quotes, advice or just a chat.