8/9/2019 Introduction to CSS Tutorial

1/4

8/9/2019 Introduction to CSS Tutorial

2/4

2

Contextual Selectors

Use more than one tag name in the selector to target

tags more selectively (follows document hierarchy)

p { color: red; }

div p { color: red; }

IDs and Classes

Only a single instance of an ID may be used perpage

Classes can be used many times

The Cascade Rules Simplified

Selectors with IDs w in over selectors withclasses, selectors with classes win over selectors

with only tags

If the same property for the same tag is defined inmore than one place, style display follows the

cascade hierarchy

Defined styles win over inherited styles

Specifying Fonts

body { font-family: verdana, arial, helvetica, sans-

serif; }

h1 { font-family: serif; }

Sizing Fonts

body { font-family: verdana, arial, helvetica, sans-

serif; font-size : 100% ; }

h1 { font-family: serif; font-size: 0.9em; }

Font Properties

h1 { font-family: serif; font-size: 0.9em; font-style:

italic; font-weight: bold; }

h1 { font: bold italic 0.9em serif; }

8/9/2019 Introduction to CSS Tutorial

3/4

3

Text P roperties

text-indent

letter-spacing

word-spacing

text-decoration

text-align

line-height

text-transform

vertical-align

Styling Links (Pseudo-Classes)

a:link

a:visited

a:hover

a:active

The Box Model Box Borders

h1 { border: 1px solid #000; }

h1 { border-bottom: 1px solid #000; }

#content { border: 1px dashed #369; }

Box Padding and Margins

body { m argin: 0; padding: 0; }

h1 { padding: 10px; border: 1px solid #000;

background-color: #333; }

p { margin: 10px 5px; padding: 5px 10px; border: 1px

solid #000; }

Box Sizing

p { margin: 10px; padding: 10px; border: 1px solid

#000; background-color: #ccc; width: 400px; }

* In all modern standards-compliant browsers, when you set

the width of an element, you are really setting the width

of the content within it , and any padding, borders and

margins you set increase the overall space the element

occupies over and above the specified width value.

8/9/2019 Introduction to CSS Tutorial

4/4

4

Positioning

Static Positioning (default)

Relative Positioning

p.relative { position: relative; top: 20px; left: 30px; }

Absolute Positioning

p.absolute { position: absolute; top: 20px; left: 30px; }

Fixed Positioning (does not work in IE)

Float Property

img { mar gin: 10px; float: left; }

#left { ma rgin: 0; width: 200px; float: left; }

#right { m argin: 0; float: left; }

Clear Property

.clear { clea r: both; }

.clearfix:after {content: "."; display: block; height: 0;

clear: both; visibility: hidden;}

.clearfix { display: inline-block;}

* html .clearfix {h eight: 1%;}

.clearfix {display: block;}

Recommended Books

Stylin' with CSS: A Designer's Guide - Charles Wyk e-Smith

Eric Meyer on CSS - Eric Meyer

More Eric Meyer on CSS - Eric Meyer

Web Standards Solutions - Dan Cederholm

Designing with We b Standards - JeffreyZeldman