Download Cascading Style Sheets

Cascading Style Sheets
Course for librarians
Integrated Training Centre for LIS specialists in Lithuania,
Klaipeda University Library,
2001
1
Content
•
•
•
•
what Cascading Style Sheets are?
why it is used?
how is it used?
where?
2
What Cascading Style
Sheets are?
• styles define how to display HTML
elements;
• styles are stored in Style Sheets;
• multiple style definitions will cascade into
one;
3
• Cascading Style Sheet is a simple,
declarative language that allows authors and
users to apply stylistic information to
structured documents written in HTML or
XML.
4
• World Wide Web Consortium (W3C):
– CSS1 (1996);
– CSS2 (1998);
– CSS3 (2001)
• Netscape and Microsoft Corporations;
• Internet Explorer (IE) and Netscape
Navigator (NN) supports styles.
5
Why?
• to save a lot of work and our time;
• easier to handle and edit web documents;
• easier to control content and layout of the
multiple web sites.
6
Structure of the Style
• selector {property: value}
– selector is an element which we are defining;
– property is an attribute;
– value specifies how a selector should be
displayed.
• {property: value} is a definition of the
selector.
7
Syntax
• the property and value are separated by
a colon and surrounded by curly braces;
• if the value consists from multiple words, it
should be with quotes around it:
body {color: black}
• if there are more than one property, each
property should be separated with a semicolon: p {text-align: center; color: maroon}.
8
Class Atribute (1)
defines different styles for the same element:
p. center {text-align: center}
in HTML document:
<p class=“center”>Paragraph</p>
9
Class Atribute (2)
.center {text-align: center}
means:
<h1 class="center">Heading is centered</h1>
<p class="center">Paragraph is centered</p>
10
ID Attribute
there can be only one element with a given id
in a document:
• to match all elements with a id:
– #intro {font-weight:bold; color: #0000ff}
• only elements with id="intro":
– p#intro {font- weight:bold; color:#0000ff;}
11
Grouping
you can group selectors:
h1, h2, h3 {color: maroon}
h4 {color: green}
Note:
each selector has been separated with a comma.
12
Comments
are used for the explaining the code.
It can help to edit the code later:
/* Comment */
p {text-align: center; font-family: arial}
13
Formatting text with CSS
•
•
•
•
•
font family and font size;
text colour;
text background;
text aligning;
styles for links;
14
Font Properties
• define the font in text and allow to change:
–
–
–
–
the font family;
boldness,
size,
style of the text.
H1 {font-family: arial}
15
Text Properties
• define the appearance of text and allow to
change:
–
–
–
–
–
the colour of a text;
decorate a text;
align a text;
indent first line;
increase/decrease the space between characters.
h1 {color: #800000; letter-spacing: 0.5cm}
16
Background Properties
• define the background and allow to change:
– insert an image as the background;
– the background colour of an element;
– repeat a background image horizontally/
vertically.
h2 {background-color: #00FFFF}
p {background-color: transparent}
17
Border Properties
• define border around an element and allow:
– to create borders around text;
– to specify the style, colour of an element
borders.
H1 {border: medium dashed #800000;
text-align: center}
18
Layout with CSS
•
•
•
•
•
•
background;
lists;
borders;
aligning elements;
wrapping text, padding around element;
styles for printing.
19
Margin Properties
• define the space around an element.
p {margin: 1cm 4cm 2cm 4cm}
20
Padding Properties
• define the space between an element and the
element border.
21
List Properties
• allow to set an image as list item marker;
• to set where the item marker to place;
• to change list markers.
ul {list-style: circle inside url ("../images/dot.gif")}
22
Positioning Properties
• define the position of an element and allow:
– to set the shape of an element;
– to specify how an element should be displayed
when it’s content is to big for the specified area;
– to place an element behind another.
23
Dimension Properties
• allow to specify the height and width of an
element;
• to increase the space between lines.
p.increase {line-height: 1cm}
24
Classification Properties
• allow to control the display and the
visibility of an element;
• to set the position an element relative to its
normal position or using an absolute value;
• to set where an image will appear in another
element.
h2{position:relative; left:40}
img {float: left}
25
Print Properties
• specify:
– the size and orientation of a page;
– the page breaking
• and allow to solve the printing from the
Web problems.
H 1{page-break-before: always}
26
The order of the cascading
1. Browser default
2. External Style Sheet
3. Internal Style Sheet
4. Inline Style
27
Where?
• externally;
• internally;
• inline (locally).
28
Inline Style
• is used inside the HTML tags:
<p style="color: green"> First Paragraph
</p>
29
Internal Style Sheet
• is inside of the HTML tag <HEAD>
<head>
<style type="text/css">
h1 {color: maroon}
p {margin-left: 2cm}
body {background-image: url(”examples/saule.gif")}
</style>
</head>
30
External Style Sheet
• is the additional web page saved in format
.css;
• each document must have a link to the file
saved as .css:
<head><link rel="stylesheet"
type="text/css” a ref=”first.css"></head>
31
External Style Sheet
allow you to control and change layout
of the whole document by
the editing one single page!
32