Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

CSS3

Prof. Cesare Pautasso
http://www.pautasso.info
[email protected]
@pautasso

Applying CSS

How to apply a stylesheet to a document?

Straight into the HTML tags
```
<p style="color: red">text</p>
```
HTML should be presentation-free, so in-line styles should be avoided as much as possible
With internal, embedded styles
```
<head><style>p {color:red}</style></head>
```
Embedded styles should be used only with special pages that should look different than the others

With external, referenced styles, stored in separate CSS files

<head>
    <style type="text/css">
       @import url("style.css") 
    </style>
    <link href="style.css" rel="stylesheet"/>
</head>

CSS Rules

CSS is a declarative language. It uses rules to specify how parts of a document should be formatted

selector { property: value }

Each CSS rule has:

A Selector targeting the document elements
to be formatted using one or more property-value pairs

CSS Rule Example

body {
   font-size: 0.8em; 
   color: navy;
}

Apply this rule to the body element.
Set the font-size to 0.8em and the text color to navy.

Property Value Types

Property values have different data types (String, Size, Enumeration, Color, URL)

h1 {
     font-family: "Arial";            //String
       font-size: 1.1rem;              //Size
      font-style: italic;             //Enum
           color: navy;               //Color
background-color: #001122;            //Color
background-image: url("/img/h1.png"); //URLs
     text-shadow: #000 2px -2px 1px;     
}

Colors

Colors can be represented with:

RGB values
```
rgb(255,0,0)
```
Hexadecimal RGB values
```
#ff0000 = #f00
```
enumeration
```
black, yellow, red, 
transparent
```
RGBA values
```
rgba(255,0,0,0.5)
```
HSLA values
```
hsla(0,100,50,1)
```

http://rightjs.org/ui/colorpicker/demo

Lenghts and Sizes

Lenghts can be expressed in several units of measures

em the height/width of an M character...
rem ...of the font of the root element
px pixels
% percentage relative to the parent's value
0 (Zero) does not need a unit

A Web page should be flexible, so use pixel sizes sparingly

Pixels recommended for border thickness or spacings
Very bad for font sizes (some browsers will not zoom)
Percentages can be dangerous when used with nested tags

Main Properties

background (-color, -image, -position)
border (-width, -style, -color) x (-top, -right, -bottom, -left)
border-radius
font (-family, -size, -weight)
text (color, direction, letter-spacing, text-align, 
      text-decoration, text-transform, word-spacing, shadow)
tables (border-collapse, caption-side, empty-cells)
list (-style, -style-image, -style-type)
margin (-top, -right, -bottom, -left)
padding (-top, -right, -bottom, -left)
layout (display, clear, float, position, visibility, cursor)
positioning (left, right, bottom, top, clip, overflow, 
             vertical-align, z-index)
dimension (height, width, 
           max-height, max-width, min-height, min-width)
transform
transition

http://www.w3schools.com/cssref/

Selectors

Control which document elements are affected by a rule. Selectors refer to:

Tags	`h1`
Classes	`.navigation`
IDs	`#home`
Wildcards	`*`
Pseudo-classes	`:hover`

Selectors can be combined, grouped, and nested to make them more selective

Universal Selector

* {
  color: #000;
  margin: 0;
  padding: 0;
}

Use the * selector to setup default properties of ALL elements of your page that do not have a more specific style
Browser default may differ, so this helps you to start with known formatting defaults

Tag Selector

body {
  color: #000;
  background: #fff; 
  font-family: verdana, arial, sans-serif;
  font-weight: normal;
}

This applies the formatting to elements of a certain type (e.g., the <body> of a page)
Also all children elements within the <body> will inherit the same format (unless there is an overriding rule)

Class Selector

.navigation {
   text-decoration: underline;
}

The same rule is applied to all document elements of a particular class
(independent of their element tags)
```
<p class="navigation">Home - Introduction</p>
<div class="navigation">...</div>
```
More than one element can share the same class

The same element can be tagged with multiple classes

<p class="navigation active">Home - Introduction</p>

ID Selector

#home {
  margin-top: 2p;
  border-bottom: 1px #abc solid;		
}

The rule applies only to the document element with the given id attribute

