Tools of the Trade

Lesson 7: What is CSS? Principles of Styling

CSS stands for Cascading Style Sheets. It is a 'stylesheet language' used to control the presentation of an HTML document.

Different Methods of Using CSS

Inline CSS

This was the method used to format and style text in the previous lesson. This is the easiest and quickest method to use, although not the cleanest.

CSS in the Head

This method involves placing your CSS between <style> and </style> inside the <head> ... </head> tag.

Between your style tags, CSS is written in rule sets that start with the tag name or reference by class or ID, followed by a space and your CSS properties and values wrapped around braces { }.



External CSS File

This method involves placing your CSS in an external file saved with a .css extension and referencing it using <link rel="stylesheet" type="text/css" href="theme.css"> inside the <head> ... </head> tag.

The code sample below is equivalent to the code sample above in method two, except using and referencing an external CSS file instead of having the CSS in the head of the HTML document.

CSS File saved as lesson07-externalcss.css



HTML File saved as lesson07-externalcss.html



Classes and IDs

IDs can be applied to just one reference so this can be your logo, introduction paragraph, etc. Classes can be applied to multiple references. For example, you might want to create a class named .highlight since most likely there will be multiple instances where you would need to apply this .highlight class.

Useful CSS Properties

Below are some of the commonly used CSS properties that I use often myself. I included sample values for your convenience.


color: red;
background-color: black;
background-image: 'background.jpg';
background-repeat: no-repeat;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
padding-top: 10px;
border-top: 2px;
border-top-style: solid;
border-top-color: green;

CSS Shorthands

Some CSS properties have shorthand ways of producing the same end result but writing less code. Below are a few commonly used CSS shorthands.

Margin and Padding

If the margins across all sides are the same, you can use margin: 10px;. If your top and bottom margins are the same and side margins are the same, you can use margin: 10px 20px;. The first value denotes top and bottom and second value denotes the sides. Even if the margins on each side are different, you can still use a shorthand. For example, you can use margin: 10px 12px 20px 15px; where the values denote top, right, bottom and left. Think of how a clock moves.

Padding shorthands are the same as margin.

Background

The values of background-related properties can be included within just the background property. For example, background-image: 'background.jpg'; background-color:black; background-repeat: repeat-x; can be shorthanded to background: url('background.jpg') black repeat-x;.

Border

Border behaves similarly to background in the sense that all of the values related to border can be included within the border property. For example, instead of border-size: 2px; border-style: dotted; border-color: red;, you can use border: 2px solid red;.

Resources

W3 Schools Full List of CSS Properties
http://www.w3schools.com/cssref/

Subtle Patterns
http://subtlepatterns.com/