AzureDays

Cascading Style Sheets (CSS) is a simple mechanism for adding style to Web documents, such as fonts, colors, spacing. HTML and CSS go together like peanut butter and jelly.

It is designed to separate content from formatting. This separation improves accessibility, provide more flexibility and control how your page looks, enables multiple pages to share the same formats, and reduce complexity and repetition in structural content.

CSS can allow the same page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice.

As of January 2014, there are over fifty CSS modules published from the CSS Working Group. Selectors Level 3, Namespaces and Color― became W3C Recommendations in 2011. Media Queries, CSS Style Attributes have become standards in 2012-13.

Some modules (including Backgrounds and Borders, CSS Fonts Module Level 3, CSS Text Decoration Module Level 3, CSS Conditional Rules Module Level 3, and Multi-column Layout among others) have Candidate Recommendation (CR) status and are considered moderately stable. At CR stage, implementations are advised to drop vendor prefixes.

Browser Support

You can determine which browsers use the CSS features you want by checking canIuse.com with CSS. According to the site, more than 80% of browsers globally support the key CSS3 features.

You can also use Modernizr to check for CSS feature support and provide workarounds when a key feature is not supported.

In addition, browser developers have written their own implementation of many key features. For example, you might see:

-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 

-webkit and –moz or –ms specifies browser specific implementation of a feature. This is by design. The browser will select the feature it already knows and then default to the standards features, as they come of age.

Getting Started

You can get started with CSS from a tutorial on Getting started with CSS from the Mozilla Developer Network. The tutorial is for beginners introduces you to Cascading Style Sheets (CSS). It guides you through the basic features of the language with practical examples that you can try for yourself on your own computer and illustrates the standard features of CSS that work in modern browsers.

In this post, we will cover some of the key points.

• Rules, Selectors, Declaration
• CSS Cascade Scheme
• Resetting the Browser

In following posts, you will learn about:

• Positioning Using CSS in CSS3 Tutorial–Positioning & Inline
• Selectors in CSS3, jQuery Tutorial – Selectors Reference  
• Font-face and Web fonts 
• Boxes (and Corners)
• Responsive Website Using Media Queries
• SVG with CSS

Rules, Selectors, Declaration

Styles don’t smell or taste anything like HTML, they have a format of ‘property: value’ and most properties can be applied to most HTML tags.

A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block.

Embedding Styles

The reset styles and others that will apply to multiple pages should go in their own file. You load the file using the link tag:

You can embed your styles in an internal style sheet:

You can use inline styles.

But which one wins?

CSS Cascade Scheme

Three main sources of style information form a cascade. They are:

• The browser’s default styles for the markup language.
• Styles specified by a user who is reading the document.
• The styles linked to the document by its author. These can be specified in three places:
  • In an external file: this tutorial primarily discusses this method of defining styles.
  • In a definition at the beginning of the document: use this method only for styles that are used only on that page.
  • On a specific element in the body of the document: this is the least maintainable method, but can be used for testing.

You can think of the order specifically as follows:

Resetting the Browser

The goal of a reset style sheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. All browsers have presentation defaults, but no browsers have the same defaults. For example, some browsers indent unordered and ordered lists with left margins, whereas others use left padding.

Your reset.css file is meant to be a document that you change for your particular needs. Fill in your preferred colors for the page, links, the default styles that you want to use on your Website.

The reset file is the first thing your browser sees. So it needs to be at the top of the <head> tag.

Eric Meyers has put together a reset style sheet and placed it in the public domain as a starting point for you. See CSS Tools: Reset CSS. You can use the one Eric proposes as a starting point for your own.

You might use a more sophisticated HTML5 page template, such as HTML5 boilerplate or Twitter’s Bootstrap. Both of these templates reset the browsers to a common style. More on these tools in later posts.

References

• CSSTutorial.net
• Bootstrap

Sample Code

Sample code is available on GitHub at the DevDays repository. See https://github.com/devdays/html5-tutorials