Welcome to this review of the Pluralsight course Introduction to CSS by Scott Allen.

Scott is a many time Microsoft MVP and has written and co-authored several books on Microsoft technologies.

This course is part of the learning path Programming in HTML5 with JavaScript and CSS3.

An Introduction to CSS

Scott begins by reminding us how basic websites were before the invention of CSS, and explains what CSS (Cascading Style Sheets) is used for.

Scott uses text from The Lies of Locke Lemora as an example.

“There is no freedom quite like the freedom of being constantly underestimated”

He explains that although you can put CSS rules in style tags inside HTML files, it is a much better practice to put them into external CSS files and use the link HTML tag to point the relevant HTML to the relevant CSS file.

The different versions of CSS are known as CSS Levels.

Scott talks about CSS Level 1, CSS Level 2.1 and CSS 3

For further information see w3 Cascading Style Sheets

Next we begin looking at the style rules.

A selector is a pattern used to apply styles to elements.

There are many different selectors available in CSS:

• simple type selector, e.g. body
• ID selector, e.g. #menu
• Class selector, e.g. .bookTitle
• Descendant selector, e.g. div p
• Child selector, e.g. div > p
• Attribute selector, e.g. img[alt=spacer]
• pseudo class, e.g. a:visited

For further information on CSS3 selectors see the
Selectors section in the CSS3 specification

There are many rules for specifying CSS property values.

Scott introduces you to some of the syntax including:

• keywords
• physical measurements
• screen measurements
• relative measurements
• color codes
• fonts
• functional notation

The best way to learn these is by seeing a demonstration, which is exactly what Scott shows you next.

Although I have used Visual Studio for many years, I never knew about the build style wizard before. However, I have also found that this feature has been deprecated.

You can see more Visual Studio CSS features from Scott Hanselman at asp.net

Cascading and Inheritance in CSS

The Cascade

In this module, Scott Allen explains the rules for determining which selector applies it’s style to an element in cases where there are conflicting styles applied. For example all of these three apply to an HTML div element


body > div {
background-color: red;
}

div {
background-color: black;
}

* {
background-color: green;
}

Scott asks which color will this div be: red, black or green? The correct answer is red, and we will find out why a bit later on.

There are several different sources of style sheets: in addition to the style sheets that you develop, the user can create their own style sheets – they may want to do this to improve accessibility for themselves e.g. making font sizes bigger.

Each browser also has a default style sheet.

Out of these 3 styles, the style sheet that you the developer creates has the highest priority or precedence, and the user style sheet takes precedence over the default style sheet.

He also introduces the IE CSS site, which is a useful website if you need to support old versions of Internet Explorer (versions 6 to 9).

Also in this clip is a demonstration of the !important flag.

Ordering rules

Speaking of important, next up is a very important explanation: the rules of the ordering precedence!

If the same rule is applied twice (e.g. two simple selectors of p), but with different values, (e.g. green and gray) then the rule that is applied last is used (gray).

Developer Tools and CSS

It is important to be familiar with your browser’s developer tools so that you can see which rules have been applied to which elements.

CSS Resets

Content can appear differently in different browsers, and CSS resets are designed to neutralise those differences.

Scott shows the effect of clicking the Internet Explorer compatibility mode button on the look of a web page, and this is due to use of a different default style sheet.

All of the most popular CSS Resets can be found on CSSReset.com

Specificity / Specificity in Action

We return to the red, black or green problem, and learn why red wins.

We learned that div p has a higher specificity than just p and using an id selector creates a rule with an even higher specificity.

For the highest specificity of all you can use inline styles, however this is not a best practice: it is mixing structure and presentation concerns in the same file and the inline style rule is not reusable for other elements.

Inheritance / Inheritance in Action

Scott explains that certain rules are inherited by all child elements.

He gives the example of the font-size property, and shows it in action. He explains the other font properties are also inheritable, as well as list style properties.

In CSS, inheritance is an essential feature of the language, because without it the amount of style rules that you would need to write would be enormous.

Margins, border and padding rules do not typically get inherited by child elements.

CSS and the Box Model

The Big Three

Margin, Border and Padding are the big three.

You can control the width style and color of the border.

Padding adds space between the border of a box and the content of the box.

Margins are the space between a box and any adjacent elements.

Border, Margin, Padding

Scott demonstrates the effect of changing border, margin and padding values on an element.

Top, Right, Bottom, Left

Scott shows the short-hand syntax for setting margins. This rule creates a 3px margin right and left with no margin at the top and bottom:

margin: 0, 3px, 0, 3px

The same top, right, bottom, left syntax can be used for padding and border as well.

Styling Text with CSS

This begins with a discussion about the various fonts available. Several different font collections are described:

• serif
• sans serif
• cursive
• fantasy
• monospace

In general (although this is a matter of opinion) sans-serif fonts are easier to read than serif fonts. Scott shows how to switch to a serif font:

font-family: sans-serif;

Font Selection

We can specify specific fonts to use, including second and third choices in case those fonts aren’t available on the user’s machine.

Font Styling

This clip includes changing font sizes using em, and setting font weight for example:

font-size: 1.2em;
font-weight: bold;

Scott also explains the purpose of the <pre> html tag.

Text Properties

There are many properties for changing the look of text, such as:

• text-indent
• letter-spacing
• word-spacing
• text-decoration
• text-align
• text-transform
• vertical-align

Scott demos these in this clip.

Layout with CSS

In my opinion this is the most important module in the course.

Position

Scott defines the flow of a document, relative positioning, absolute positioning, and fixed positioning.

Another good resource for learning CSS positioning is learnlayout.com

Relative Positioning

Scott demonstrates relative positioning using three button elements and moving the last button relative to the previous button, and then shows relative positioning on a paragraph of text.

He explains that you can also use negative numbers to move the elements in the opposite direction, e.g. this moves an element up by 10 pixels:

top: -10px;

Absolute and Fixed Positioning

Float and Clear

Scott explains that align is a deprecated attribute on an element, and we should use the float property instead, which he demonstrates.

Also demonstrated is the clear property. Either this needs an inline style or a separate div element just for the purpose of clearing the float property.

2 Column Layout

In this example Scott temporarily gives each element a different background color so that we can easily recognize where it applies.

Although browser element inspector tools are more powerful today, I still think this technique is very useful for understanding the effect of your layout changes.

By the end of this clip we have an author info column on the left and a column for our main article on the right.

This example uses fixed widths. You should also consider different devices such as users on mobile phones and tablets with different screen resolutions.

For more information on this see Jon Flander’s Mobile First Responsive Web Design

3 Column Layout

Scott says that 3 column layouts are one of the holy grails of CSS design, and shows a couple of different ways in which one can achieve one.

Everything that you do has some sort of trade-off such as looking worse on a different screen resolution.

Remember that this is just an introductory course because there is much more that you can achieve using layouts.

Recommended Speeds:
Beginners: x1.0
Experienced Amateurs and new Professionals: x1.5
Rusty Professionals looking for a quick refresher: x2.0