A Beginners Guide to CSS

This guide will look at a beginners guide to CSS. CSS or Cascading Style Sheets was a method, or a ‘style sheet language’ introduced back in the early 90s to describe the layout and formatting of a web page on the Internet. It was seen as a way of separating out the document layout from the structure. It was decided early on the HTML itself shouldn’t be used as a way of describing how a page should look and that instead a specific and separate method should be used for this. The first ever proposal for how this should work, was in the form of a draft paper published in 1994 by Hakon W. Lie of CERN, called Cascading HTML Style Sheets: A Proposal.

Today the CSS language in combination with HTML is used as the ubiquitous method of specifying the presentation within a web browser. If you’d like to read more on Hypertext Markup Language , read our introduction to HTML.

The power of the CSS language is in using it to create consistent and attractive page presentation on an Internet website. When a browser reads from a cascading style sheet it should be able to format and therefore present the page as outlined by the CSS – in other words, the CSS dictates how the web page should look and this includes:

• Font type, colour, size, shadows and spacing
• Page layout and alignment and column layout
• Page element type and placement including backgrounds and borders
• List styles (e.g. bulleted, image based and so on)
• Positioning of elements

How Cascading Style Sheets Works

Cascading Style Sheets is a software language. It is rooted in the fact that HTML was never originally meant to contain ‘tags’ that told a page what it should look like. For example, the tag <font> was needed to be added to every single Internet web page when HTML was used before the advent of Cascading Style Sheets. This meant that for websites with many pages, you’d have these formatting tags on every single page and it made maintenance of those websites a nightmare. When it comes to page layout, CSS is the best way to handle it.

When Cascading Style Sheets came along it meant you could take this tag information and store it in a separate file that the HTML simply called upon when displaying that page. It means you can maintain a single file for an Internet website with hundreds or even thousands of pages, and make changes easily and quickly that then populate throughout the site.

The file type extension created when you create a CSS file is called a .css

Cascading Style Sheet language has basic syntax rules:

• Selector – which points to the element you are styling
• Declaration block which contains:
  • Property name
  • Property value

Selector {

Property: value;

}

For example:

p {

color:green;

text-align:left;

}

Another example:

h3 {

font-family: Verdana, Arial, Helvetica, sans-serif;

}

This would set the colour of your font (property), within the paragraph, i.e. p (selector), to be green (value) and text-align (property) it left (value). Formatting the code just makes it easier to read.

Once you have your Cascading Style Sheet you then need to decide what type it is and this determines how you insert it into your website, you have four choices:

1. Internal – this is for exception pages, where a single page may have a specific style of its own
2. External – this allows you to control the look and feel of a website from a single file. Each HTML page must contain a link to the .css file
3. Inline – this is used for styling a single element of a webpage, it’s really for special occasions and rarely used
4. Multiple cascading style sheets – you can use more than one CSS files in the same website by just pointing to the differently name .css files form the appropriate HTML pages

To generate CSS files you need to check out the full list of CSS properties. This will give you an idea of the range of web items that you can control using CSS.

EnjoyCSS is a useful Internet site that shows you the basics of CSS coding.

Formatting

Formatting your Cascading Style Sheet code makes it easier to read and edit. There are several online formatting tools for your CSS code, including this online CSS formatting website.

CSS 3.0 and Previous Versions

There have been a number of versions of Cascading Style Sheets over the years, the most recent being CSS3

Each version has built upon the previous one. CSS1 was introduced in 1996 by the Worldwide Web Consortium W3C. As mentioned previously it was to allow for easy formatting and layout of websites. CSS1 was pretty basic and CSS2 followed two years later. This version included support for CSS selectors which allow you to select the content you want to style making webpage styling simpler.

CSS3 has been an ongoing work since around 1999 and in 2012 the most recent CSS module were published by the CSS working group at W3C. CSS3 has some very powerful new features including more properties accessible using JavaScript (see also Making CSS dynamic below) and making it more compatible with HTML5. It also has lots of fancy new design features including the ability to create box shadows and rounded corners.

More information on using CSS3 can be found across the Internet.

Making CSS Dynamic

There may be times when you need to dynamically change the appearance of an Internet website page or pages. For example if you want visitors to choose themes, or allow them to increase the font size. One way of doing this is to use JavaScript language with your Cascading Style Sheet and making the changes at runtime using JavaScript. This method offers a very powerful way to manipulate style elements.

There are a couple of ways you can use JavaScript to dynamically change your Cascading Style Sheet, these are:

1. Add/remove classes
2. Directly set an element and style object

Method 1, Style Objects and HTML elements: This specifies a Cascading Style Sheet property and value to change. To style elements using JavaScript you need to access that element. Once the element is accessed you can then give the property in question a value. To access the element you use the querySelector method in JavaScript

Method 2, Add/Remove Classes: This can be simply done using the JavaScript functions, addClass or removeClass. These then change the style rules. You need to call addClass or removeClass, and then pass in the argument for the element in question and then the class name.

More here in JavaScript explained.

Internet Browser Support

The trouble with browsers is that they keep getting updated to fix bugs and things like zero day vulnerabilities, but people are creatures of habit and don’t update. This means that when CSS is upgraded to add in new features, as has been done in CSS3, they sometimes don’t work as well with older browsers. There is a technique called progressive enhancement which is a methodology that allows you to create the best user experience across all types of browsers and internet connections.

Cascading Style Sheets, along with HTML and JavaScript languages can be used together to create a good user experience across most types of browsers. External linked CSS needs to be utilized to get good accessibility across browser types. You need a main CSS that contains all of the rules of your site and sub-CSS files that link off this sheet using <link> tags, so if the browser doesn’t support CSS the files won’t be downloaded.

CSS3 browser support table can be found here: http://www.w3schools.com/cssref/css3_browsersupport.asp

This online tool checks your browser for CSS3 feature support: http://css3test.com/

WordPress open source software

We like WordPress web design as it uses CSS language as the underlying code for its themes. WordPress themes use a combination of CSS, template files and template tags which allow dynamic blog customisation.

The cascading stylesheet used by a content management system such as WordPress theme control the design of each element. The sheet allows you to manipulate the look of the page and is found within the style.css file of each template folder.

WordPress specifies a set of CSS code standards or rules for writing CSS, so follow these if you wish to change the underling CSS of a theme or to create your own theme.

Other website builders also use CSS to control the look of the underlying theme. Many of them will give you access to a CSS style editor that allows you to edit the underlying CSS of the websites theme. You can get more website builder info here