1 of 29

CSS - CASCADING STYLE SHEETS

2 of 29

WHAT IS CSS ?

css defines how to display an html document (fonts, colors, layouts etc.)
were added to HTML 4.0 specification to solve a problem
usually css styles are specified in an external file
enables developers to change the layout and look of all documents in a web site by just editing a single file

3 of 29

NEED FOR CSS

HTML was intended to define the structure of a document (i.e. headings, paragraphs, tables etc.), not the formatting of an element
when style attributes like font, color, background etc. were introduced, maintaining a large web page in which formatting/style information was scattered all over the document became a nightmare for web developers
so, HTML 4.0 allowed formatting information to be removed from the document and placed separately (in .css files)

4 of 29

CSS SYNTAX RULES

selector { property: value; property: value; …}

where selector can be:

a tag name; ex.: p { font-family: sans-serif }
a group of tags; ex.: h1, h2, h3, h4, h5, h6 { color: red }
a class name (with or without a tag name):

p.right { text-align: right }

.right { text-align: right }

… in html document: <p class=“right”>Right aligned text</p>

an ID (with or without a tag name):

div#green { color: green }

#green { color: green }

… in html document: <div id=“green”>Green div…</div>

pseudo-classes and pseudo-elements

5 of 29

A SIMPLE CSS EXAMPLE

body {background-color: #aabbcc}

h1 {font-style: italic; font-size: 36pt}

h2 {color: blue}

p {margin-left: 50px}

it specifies that:

the <body> tag should have a background color of #aabbcc
the <h1> heading tag should use an italic font of size 36pt
the <h2> heading tag should use a blue color for displaying text
a paragraph <p> tag should start at an offset of 50 pixels on the left

6 of 29

PSEUDO-CLASSES

syntax:

selector:pseudo-class {property: value; …}

selector.class:pseudo-class {property: value; …}

list of pseudo-classes:

anchor pseudo-classes:

a:link {color:#FF0000} /* unvisited link */�a:visited {color:#00FF00} /* visited link */�a:hover {color:#FF00FF} /* mouse over link */�a:active {color:#0000FF} /* selected link */

:first-child: matches an element that is the first child of any other element;ex.: p:first-child { color: blue }
> selector:first-child: matches an element that is the first child of a specific element; ex.: p > i:first-child { color: blue}
:lang: adds a style to an element with a specific lang attribute
:active: adds a style to an element that has keyboard input focus

7 of 29

PSEUDO-ELEMENTS

syntax:

selector::pseudo-element {property: value; …}

selector.class::pseudo-element {property: value; …}

list of pseudo-elements:

::first-letter – adds style to the first character of a text

div:first-letter { font-size: xx-large; }

::first-line – adds style to the first line of a text

div:first-line { color: red }

::before – adds content before an element

h1:before { content: url(smiley.jpg)}

::after – adds content after an element

h1:after { content: url(smiley.jpg)}

8 of 29

ADDING STYLE SHEETS TO A DOCUMENT

external style sheet:

<head>

</head>

internal style sheet:

<head>

p { margin-left: 10px }

</style>

</head>

inline style sheet:

<p style=“color: red; margin-left: 10px”}

9 of 29

MULTIPLE STYLE SHEETS

if multiple style sheets are defined, their priority is (ascending order):

1) browser default

2) external style sheet

3) internal style sheet

4) inline style

10 of 29

BACKGROUND PROPERTIES

Property	Description
background	Sets all the background properties in one declaration
background-attachment	Sets whether a background image is fixed or scrolls with the rest of the page
background-color	Sets the background color of an element
background-image	Sets the background image for an element
background-position	Sets the starting position of a background image
background-repeat	Sets how a background image will be repeated

11 of 29

BACKGROUND CSS EXAMPLE

div

