Cascading Style Sheets

Transcript Cascading Style Sheets

Cascading Style
Sheets
by
Pavlovic Nenad
Presentation Contents
 What is CSS?
 Why CSS?
 Types of Style Sheets
 Style Sheets Syntax
 Box Formatting Model
 Inheritance & Cascade
 Simple Examples
 Classes, Pseudo Classes & IDs
 Advanced page look using CSS
 Groups of elements (DIV & SPAN)
 Z – index
 @import and @media roles
CSS – what is it?
 Think of style sheets as any kind of
design element: including type face,
background, text, links colors, margin
controls and placement of objects on a
page.
 Also, we can say that CSS is a set of style
definitions; styles that describe each HTML
element.
Why CSS?
 Using the CSS we can control all pages in our
site with changing a single file (CSS file).
 HTML should be used only as a formatting
language, responsible for the basic layout of a
page.
 CSS is used for design of pages.
Types of Style Sheets
 Style sheets can be delivered to an HTML
by a variety of methods:


Inline (add a style to an element):
<P style=“font: 13pt verdana”>Text</P>
Embedded (controls a whole page):
<HEAD>
<STYLE>
P { font: 13pt verdana; }
</STYLE>
</HEAD>

Linked (applies a style on an entire page):
<HEAD>
<LINK rel=“stylesheet”
href=“./path/file_name.css” type=“txt/css”>
</HEAD>
Style Sheet Syntax
 Whatever method we use to deliver style
to HTML (inline, embedded or linked), the
syntax will going to be similar in all cases.
 CSS syntax contains of three parts:
SELECTOR | PROPERTY | VALUE
BODY { color: yellow; }
 Selectors are usually standard HTML
elements (H1, P, BODY, TABLE, etc.).
 Properties are names of attributes that
are used to describe an object (color, text,
font-face, font-size, etc.).
 Values defines properties (color: yellow,
font-face: arial, etc.).
Box Formatting Model
4th
3rd
2nd
1st
Element
Padding
Border
Margin
 Padding: distance between element and border.
 Margin: space outside the border.
Inheritance & Cascade
 Cascade: If we have multiple styles in an
individual HTML page, browser will follow
cascade (order) to interpret style
information.
e.g. Assume that we have 3 style types in
our page, browser will first interpret linked
style, then embedded and inline at last.
 Inheritance: If we state a specific text
color in a paragraph tag, all tags within
that paragraph will inherit specified color.
example
Simple Examples
 Background
 Fonts
 Paragraphs
 Headings
 Tables
 etc..
Classes, Pseudo Classes and IDs
 Classes are the instances of style definitions.
 If we want to brake down our style rules into
small very precise peaces, we will use classes.
 Assume that we defined style for one
element and then we create its class, everything
that is nor redefined in a class is inherited from
the higher level class or element.
P.highlight {
background-color: yellow;
color: red;
}
example
 The second type of classes are pseudoclasses.
 Pseudo-classes are predefined classes
that already mean something to the browser.
They can’t be defined by user, but user can
apply values to them!
A:link {
color: blue;
}
A:visited {
color: red;
}
 List of pseudo classes:











:first-child
:link (A)
:visited (A)
:hover (A)
:active (A)
:focus (A)
:lang
:first-line (P) (example)
:first-letter (P) (example)
:before (example)
:after
 Pseudo-classes can be used in
combination with classes like:
A.special:link {
color: white;
text-decoration : none;
}
A.special:visited {
color: #FFF000;
text-decoration : none;
}
IDs
 IDs are like classes, except they are not
necessarily associated with elements (tags).
 IDs are defined as follows:
#important {
font-weight : bold;
color : Yellow;
}
 To use apply ID to an element we should
type:
<P id=“important”>…</P>
example
Advanced page look
 CSS gives us a much more flexibility in layout
designing.
 The advantage is that we can place “objects”
(words, paragraphs, pictures, lines, etc.) exactly
where we want on the page (positioning and Zindex).
 Also, we can group elements and then control
them as a group. For this purpose is used DIV tag.
 On the same way we can control parts of text
which is “bounded” with SPAN tag.
Groups of elements
(DIV & SPAN)
 DIV provides a means for grouping
elements and assigning attributes to the
group.
 It is nested within the BODY!
 SPAN encloses text within generic inline
element that you can define with style sheet.
 It is nested within any BLOCK element.
Examples…
Z-index
 Z-index enables us to position elements
in the third dimension (depth).
 It orders the elements with the lower
index on the top of elements with higher
index.
Z = 100
Z=70
Z = 50
example
@media
 @media sMediaType { sRules }
sMediaType:



String that specifies one of the following media types: screen:
Output is intended for computer screens.
printOutput is intended for printed material and for documents
viewed in PrintPreview mode.
all Output is intended for all devices.
sRules:

String that specifies one or more rules in a styleSheet object.
// For computer screens, the font size is 12pt.
@media screen { BODY {font-size:12pt;} }
// When printed, the font size is 8pt.
@media print { BODY {font-size:8pt;} }
@import
 @import [url] ( sUrl );
sUrl:
 String that specifies the URL that references a
cascading style sheet.
<STYLE TYPE="text/css">
@import url("URL");
P {color:blue}
</STYLE>
Thank you for joining the
presentation 
Thanks a lot to Chrysafis Theodoros for
a help.
Presentation content will be placed on the AcademiX web page:
www.city.academic.gr/academix
For any further question you can contact me at:
[email protected]

Cascading Style Sheets

Transcript Cascading Style Sheets

Directory