<p id="home"> Welcome to my Homepage </p>

Important: to distinguish elements, id attributes must have unique values within the same page

Attribute Selector

a[href^="http:"] {
   background: url("external.png") no-repeat right top;
   padding-right: 10px;
   border-bottom: 2px solid;		
}
a[href^="http://www.mysite.com"] {
   background-image: none;
   padding-right: 0;
   border-bottom: 1px dotted;		
}

The rule applies only to the document element with the matching attribute value

<a href="http://www.google.com"> External Link </a>

Matching Operators

`=`	equals
`~=`	contains word
`^=`	starts with
`$=`	ends with
`*=`	contains substring

Nested Selectors

Selectors separated by ' ' (space) target nested element tags (at any level)

ul li

defines a rule for any element <li> within any <ul>

#top a

defines a rule for any element <a> within the element with id="top"

#top .navbar a

defines a rule for any element <a> within some element of class="navbar" contained within the element having id="top"

Combined Selectors

Selectors can be concatenated to further qualify the target element

ul.publications

defines a rule for any element <ul> of class="publications"

div#top

defines a rule to match the element <div id="top"/>

a.navbar#top

defines a rule for the element <a> of class="navbar" with id="top"

Selectors Summary

Selector	CSS	HTML
ID	`#myid`	`id="myid"`
Tag	`table`	`<table></table>`
Class	`.talks`	`class="talks"`
Tag+Class	`ul.talks`	`<ul class="talks"></ul>`
Tag+ID	`div#nav`	`<div id="nav"></div>`
Nested	`ul li li`	`<ul><li><li>x</li></li></ul>`
Attribute	`a[href=]`	`<a href="sms://"></a>`

How to select the inner li elements?

<ul>
  <li>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </li>
  <li></li>
</ul>




  



  
   How to select the intro paragraphs?
<section class="abstract"><p></p><p></p></section>
<section class="intro"><p></p><p></p></section>
<section class="conclusion"><p></p><p></p></section>
  



  




  Given the #top .navbar a selector, which elements match?
  
    
<a class="navbar" id="top">
    
    
<div id="top"><nav class="navbar">
<a href=""></a></nav></div>
    
    
<nav id="top"><div class="navbar">
<a href=""></a></div></nav>
    
  




  




  How to select the active paragraph?
  <ol class="active">
  <li class="active"></li>
  <li></li>
  <li><p class="active"></p></li>
</ol>




  





	Pseudo-Classes
	
	Pseudo-classes are used to apply rules based on the dynamic state of the selected elements
	
	a         { text-decoration: underline; }
a:link    { color: blue; } 
a:visited { color: purple; }
a:hover   { text-decoration: none; }
a:active  { color: red; }
Change the appearance of a link element

input:focus   { background-color: yellow; }
input:checked   { font-weight: bold; }
input:invalid { background-color: red;  }
Change the appearance of an input element
	




	CSS3 Pseudo-Classes
	
	Structural pseudo-classes can filter the selected elements based on their position on the document tree
	
	:nth-child(an+b)
:nth-last-child(an+b)
Note: Elements are counted starting from 1

:first-child
:last-child
:only-child
:empty
:root

:nth-child(2n+1)
:nth-child(odd)

:nth-child(2n)
:nth-child(even)

Useful shorthands




	Target Selector
	
	Apply a rule only to the document element with the id attribute matching the URL fragment of the page
	
	:target { background-color: red }
	
	<p id="first">No Match</p>
	
	<p id="second">Match</p>
	
	http://www.pautasso.info/index.html#second
	





	Negative Selector
	
	Apply a rule to all elements which do not match a selector
	
	.red {
	background-color: #F00;
}
:not(.red) {
	background-color: #000;		
}
	
	<p class="red">Match</p>
	
	<p class="black">Not Match</p>
	<p class="white">Not Match</p>
	




	Selector Specificity
	Rules with more specific selectors override rules with more generic ones
	<h1>
<h1 class=“summary”>
<h1 class=“summary” id=“intro”>
<h1 class=“summary” id=“intro” style=“color:navy”>
	
		h1 { color: green }
	
	
		h1.summary { color: orange }
	
	
		h1.summary#intro { color: red }
	
	
		Priority: Inline Styles > ID > Class > Tag > * 
	




	Conflicts
	
	What happens if two rules apply to the same element?
	
	
		User-defined
		Inline
		Internal (head)
		External
		Browser default
	
	
	
	Rules are prioritized:
		
