Professional Documents
Culture Documents
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
u d o r
t l in T
y r ig h t C
Cop
Defining element-specific styles (IN-LINE)
2
3/7/2017
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
selector p {color:blue;font-size:12px}
property value
u d o r
t l in T
y r ig h t C
Cop
BUILDING THE FORMATTING RULES
p, h3 {text-decoration:underline}
4
3/7/2017
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
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}
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
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
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
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