Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

CSS 3

CSS 3 presentation using small examples
by

André Restivo

on 30 October 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of CSS 3

CSS 3
André Restivo @
FEUP
(2013)

Introduction
Properties
What it is
A
style sheet
language used for describing the the
look
and
formatting
of a document written in a
markup language
(like HTML).

Based on two concepts:
selectors
and
properties
.
Some History
1996

CSS 1
Limited and poorly supported by browsers
1998

CSS 2
1999

CSS 1
Supported by browsers
2003

CSS 2
Decently supported by browsers
2003

CSS Zen Garden
2011

CSS 2.1
2011-2012

CSS 3
Properties
Define what aspect of the selected element will be changed or styled.
Linking to HTML
We can apply CSS styles to HTML documents in three different ways.
Resources
References:
http://www.w3schools.com/cssref/
http://www.w3schools.com/cssref/css_selectors.asp

Tutorials:
http://www.htmldog.com/guides/css/
Selectors
Allow us to select the HTML elements to which we want to apply some styles.
p
{
color
:
red;
}
Inline
<
p

style
="
color: red
">This is a red
paragraph.</
p
>
Internal Style Sheet
<
head
>
<
style
>
... style sheet goes here ...
</
style
>
</
head
>
External Style Sheet
<
head
>
<
link

rel
="stylesheet"
type
="text/css"
href
="style.css">
</
head
>
The preferred way. Allows for style
separation
and
reuse
.
Pseudo Classes and Elements
CSS
pseudo-classes
and
pseudo-elements
are used to add special effects to some selectors.
Attribute Selectors
Elements can also be selected based on any of their attribute values:

[attribute]
exists
[attribute=value]
equals
[attribute~=value]
containing value (word)
[attribute|=value]
starting with value (word)
[attribute^=value]
starting with value
[attribute$=value]
ending with value
[attribute*=value]
containing value
Basic Selectors
Id Selector
Class Selector
Select All
Descendant Selector
Immediatly After Selector
Multiple Selectors
After Selector
p
{
color
: red;
}
Element Selector
Select elements by their
name
<div>
<p>
Some text
</p>
<img src="dog.png">
<p>
More text
</p>
</div>
selector
property
#content
{
color
: red;
}
Select elements by their
id
<div id="content">
<p>Some text</p>
<img src="dog.png">
<p>More text</p>
</div>
.article
{
color
: red;
}
Select elements by their
class
<div class="article">
<p>Some text</p>
<img src="dog.png">
<p>More text</p>
</div>
<div class="article important">
<p>Some text</p>
<img src="dog.png">
<p>More text</p>
</div>
*
{
color
: red;
}
Select
all
elements
<div id="content">
<p>
Some text
</p>
<img src="dog.png">
<p>
More text
</p>
</div>
header p
{
color
: red;
}
Select
descendant
elements
<header>
<p>
Some text
</p>
<div>
<p>
More text
</p>
</div>
</header>
<p>Not descendant</p>
Child Selector
header>p
{
color
: red;
}
Select
child
elements
<header>
<p>
Some text
</p>
<div>
<p>Not a child</p>
</div>
</header>
<p>Not descendant</p>
div+p
{
color
: red;
}
Select elements placed
immediately after
<p>Some text</p>
<div>
<p>More text</p>
</div>
<p>
Even
</p>
<p>More</p>
div~p
{
color
: red;
}
Select elements placed
after
<p>Some text</p>
<div>
<p>More text</p>
</div>
<p>
Even
</p>
<p>
More
</p>
img, .important
{
color
: red;
}
Combine
several
selectors
<div>
<p class="important">
More text
</p>
<img src="dog.png">
</div>
<p>More text</p>
Combinations
div#content p.introduction>img, .header>div+div
{
color
: red;
}
Selectors can be combined in several ways
Color
Dimension
Fonts and Text
Box Model
Elements all live inside a box. They can have a
border
, some space between themselves and that border (
padding
) and some space between themselves and the next element (
margin
).
Border and Background
Positioning
Changing the position of elements in a web page.
Precedence, Specificity and Inheritance
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
Lists and Tables
Text Color
Setting the text color of any element.
p
{
color
: red;
}
Background Color
Setting the background color.
div#header
{
background-color
: blue;
}
Colors
Colors can be set using several different methods.
By Name
Predefined color
names
:
Hexadecimal
A hexadecimal color is specified with:
#RRGGBB
, where the
RR
(red),
GG
(green) and
BB
(blue) hexadecimal integers specify the components of the color. All values must be between
0
and
FF
.
p
{
color
: #336699;
}
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.
RGB
An RGB color value is specified with: rgb(
red
,
green
,
blue
). Each parameter (
red
,
green
,
and
blue) defines the intensity of the color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%).
p
{
color
: rgb(64, 128, 255);
}
Width and Height
Set the
width
and
height
of an element. Values can be a
length
, a
percentage
or
auto
.
div
{
width
: 50%;
height
: 200px;
}
Units
CSS offers a number of different units for expressing length.
Absolute Units
A length expressed in any of these will appear as exactly that size (within the precision of the hardware and software):