{�background-color:#0f0f0f;

background-image:url(‘back.jpg');�background-repeat:repeat-x;�background-position:top right;

}

12 of 29

THE CSS BOX MODEL

each HTML element is a “box” from CSS perspective; it has a margin, border, padding and content

13 of 29

THE CSS BOX MODEL (2)

Margin: clears an area around the border; does not have a background color, is completely transparent
Border: lies around content and padding; has the background color of the box
Padding: clears an area around the content; has the background color of the box
Content: the actual content (text) of the box
the height and width attributes do not specify the total height and width of the HTML element; they are calculated by:

Total width=width+left padding+right padding+left border+

right border+left margin+right margin

Total height=height+top padding+bottom padding+top border+ bottom border+top margin+bottom margin

14 of 29

BORDER AND OUTLINE PROPERTIES

Property	Description
border	Sets all the border properties in one declaration
border-bottom	Sets all the bottom border properties in one declaration
border-bottom-color	Sets the color of the bottom border
border-bottom-style	Sets the style of the bottom border
border-bottom-width	Sets the width of the bottom border
border-color	Sets the color of the four borders
border-left	Sets all the left border properties in one declaration
border-left-color	Sets the color of the left border
border-left-style	Sets the style of the left border
border-left-width	Sets the width of the left border
border-right	Sets all the right border properties in one declaration
border-right-color	Sets the color of the right border
border-right-style	Sets the style of the right border
border-right-width	Sets the width of the right border
border-style	Sets the style of the four borders
border-top	Sets all the top border properties in one declaration
border-top-color	Sets the color of the top border
border-top-style	Sets the style of the top border
border-top-width	Sets the width of the top border
border-width	Sets the width of the four borders
outline	Sets all the outline properties in one declaration
outline-color	Sets the color of an outline
outline-style	Sets the style of an outline
outline-width	Sets the width of an outline

15 of 29

BORDER CSS EXAMPLE

div {

border-top-style: solid;

border-bottom-style: solid;

border-left-style: dotted;

border-right-style: dotted;

border-width: 2px;

border-color: #00ff00;

}

16 of 29

DIMENSION PROPERTIES

Property	Description
height	Sets the height of an element
max-height	Sets the maximum height of an element
max-width	Sets the maximum width of an element
min-height	Sets the minimum height of an element
min-width	Sets the minimum width of an element
width	Sets the width of an element

17 of 29

FONT PROPERTIES

Property	Description
font	Sets all the font properties in one declaration
font-family	Specifies the font family for text
font-size	Specifies the font size of text
font-style	Specifies the font style for text
font-variant	Specifies if a text should be displayed in a small-caps font
font-weight	Specifies the weight of the font

18 of 29

FONT CSS EXAMPLE

p, div {

font-family:”Times New Roman”, Arial, Serif;

font-style: italic;

font-size: 12px;

}

19 of 29

LIST PROPERTIES

Property	Description
list-style	Sets all the properties for a list in one declaration
list-style-image	Specifies an image as the list-item marker
list-style-position	Specifies where to place the list-item marker
list-style-type	Specifies the type of list-item marker

20 of 29

LIST CSS EXAMPLE

ul {

list-style-type: circle;

list-style-position: inside;

}

21 of 29

MARGIN AND PADDING PROPERTIES

Property	Description
margin	Sets all the margin properties in one declaration
margin-bottom	Sets the bottom margin of an element
margin-left	Sets the left margin of an element
margin-right	Sets the right margin of an element
margin-top	Sets the top margin of an element
padding	Sets all the padding properties in one declaration
padding-bottom	Sets the bottom padding of an element
padding-left	Sets the left padding of an element
padding-right	Sets the right padding of an element
padding-top	Sets the top padding of an element

22 of 29

MARGIN CSS EXAMPLE

div {

margin-top: 100px;

margin-bottom: 100px;

margin-left: 5%;

margin-right: 5%;

}

23 of 29

POSITIONING PROPERTIES

Property	Description
bottom	Sets the bottom margin edge for a positioned box
clear	Specifies which sides of an element where other floating elements are not allowed
clip	Clips an absolutely positioned element
cursor	Specifies the type of cursor to be displayed
display	Specifies the type of box an element should generate
float	Specifies whether or not a box should float
left	Sets the left margin edge for a positioned box
overflow	Specifies what happens if content overflows an element's box
position	Specifies the type of positioning for an element
right	Sets the right margin edge for a positioned box
top	Sets the top margin edge for a positioned box
visibility	Specifies whether or not an element is visible
z-index	Sets the stack order of an element

24 of 29

TABLE PROPERTIES

Property	Description
border-collapse	Specifies whether or not table borders should be collapsed
border-spacing	Specifies the distance between the borders of adjacent cells
caption-side	Specifies the placement of a table caption
empty-cells	Specifies whether or not to display borders and background on empty cells in a table
table-layout	Sets the layout algorithm to be used for a table

25 of 29

TEXT PROPERTIES

Property	Description
color	Sets the color of text
direction	Specifies the text direction/writing direction
letter-spacing	Increases or decreases the space between characters in a text
line-height	Sets the line height
text-align	Specifies the horizontal alignment of text
text-decoration	Specifies the decoration added to text
text-indent	Specifies the indentation of the first line in a text-block
text-shadow	Specifies the shadow effect added to text
text-transform	Controls the capitalization of text
vertical-align	Sets the vertical alignment of an element
white-space	Specifies how white-space inside an element is handled
word-spacing	Increases or decreases the space between words in a text

26 of 29

TEXT CSS EXAMPLE

h1 {

color: #00ddee;

text-align: justify;

text-decoration: underline;

text-shadow: 10;

}

27 of 29

DISPLAYING AND VISIBILITY

hiding an element with consuming space:

visibility: hidden;

hiding an element without consuming space:

display: none;

html elements are displayed as:

block – element takes the full width available and has a line break before and after it (e.g. h1, p, div)
inline – element takes as much width as necessary and does not force line breaks (e.g. a, span)

set the display mode with the display property (e.g. display: inline; display: block;)
make an image transparent:

opacity: x – on Firefox, x between 0.0 and 1.0

filter:alpha(opacity=x) – on IE, x between 0 and 100.

28 of 29

POSITIONING

static positioning: the default mode; a static element is positioned according to the normal flow of the page;
fixed positioning: element will not move even if the window is scrolled (position: fixed; top: 20px; right: 40px); elements are removed from the normal flow and can overlap other elements
relative positioning: element is positioned relative to its normal position; element can be moved and overlap other elements , but the reserved space form the element is preserved in the normal flow (position: relative)
absolute positioning: element is positioned relative to the first parent element that has a position other then static (if none, <html>); elements are removed from the normal flow and can overlap other elements; (position: absolute)
z-index property defines the stack order of an element

29 of 29

FLOATING

with floating, an html element can be pushed left or right allowing other elements to wrap around it
html elements can float horizontally left or right (not vertically)
configured using the the float: left | right | none | inherit display property