CSS Basics

HOSSEIN ZAHED

A M I R K A B I R U N I V E R S I T Y O F T E C H N O L O G Y

H T T P : / / W W W . H Z A H E D . C O M

© 2013 Hossein Zahed - www.hzahed.com

1

CSSCascading Style Sheet

A Style


2

Selector Property Value

p { font-family: tahoma; }

Note the punctuation: The property is followed by a colon (:) and the value is followed by a semicolon(;)

CSS Placement


3

Styles can be set in a stylesheet, in a style element

in the head or in a style attribute

CSS Selectors


4

Single Tag: ID Selector#header { background-color: blue; width: 800px; }#main img { border: solid black 5px; }

All Same Tags: Tag Selectorp { font-weight: bold; }h1, h2, h3 { font-family: Tahoma; font-size: 20px;}

Some Tags: Class Selector.redp { color: red; }p.intro { font-family: Tahoma; color: #cc0000}

The Box Model


5

Each element has padding, border, and margin

Vertical Margins


6

The larger of the two vertical margins will

determine the distance between elements

Visual Formatting Model


7

Pages are built as a series of blocks

Stacked from the top down

Controlling Layout


8

Styles can control size and placement of elements

Example: #nav { width: 12px; float: left; }#news { width: 12px; float: right; }#main { margin: 1px 13px 1px 13px; }

What’s New in CSS 3.0


9

Rounded Corners (Radius)

Colors (RGBA, Opacity)

Background Decorations (Clip)

Text Effects (Shadows, Word Wrap)

Web Fonts (Custom Fonts)

New Box Model

Animation

Image Effects

Resources


10

W3schools

http://www.w3schools.com/ Developer 1(Farsi Language)

http://www.developer1.ir/CSS/

CSS Basics

Education

Transcript of CSS Basics