More Related Content
Similar to CSS Basics (20)
More from Hossein Zahed (13)
CSS Basics
- 3. CSS Placement
3
Styles can be set in a stylesheet, in a style element
in the head or in a style attribute
© 2013 Hossein Zahed - www.hzahed.com
- 4. CSS Selectors
4
Single Tag: ID Selector
#header { background-color: blue; width: 800px; }
#main img { border: solid black 5px; }
All Same Tags: Tag Selector
p { 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}
© 2013 Hossein Zahed - www.hzahed.com
- 5. The Box Model
5
Each element has padding, border, and margin
© 2013 Hossein Zahed - www.hzahed.com
- 8. 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; }
© 2013 Hossein Zahed - www.hzahed.com
- 9. 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
© 2013 Hossein Zahed - www.hzahed.com