cm, mm, in, pt and pc

These are recommended for print.
Font Based Units
The
em
and
ex
units depend on the font and may be different for each element in the document.

1em
represents the current font size.
Pixel
The
pixel
(
px
)
, is a often a good unit to use, especially if the style requires alignment of text to images, or simply because anything that is 1px or a multiple of 1px wide is guaranteed to look
sharp
.
Minimum and Maximum
Set the
minimum
and
maximum

width
and
height
of an element. Values can be a
length
, a
percentage
or none.
div
{
max-width
: 800px;
min-height
: none;
}
Family
In CSS, there are two types of font family names:

generic family
- a group of font families with a similar look

font family
- a specific font family
Specific Family
You can define a specific font family to be used.
p
{
font-family
: "Arial";
}
Generic Family
Or a generic family like:
serif
,
sans-serif
and
monospace
.
p
{
font-family
: serif;
}
Multiple Fonts
You can specify several fonts. The browser will try to use the first and continue down the list if it doesn't exist.
Tip: Start with the font you want, and end with a generic family
Check:
http://www.w3schools.com/cssref/css_websafe_fonts.asp
Boldness
You can specify the weight of the font using the
font-weight
property. Values can be
normal
,

bold
,
bolder
,
lighter
or values from
100
to
900
.
Style
Size
Decoration
Font
Text
Alignment
Transformation
The
text-transform
property can be used to make the text
uppercase
,
lowercase
or capitalized (
capitalize
).
Indentation
The first line of each paragraph can be indented using the
text-indent
property. This property takes a length as its value.
p.content
{
font-weight
: bold;
}
The
font-style
property allows you to specify if the font style should be
italic
. Values can be
normal
,

italic
, or
oblique
.
p.content
{
font-style
: italic;
}
To define the font size you use the
font-size
property.
p.content
{
font-size
: 1.2em;
}
Use
em
or
%
for font sizes.
The
text-decoration
property is mostly used to remove underlines from links. But it has other possible values:
none
,
underline
,
overline
and
line-through
.
#menu a
{
text-decoration
: none;
}
Background Scope
Background properties, like
background-color
, only apply to the space occupied by the
element
and its
padding
.
Display
There are
17
different possible values for the
display
property. We will concentrate on three of them:
none
,
inline
and
block
.
Block Elements
Block elements are laid out one after the other,
vertically
.
If no
width
is set, they will
expand naturally
to
fill
their parent container.
They can have
margins
and/or
padding
.
If no
height
is set, they will expand naturally to
fit
its child elements.
Inline Elements
Do
not force
any line changes.
Ignore

top
and
bottom
margin settings, but will apply
left
and
right
margins, and any
padding
.
Will
ignore
the
width
and
height
properties.
Are subject to the
vertical-align
property.
The Flow
By default, elements follow something called
the flow
of the document.

In order to make page drawing easier for browsers, elements are always placed from
top
to
bottom
and
left
to
right
. Unless they are removed from the flow.
Display None
Setting the display
property
to
none
, removes the element from the page.
Examples:
p
,
div
,
h1-h6
img
{
display
: block;
}
Examples:
img
,
span
,
strong
li
{
display
: inline;
}
#menu
{
display
: none;
}
Margin and Padding
To change the margin and padding of an element we use the following properties:
margin-top
,
margin-right
,
margin-bottom
,
margin-left
,
padding-top
,
padding-right
,
padding-bottom
and
padding-left
.

