You are on page 1of 10

3/7/2017

THE DEVELOPMENT OF WEB


APPLICATIONS
2nd Course

u d o r
t l in T
y r ig h t C
Cop
Cascading Style Sheets (CSS)
Styles an efficient way to format the content of an web document.
A CSS - a sequence of instructions defined by the means of a specific
language used to describe how a section of an HTML document must
be displayed.
Advantage: permits the reuse of some formats for multiple elements.
CSS allows the creation of formatting templates that can be called to
identically format multiple sections in a web page.

1
3/7/2017

Different ways to define styles for web pages


Element-specific Styles (IN-LINE) defined as a property of a HTML
element by using the STYLE attribute;
Styles for the entire HTML document - defined using <style> element
placed inside <head> element of an HTML page
Styles defined in external files
CSS files containing styles for multiple HTML pages.
Can be called by their name inside the <link> element of an HTML page
placed in the <head> element.

u d o r
t l in T
y r ig h t C
Cop
Defining element-specific styles (IN-LINE)

Can be realized by using the STYLE attribute inside


an HTML element, enumerating the desired formats
as compound value for this attribute, after the =
sign.
The general form of IN-LINE styles:
<TagName Style=property1:value1; ...
propertyn:valuen >Text </TagName>
Exemple of using IN-LINE style:
<p style="font-family:courier new;
color:red">Formatted text</p>

2
3/7/2017

Defining styles in the HTML document


header
A way to reuse styles at the HTML document level for multiple
elements in the same web page.
The declaration is made inside the <HEAD> element.
Example:
<STYLE TYPE=text/css>
Tag {property1:value1;
property2:value2;
propertyn:valuen}
Tag1,...Tagn {property1:value1; ...}
Tag:attribute {property1:value1; ...}
Tag1.name1 {property1:value1; ...}
Tag1.name2 {property1:value1; ...}
.ClassName {property1:value1; ...}
</STYLE>

u d o r
t l in T
y r ig h t C
Cop
Defining styles using external CSS files
Main advantage: Allows the separation of formatting rules from HTML code
that generates the web document.
The definition of formatting rules can be made in the same way as in the
preceding case, but in another file, having the .css extension.
In the HTML document we must specify the source file where the formatting
rules can be found:
<head>
<title>Style formatting</title>
<link rel=stylesheet type=text/css href=domain_name/Styles_file.css>
</head>

3
3/7/2017

A CSS RULE STRUCTURE


Declaration

selector p {color:blue;font-size:12px}
property value

The selector: specifies the elements or


their components for which the formatting
rule is applied
The declaration: specifies how the
elements affected by the selector must be
formatted.

u d o r
t l in T
y r ig h t C
Cop
BUILDING THE FORMATTING RULES

Formatting rules applied to a single selector:


body{backgroundcolor:#ffeeaa;color:blue;}
Formatting rules applied to multiple selectors:

h1, h2, h3, h4, h5, h6 {


color:blue;
font-weight:bold;}

p, h3 {text-decoration:underline}

4
3/7/2017

TYPES OF SELECTORS (I)


Selectors for HTML elements:
The formatting is applied to all specified HTML
elements:

u d o r
t l in T
y r ig h t C
Cop
TYPES OF SELECTORS (II)
Selectors defined for classes:
Formatting applies only to HTML elements that
have the name of the formatting class defined
by the selector:

The result:

5
3/7/2017

TYPES OF SELECTORS (III)


Selectors aiming a specific element defined by the ID
property:
The formatting rule:

The HTML
source:

The result
displayed in
the browser:

u d o r
t l in T
y r ig h t C
Cop
COMBINING SELECTORS
Contextualizing class selectors:
Itinvolves defining an explicit rule for a
specific HTML element belonging to a specific
formatting class:

.specialfont{color:Green;fontweight:bold;}
h3.specialfont{backgroundcolor:yellow}

Although both elements


have the same formatting
class, only for the h3
element the special
formatting is applied

6
3/7/2017

STYLES INHERITANCE

BODY

DIV P

SPAN

EM

u d o r
t l in T
y r ig h t C
p
CoSTYLES WITHIN A
CHANGING
HIERARCHY
Defines the ability to change style elements only if
they are considered as child elements of a selector.
Format the <em> elements found inside the <span> elements

7
3/7/2017

STYLE RULES APPLICABLE TO THE CHILD ELEMENTS


OF A SELECTOR (I)
A child element: the direct descendent of a
specified selector.
The general form of reference:
Parent selector name > child element {declaration}
Example:
1. Display in green only the elements of <em> type that are
displayed inside a paragraph (children of <p> element).
p > em {color:green}
2. Display distinctively only the <span> type children
elements of the class named special-font :
.special-font > span {font-family:Monotype Corsiva}

u d o r
t l in T
y r ig h t C
Cop
STYLE RULES APPLICABLE TO THE CHILD ELEMENTS
OF A SELECTOR (II)

8
3/7/2017

SPECIALIZED STYLES SELECTORS (I)


The universal selector:
It refers all the elemens inside an HTML page
It can be defined inside a formatting rule by using the *
character.
Example:
1. All elements defined in an HTML page must be displayed with
an yellow background:
* {background-color: yellow;}

u d o r
t l in T
y r ig h t C
Cop
SPECIALIZED STYLES SELECTORS (II)
Selectors for the attributes of an HTML
element:
Allow the definition of some specific formatting
rules for certain items which possess certain
attributes;
Way of defining:
element[attribute_name] {declaration}
element[attribute_name=value] {declaration}
Example: All images inside a document that
own the alt attribute must be displayed at
100x150 pixels
img[alt] {width:100px;height:150px}

9
3/7/2017

PSEUDO-CLASES IN DEFINING FORMATTING STYLES (I)

Are used to manage a formatting rule which


will be considered only when certain events or
circumstances occur.
Pseudo-clases for hiperlinks:
link: defines how the link will be displayed in

standby;
visited: defines how to display a link that has
already been accessed;
hover: specifies how to format a link when the
cursor passes over it;
active: how to display a link when performing click.
Examplu: a:link {color:green}
a:hover {color:blue; text-decoration:underline}

u d o r
t l in T
y r ig h t C
Cop
PSEUDO-CLASES IN DEFINING FORMATTING STYLES
(II)
Formatting the first child element of a selector:
X:first-child {declarations} where X defines an element or a
formatting class
Example: div p:first-child {color:red}
Formatting a child element of an HTML form when clicking
inside it:
X:focus {declarations}
Example: input:focus {border:1px solid blue}

10

You might also like