Estelle Weyl
www.standardista.com
@estellevw
@standardista
CSS in Depth V2
estelle.github.com/cssmastery/Me
CSS3 Features Displaying now?
- CSS3 Selectors
- linear gradients
- opacity
- RGBA colors
- border-radius
- transforms
- transitions
- animations
- text-shadow
- fonts
Opacity is from CSS2
Cascading Style Sheets (CSS)
Stylesheet language used to describe the presentation of a document written in HTML
HTML
<div id="flakes"> <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> </div> <div class="snowman"></div>
Separation of Concerns
Content
HTML
Presentation
CSS
Behavior
JavaScript
CSS tells the browser how HTML content is to be presented to the user
Including CSS
External Style Sheet
<link href=“stylesheet” href=“path/file.css” />
Embedded Styles
<style>
body {}
</style>
Inline Styles
<p style=“color: black”>Lorem ipsum</p>
Why Use External Stylesheets:
- Allows reusability
- Eases maintainability
- Changes are sitewide
- Changes are instantaneous
- Interchangeable presentation layer
Linking to CSS
<link rel="stylesheet"
media="screen"
href="/205/205.css"
type="text/css" />
selectorA {
property1: value1;
property2: value2;
}
selectorB {
property1: value3;
property2: value4;
}
selector:pseudo-class::pseudo-element {
-vendor-property: value;
}
selector[attribute],
selector ~ relation {
property: -vendor-value;
-vendor-property: -vendor-value;
-vendor-property: weirdsyntax;
}
p {
margin: 40px;
color: magenta;
}
input[type="search"] {
border-radius: 5px;
background-image: url(image/search.jpg);
}
@at-rule {
property: value;
}
@at-rule {
selector {
property: value;
}
selector2 {
property: value;
}
}
Tools for generating CSS?
Text Editors
- Aptana Studio*
- BBEdit
- Brackets*
- Coda
- Codelobster PHP
- Espresso/CSSEdit
- Notepad++*
- Sublime Text
- TextMate
- UltraEdit
WYSIWYG
- Dreamweaver
- Aloha Editor
- Maqetta
- BlueGriffon
Don't use word processing applications!!
Preprocessors
CSS preprocessors add functionality additions like variables, nesting, and mixins (during development).
- Sass
- Stylus
- LESS
Postprocessors?
Debuggers
- Firefox ➫ Firebug ➫ Firefox Developer Tools
- Opera ➫ DragonFly
- IE and EDGE ➫ F-12
- Safari ➫ Web Inspector
- Chrome ➫ Developer Tools
- Mobile ➫ Weinre
- Mobile ➫ Remote debugging by IP
- Mobile ➫ Tethered debugging