They all take a length as their value.
Shorthands
To make it easier to define the
margin
and
padding
properties, shorthands can be used.

Using
two
values, the
top/bottom
and
left/right
margins are defined simultaneously.

Using
four
values, the
top
,
right
,
bottom
and
left
values are defined (in that order i.e. clockwise).

Using
one
value, all values are defined the
same
.
h1
{
margin-top
: 10px;
}
h1
{
margin
: 5px 10px;
}

#menu
{
margin
: 10px;
}

#content
{
padding
: 5px 3px 10px 15px;
}
C
ascading
S
tyle
S
heets
Border
An element border is a line that separates the padding from the margin.
Style
The
border-style
property specifies what kind of border to display. The following values are possible:
none
,
dotted
,
dashed
,
solid
,
double
,
groove
,
ridge
,
inset
and
outset
.
Width
The
border-width
property is used to specify the width of the border. Its value can be a
length
or a predefined value:
thin
,
medium
, or
thick
.
Color
The
border-color
property is used to specify the color of the border.
Shorthands
As with the padding and margin properties we can use more than one value in the style, color and width properties to change the border of several sides at the same time.
Shorthands
The
border
property allows us to define
all
border properties in one declaration.

The properties that can be set, are (in order):
border-width
,
border-style
, and
border-color
.

It
does
not matter if one of the values above is missing..
Background
Image
Besides having a background color, elements can also have an image as background using the
background-image
property. This property accepts an
URL
as its value.
Attachment
Using the
background-attachment
property, we can specify if the background should or not scroll with the page or element. Possible values are
fixed
,
scroll
and
local
. Scroll is the default value.
Repeat
We can also define if the background repeats along one or both axis with the
background-repeat
property. Possible values are
no-repeat
,
repeat-x
,
repeat-y
and
repeat
.
Shorthands
The
background
shorthand property sets all the background properties (including color) in one declaration.

The properties that can be set, are:
background-color
,
background-position
,
background-size
,
background-repeat
,
background-origin
,
background-clip
,
background-attachment
, and
background-image
.

It does not matter if one of the values above are missing.
Position
The position property allows the designer to alter the way an element is positioned. There are 4 possible values.
Float
The
float
property removes an element from the document flow and moves it to the
left
or to the
right
.
Ordering
When elements are positioned outside the normal flow, they can overlap other elements. The z-index property specifies the stack order of an element.
Overflow
Static
The
default
value. The element keeps its place
in the document flow
.
#b
{
position
: static;
}
Relative
The element keeps its position
in the flow
but can be moved
relatively
to its static position using the properties:
top
,
right
,
bottom
and
left
.
#b
{
position
: relative;
left
: -20px;
top
: 20px;
}
Fixed
The element is
no longer a part of the flow
and can be positioned relatively to the browser
window
. Scrolling the document doesn't change the element's position.
#b
{
position
: fixed;
left
: 20px;
top
: 0px;
height
: 20px;
}
Absolute
The element is
no longer a part of the flow
and can be positioned in relation to the
first non static parent
. The element scrolls with the page.
#b
{
position
: absolute;
left
: 20px;
top
: 0px;
height
: 20px;
}
A
B
C
A
C
B
A
C
B
A
C
B
#b
{
z-index
: -1;
}
An element with greater stack order is always in front of an element with a lower stack order.
p
{
border-style
: solid;
}
We can set different border widths for each side using the properties:
border-top-width
,
border-right-width
,
border-bottom-width
and
border-left-width
.
p
{
border-left-width
: 10px;
}
We can set different border colors for each side using the properties:
border-top-color
,
border-right-color
,
border-bottom-color
and
border-left-color
.
We can set different border styles for each side using the properties:
border-top-style
,
border-right-style
,
border-bottom-style
and
border-left-style
.
p
{
border-left-color
: #336699;
}
Using
two
values, the
top/bottom
and
left/right
border properties are defined simultaneously.

Using
four
values, the
top
,
right
,
bottom
and
left
values are defined (in that order i.e. clockwise).

