Scribd
Upload
313 views

CSS Presentation

This document provides an overview of Cascading Style Sheets (CSS) including why to use CSS, common issues, syntax, selectors, the cascade, validation, optimization, media types, frameworks, and new features in CSS3. Key points covered include using CSS for content separation, consistency, accessibility, different syntax types, selector types, inheritance and specificity of styles, validation tools, optimization techniques like minification, media queries for responsive design, popular CSS frameworks, and demos of new CSS3 features.

Uploaded by

Hannah D
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
313 views

CSS Presentation

This document provides an overview of Cascading Style Sheets (CSS) including why to use CSS, common issues, syntax, selectors, the cascade, validation, optimization, media types, frameworks, and new features in CSS3. Key points covered include using CSS for content separation, consistency, accessibility, different syntax types, selector types, inheritance and specificity of styles, validation tools, optimization techniques like minification, media queries for responsive design, popular CSS frameworks, and demos of new CSS3 features.

Uploaded by

Hannah D
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 40

CSS

C A S C A D I N G S T Y L E S H E E T S
sneak peak

why use css validation


headaches optimization
syntax frameworks
the cascade CSS3
selectors
why use css
content presentation
maintainability
consistency
accessibility
headaches
Gecko Presto Trident WebKit
debugging?
http://getfirebug.com/
syntax
selector
property value

p {
font-size: 1em;
color: #fff;
declaration }
external (<head>)
<link rel="stylesheet" href="default.css"
type="text/css">
internal (<head>)
<style type="text/css">
p {margin-left:20px;}
</style>
embedded (first in either internal or external)
@import url("default.css");
inline (<body>)
<p style="color:sienna;margin-left:
20px">This is a paragraph.</p>
3 types of simple selectors

type selector
class selector (.)
id selector (#)
http://w3schools.com/css/
the cascade
browser style sheet

user style sheet


normal

author style sheet


normal

author style sheet


!important

user style sheet


!important
demo
http://developer.yahoo.com/yui/examples/reset/reset-
simple_source.html
cascade within author style sheet

External

Internal

Inline
selectors
demo

http://www.cssdesk.com/
code
html css
<div>   /* Descendant Combinator */
<h1><a href="#">Hello World!</a></h1> h1 a {
   <p><em>"Donec congue lacinia dui, a porttitor color: red;
lectus condimentum laoreet."</em> -Nunc</p> }
   <ul>
       <li>First</li> /* Child Combinator */
       <li>Second</li>
div > em {
       <li>Third</li>
   </ul> font-size: 10pt;
   <p>Mauris vel neque sit amet nunc gravida }
congue sed sit <a href="#">amet purus</a>. Quisque
lacus quam, egestas ac tincidunt.</p> /* Adjacent Sibling Combinator */
<p>Nulla facilisi. Duis <a href="#">aliquet h1 + p {
egestas</a> purus in blandit. Curabitur vulputate, font-weight: bold;
ligula lacinia scelerisque tempor, lacus lacus }
ornare.</p>
</div>
/* General Sibling Combinator */
<div>October 20, 2010 <em>4:30 PM</em></div>
ul ~ p {
font-family: Georgia;
}

/* First & Last Child Pseudo-class*/


p:first-child{
border-top: solid 2px black;
}

p:last-child{
border-bottom: solid 2px black;
}
validation
http://jigsaw.w3.org/css-validator/
optimization
“minify”
color values
shorthand syntax
zeros
last semicolon
comments
white-space

Source: http://perishablepress.com/press/2010/06/21/how-to-micro-optimize-your-css/
Put CSS links at the top of your <head>.
Use <link> instead of @import.
Minimize number of linked files.

Source: AdvancED CSS, Joseph R. Lewis and Meitar Moscovitz


media types
<head>
<link rel="stylesheet" href="default.css"
type="text/css" media="___">

embedded
@media _______ {...}
braille
embossed
handheld
print
projection
screen
speech
tty
tv
http://www.ifadey.com/
demo
http://www.alistapart.com/d/responsive-web-
design/ex/ex-site-FINAL.html
demo
/*layouts smaller than 600px, iPhone and mobiles*/
@media handheld and (max-width: 480px),
screen and (max-device-width: 480px),
screen and (max-width: 600px) {...}

@media screen and (min-width: 920px) {...}


@media screen and (min-width: 1350px) {...}
@media screen and (min-width: 1500px) {...}

/*Just iPhone*/
@media only screen and (max-device-width: 480px) {...}
frameworks
http://www.blueprintcss.org/
demo

http://www.blueprintcss.org/tests/
http://developer.yahoo.com/yui/2/
http://960.gs/
CSS3
demo

http://csswizardry.com/css3/

You might also like