More specific styles override general styles
			Page styles replace user-defined styles
		
	Use the !important flag to prioritize styles
	If two styles have the same priority, the one defined "last" takes precedence





	Page Layout with CSS
	Much better than using nested table elements (originally the only way, but no more!)
	Control the size and positioning of each page element:
		margin
padding
border
		Specify the layout properties of each page element:
		display
position
float
width, height
top, left, bottom, right
	
	





	CSS Box Model
	
	



	Display
	
	

		

	
	display: inline
	Do not break the flow of text
(like <span>)
	
	

	

		

	
	display: block
	Line break before and after the element (like <div>)




	

		

	
	display: inline-block
	Keep the block on the same line




	

		

	
	display: none
	Hide the element


	







	Position
	
	

		

	
	position: static
	Automatic Layout (default, ignore left, top, right, bottom)
	
	

	

		

	
	position: relative
	Offset the position with respect to the automatic one


	

		

	
	position: absolute
	Position with respect to the first non-static parent box. The element is pulled out of the normal layout flow.


	
position: fixed
	Position with respect to the window (instead of the page)

	



	Floating Boxes
	
		right
		left
		
	
	float: left | right | none
Shift a box to the right/left of the container box.
If there is not enough space, boxes can wrap around

clear: left | right | both

		right
		left
		
		clear
		
	
Force the following boxes to continue under the previous highest floated box (like \clearpage in LaTeX)





	Flexible Layout
	
		1
		2
		1
		3
		1
		
		
	
	display: flex
Apply the flexbox mode to the content.
flex: n
Grow the content proportionally

min-width: length
Also works with unflexible content

http://css-tricks.com/snippets/css/a-guide-to-flexbox/






	2D/3D Transform
	Any page element can be transformed!
	#box { [-webkit-|-o-|-moz-]transform: 
   rotate(N deg)
   scale(x,y)
   skewX(N deg)
   translate(X px, Y px);		
}




	




	




	






	




	




	







	Transition
	Declaratively smooth the transition between changes in the formatting of any page element (no need of JavaScript for animations)
	#box { 
  transition-property: background-color, width;
  transition-delay: 1s;
}












	Media-specific styles
	@media print { 
  #navigation {   display: none;   }
  body { font-size: 10pt; font-family: times; }
}
	all every media (default)
		aural speech synthesizers
braille ⠃⠗⠁⠊⠇⠇⠑ ⠗⠑⠁⠙⠑⠗
		handheld small screen devices
		print paper
		projection beamers
		screen computer screens
	



	Media Queries
	Expressions can use logical and, or, not operators
	@media (expression) { 
  /* CSS */
}
<link rel="stylesheet" media="(expr)" href="m.css" />
color 0 for b/w devices 
		orientation landscape | portrait
		min/max-width width of the browser window
		min/max-height height of the browser window
		resolution 2dppx retina display
	




Tools

CSS Validator

HTML5 Validator

XHTML Validator

Firefox Web Developer Extension

Firefogg



   
   	References

http://www.w3schools.com/css/ 
http://www.alistapart.com/articles/ 
	Andy Budd, Cameron Moll, Simon Collison, CSS Mastery – Advanced Web
Standards Solutions, APress 2006 http://www.cssmastery.com/ 
 Andy Clarke, Transcending CSS. The Fine Art of Web Design, New Riders ISBN
0321410971 - http://www.transcendingcss.com/
	
	





    Use a spacebar or arrow keys to navigate











©2014 Cesare Pautasso

`color`	0 for b/w devices
`orientation`	`landscape \| portrait`
`min/max-width`	width of the browser window
`min/max-height`	height of the browser window
`resolution`	`2dppx` retina display

`all`	every media (default)
`aural`	speech synthesizers
`braille`	⠃⠗⠁⠊⠇⠇⠑ ⠗⠑⠁⠙⠑⠗
`handheld`	small screen devices
`print`	paper
`projection`	beamers
`screen`	computer screens