Using
one
value, all values are defined the
same
.
p
{
border-width
: 5px 10px;
}
p
{
border
: 1px solid red;
}
Text
Text always flows around floated elements. This is useful to make text that flows around images.
This is some text that is
flowing around an image.
Several Floats
Floats go right or left until they find
another float
or the
parent container
.
Clear
The
clear
property indicates that no floating elements are allowed on the left or the right side of a specified element. Values can be
left
,
right
or
both
.
float: left
float: left
float: left
float: left
float: left;
clear: both;
div#menu
{
background-image
: url('squares.png');
}
Position
The position of the background image can be set using the
background-position
property. This property receives two values. The first one can be
left
,
right
,
center
or a
length
. The second one can be
top
,
bottom
,
center
or a
length
.
div#menu
{
background-image
: url('squares.png');
background-position
: left top;
}
div#menu
{
background-image
: url('squares.png');
background-position
: left top;
background-attachment
: local;
}
div#menu
{
background-image
: url('squares.png');
background-position
: left top;
background-attachment
: local;
background-repeat
: repeat;
}
div#menu
{
background
: url('squares.png') repeat left top;
}
Some of these have not been addressed in this presentation
Links
Links can be styled depending on their state. The following are 4 pseudo classes that can be used with links:

a:visited
visited links
a:hover
mouse over;
not only links
a:active
clicked links
a:link
unvisited links
Focus
Select and style an input field when it gets focus using the focus pseudo-class.
#menu a:active
{
color
: red;
}
form input:focus
{
color
: blue;
}
First and Last
Select and style the first or last elements of some type:

:first-letter
first letter of a paragraph
:first-line
first line of a paragraph
:first-child
first child of its parent
:last-child
first child of its parent
#content p:first-child
{
color
: blue;
}
More pseudo-classes and selectors:
http://www.w3schools.com/cssref/css_selectors.asp

Selectors
form[method=get]
{
color
: green;
}
More properties:
http://www.w3schools.com/cssref/

Text can be aligned
left
,
right
,
center
or
justify
using the
text-align
property. This property should be used for aligning text only.
#menu
{
text-align
: center;
}
h1
{
text-transform
: capitalize;
}
.chapter p {
text-indent
: 10px;
}
Why?
<
div
>
<
p
>This is some text with a <
a
>link</
a
></
p
>
</
div
>
div
{
color
: red;
}
The text becomes red but the links are still blue. Why?
Defaults
Each browser has its own
set of default value
s for the properties of each HTML element.
These defaults are
very similar
between browsers
but
the little differences make cross-browser development harder.
There are several reset CSS available that redeclare each default value to have the same value in every browser.
Inheritance
There is a special value that can be used in almost every property.

When a property is set to
inherit
, the value of that property is inherited from the element's parent.
<
div

id
="menu">
<
h1
>Menu</
h1
>
</
div
>
h1
{
color
: inherit;
}

#menu
{
color
: blue;
}
The
h1
color is inherited from its parent becoming
blue
.
I get it now
In most, if not all, browsers the
a

color
is defined as
blue
. On the other hand, the
p

color
is defined as
inherit
.
<
div
>
<
p
>This is some text with a <
a
>link</
a
></
p
>
</
div
>
div
{
color
: red;
}
The p inherits the color from the div but the link does not.
Inheritance
Specificity
#menu p
{
color
: green;
}

p
{
color
: red;
}
<
div

id
="menu">
<
p
>What is my color?</
p
>
</
div
>
Green
. Because the first rule is more
specific
than the second one.
Calculating Specificity
Element, Pseudo Element
:
d
Class, Pseudo class, Attribute
:
c
Id
:
b
Inline Style
:
a
p
: 1 element – (0,0,0,1)
div
: 1 element – (0,0,0,1)
#sidebar
: 1 id – (0,1,0,0)
div#sidebar
: 1 element, 1 id – (0,1,0,1)
div#sidebar
p: 2 elements, 1 id – (0,1,0,2)
div#sidebar p.bio
: 2 elements, 1 class, 1 id – (0,1,1,2)
The specificity of an element is defined as 4 values (a, b, c and d). Each one of them is incremented when a certain type of selector is used.
Example
Cascading
Origin
(author, user, defaults)
Specificity
(bigger is better)
Position
(last is better)
The rule to be applied is selected using the following rules in order:
TIP
Full transcript