Cascading Style Sheets

Cascading Style Sheets Course for librarians Integrated Training Centre for LIS specialists in Lithuania, Klaipeda University Library, 2001

Content • what Cascading Style Sheets are? • why it is used? • how is it used? • where?

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;

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.

World Wide Web Consortium (W3C): • CSS1 (1996); • CSS2 (1998); • CSS3 (2001) • Netscape and Microsoft Corporations; • Internet Explorer (IE) and Netscape Navigator (NN) supports styles.

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.

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.

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 semi-colon: p {text-align: center; color: maroon}.

Class Atribute (1) defines different styles for the same element: p. center {text-align: center} in HTML document: <p class=“center”>Paragraph</p>

Class Atribute (2) .center {text-align: center} means: <h1 class="center">Heading is centered</h1> <p class="center">Paragraph is centered</p>

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;}

Grouping you can group selectors: h1, h2, h3 {color: maroon} h4 {color: green} Note: each selector has been separated with a comma.

Comments are used for the explaining the code. It can help to edit the code later: /* Comment */ p {text-align: center; font-family: arial}

Formatting text with CSS • font family and font size; • text colour; • text background; • text aligning; • styles for links;

Font Properties • define the font in text and allow to change: • the font family; • boldness, • size, • style of the text. H1 {font-family: arial}

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}

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}

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}

Layout with CSS • background; • lists; • borders; • aligning elements; • wrapping text, padding around element; • styles for printing.

Margin Properties • define the space around an element. p {margin: 1cm 4cm 2cm 4cm}

Padding Properties • define the space between an element and the element border.

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")}

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.

Dimension Properties • allow to specify the height and width of an element; • to increase the space between lines. p.increase {line-height: 1cm}

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}

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}

The order of the cascading 1. Browser default 2. External Style Sheet 3. Internal Style Sheet 4. Inline Style

Where? • externally; • internally; • inline (locally).

Inline Style • is used inside the HTML tags: <p style="color: green"> First Paragraph </p>

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>

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>

External Style Sheet allow you to control and change layout of the whole document by the editing one single page!

Cascading Style Sheets