CSS

CSS- Cascading Stylesheets Layout for web and XML

Cascading Stylesheets

A language to define how XML documents, html documents and XHTML documents should be rendered for screen, paper, TV, sound …

Reommendation from W3C

Not in itself XML-based, but operates on XML structures

CSS - Historical perspektive

html was built to structure text documetns with links, regardless of presentation medium.

The commercial success of the web drove a need to make more estetically pleasing content.

Logical elements (like <h3>) was used to get a certain graphical effect, instead of using it to indicate a logical content. New elements added without control.

Solution: Make an entirely new language for laout: CSS

Examples

Now

File b.css

p {

font-family: Helvetica, sans-serif;

}

File b.html

<?xml-stylesheet type="text/css" href="b.css"?>

[…]

<p>

Text in helvetica

</p>

[…]

Before File a.html […] <p> <font face="Helvetica"> Text in Helvetica </font> </p> […]

Internal or external CSS

A CSS can either be placed in the actual xml/html document, or as an external filef.

An internal CSS has the advantage that only one http request is required

However, the drawback is that copies of the CSS code must be placed in all documents using it, making updates more difficult.

Associating an XML-document ->CSS

type: MIME-typen text/css

href: URI to the css-file

charset: Character set

title: Title

media: The media for which the stylesheet should be used.An XML document can have several associated stylesheets. Which one(s) is used depends on the output medium: Screen, tty, tv, projection, handheld, print, braille, aural or all

To associate an XML document with a CSS, a processing instruction can be used.

Processin instruction in an XML-fil

<?xml-stylesheet

type="text/css"

href="b.css"

charset="ISO8859-1"

title=”My Stylesheet"

media="screen"?>

Associating an HTML-document ->CSS

An internal CSS can be added using the style-element in the element head.

internal CSS in an HTML.-fil

<html>

<head>

<style type="text/css">

body { background-color: #ffffff; }</style>

</head>

<body>

…

</body>

</html>

To associate an html document with a CSS, you usually ad a link-element in the head-element.

External CSS + HTML-file

<html>

<head>

<link rel="stylesheet”

type="text/css"

href="test.css”/>

</head>

<body>

…

</body>

</html>

Basic principle: Pattern -> Behaviour

The basic principle is to find different ”patterns” in the XML/html using ”selectors”, and then setting some property to some value.

A pattern can, for example, be a tag name.

A property can be a font-size.

Example:

p {

font-family: Helvetica, sans-serif;

}

Selector: All p-elements Property Property value

Different selectors

There are a number of selectors that can be used to find different parts of an XML/html structure.

For example, you can find decendents, children, siblings and attributes.

Example:

* {

font-size: Medium

}

p a {

font-size: Medium

}

Matches all elements matches all a-elements which are decendents to p-elements

Different selectors

Example:

p > a {

font-size: Medium

}

p + a {

font-size: Medium

}

Matches a-elements which are children to p-elements. Matches all a-elements which directly follows a p-elements (siblings) Example: <p> <a></a> </p> <p> <strong> <a>Hej</a> </strong> </p> Matches Matches inte

Matching attributes

Example:

a-element wit href="a.html"

a[href="a.html"] {font-size: Medium}

a-element which has a href-attribut

a[href] {font-size: Medium}

a-element whose href contains the substring "html"

a[href~="html"] {font-size: Medium}

Examples of attribute matches

if the attribute has a value

Substrings of attribute values

ID-values

Pseudo classes and pseudo elements

Example:

First child to a p-element

p:first-child {font-size: Medium}

First letter in a banana-element

banana:first-letter {font-size: Medium}

Before (or after) a banan-element

banana:before {content: ”A Banana!"}

Pseudo classes and pseudo elements matches different types of meta information in the document.

Separated from elements/attributeses with a colon.

There are a number of properties to set height, lenght and sizes.

border-width, font-size, line-height, margin-left, margin-top, margin-right, margin-bottom, left, top, height, width

Most units used in typography can be used.

Absolute, t.ex. cm, in, pt

Relative.ex. em, ex, px

Example

banana {line-height: 2.2em}

tomato {font-size:14pt;line-height:3ex}

Properties: Height/length/size Obs! Två properties till samma selektor, separerat med semikolon

Properties:Fonter

A number of properties for font handling.

font-family: i.e. Helvetica, sans-serif

font-style: i.e. italic, slanted

font-size: absolute values like 12pt or relative values like x-small

font-weight: bold, bolder, lighter or a scale of 100 - 900

font-stretch:wider, ultra-expanded, semi-condensed and so forth.

… and several other properties

Properties:Texts

Text-properties deals with indent, alignment and simple transformations.

Display: block, inline or none. Blocks start on a new-line and is followed by a new-line, inline does not disrupt the text flow, and ”none” hides the content.

text-indent: applicable only on elements with block-display.

text-align: left, right, center, justify

text-decoration: underline, overline, linethrough

text-transform: capitalize, uppercase, lowercase

white-space: pre to preserve linebreaks and whitespace.

Properties:Colours

The most important properties or colours are

Color (note: american spelling)

Background-color

Border-color

Pre-defined colours

Aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

Or hexadecimala colours representations

p {color: # FF FF CC }

or

p {color:rgb( 100%, 100%, 70%}

Advanced 1: Counters

It is also possible to use ”variables” as counter, and insert the value of the counters in what is displayed.

p:before {

content: counter(banana) ". ";

counter-increment: banana

}

h1 {

counter-reset: banana

}

Advanced 2: Classes

If you want to set different properties just to some elements of a certain kind, you can use ”classes”.

p.tomato {

font-size:14pt

}

…

<p class="tomato">

Hello

</p>

Advanced 3: Pseudoclasses for links

It is common to want different colours on links, depending on whether they have been visited or not.

a:link {color: #FF0000} /* unvisited link */

a:visited {color: #00FF00} /* visited link */

a:hover {color: #FF00FF} /* mouse over link */

a:active {color: #0000FF} /* selected link */

Advanced 4: media types

A way to define different properties for diferent media types, i.e. print, screen and aural.

<html>

<head>

<style type="text/css" media="screen">

@import "/css/initial.css";

@import "/css/screen.css";

</style>

<style type="text/css" media="print">

@import "/css/initial.css";

@import "/css/print.css";

</style>

</head>

<body>

<p class="test">Hello</p>

</body>

</html>

Advanced 5: the print media type

A few properties exist only for the media type "print". The most important are:

page-break-after

page-break-before

For more info, see http://www.w3schools.com/css/css_ref_print.asp

Advanced 6: mediatypen aural

An interesting possibility is to control the audio from a voice synthesizer. An example could be:

h1, h2, h3, h4

{

voice-family: male;

richness: 80;

cue-before: url("beep.au")

}

For more info, see http://www.w3schools.com/css/css_ref_aural.asp

Browsersupport

Today good support in all(most) modern browsers.

Opera probably best support

However: Don’t count on mobile phones to support CSS.

Limitations and possibilities

I CSS1: Only support for html-tags

I CSS2: Supports all XML documents, making it easier to separate content from presentation.

I CSS3: Support for columns, pagination, more powerful selectors and for non-european character sets.

A problem is that it is not possible to change the orders of elements, or to re-use an element several times.

CSS

0 comments

Notes on slide 1

1 Group

CSS - Presentation Transcript

More by user

More info about this document

Categories

Tags

Groups / Events

CSS