Cascading Style Sheets
Download
Report
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]