Scribd
Upload
42 views

Cascading Style Sheets: Sergio Luján Mora

This document summarizes key points about Cascading Style Sheets (CSS) from a lecture presented by Sergio Luján Mora at the Universidad de Alicante. The summary discusses how CSS is used to style HTML documents by separating document structure and presentation, and how it works through rules, selectors and properties. It also provides examples of how to link external CSS style sheets to HTML documents and how to select elements using CSS classes.

Uploaded by

Rober Tebar Espuig
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
42 views

Cascading Style Sheets: Sergio Luján Mora

This document summarizes key points about Cascading Style Sheets (CSS) from a lecture presented by Sergio Luján Mora at the Universidad de Alicante. The summary discusses how CSS is used to style HTML documents by separating document structure and presentation, and how it works through rules, selectors and properties. It also provides examples of how to link external CSS style sheets to HTML documents and how to select elements using CSS classes.

Uploaded by

Rober Tebar Espuig
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 43

Department of Software and Computing Systems

CSS
Cascading Style Sheets

Sergio Lujn Mora

Cascading Style Sheets

Content
Introduction Linking HTML and CSS Rules, selectors, and properties Text properties Background Links Box model Layout

DLSI - Universidad de Alicante

Cascading Style Sheets

Introduction
CSS (Cascading Style Sheets):
A style sheet is a set of instructions each of which tells a browser how to draw a particular element on a page HTML documents are a collection of elements arranged in a hierarchy

Cascading Style Sheets

DLSI - Universidad de Alicante

Cascading Style Sheets

Cascading Style Sheets

Introduction
Hierarchy inheritance:
If you apply style to an element (parent) which contains other elements (children) then this will be inherited by the elements inside

DLSI - Universidad de Alicante

Cascading Style Sheets

Introduction
Rules have two parts: a selector and a declaration
The selector tells a browser which elements in a page will be affected by the rule. There are a number of different types of selector. The declaration tells the browser which set of properties to apply. There are many different properties.

Cascading Style Sheets

Introduction
<html> <head><title>CSS example</title></head> <body> b d <h1>University of Alicante</h1> <p> <img src="logo.png" /> <a href="http://www.ua.es/">University of Alicante</a> </p> <div> <h1>Department of Software and Computing Systems</h1> <p> The Deparment of Software and Computing Systems teaches the following courses: <em>Programming, Object-Oriented Programming, Web Programming, and Databases and Software Engineering</em>. </p> <h2>Teaching Staff</h2> </div> </body> </html>

DLSI - Universidad de Alicante

Cascading Style Sheets

Introduction
<style type="text/css"> h1 {color: blue;} h2 {color: red;} p {font-size: 1.4em;} </style>

Cascading Style Sheets

DLSI - Universidad de Alicante

Cascading Style Sheets

Exercise
Give color green for the paragraph

Cascading Style Sheets

Exercise - Solution
One solution:
p {font {font-size: size: 1 1.4em;} 4em;} p {color: green;}

Also (better):
p {font-size: 1.4em; color: green;}

DLSI - Universidad de Alicante

Cascading Style Sheets

Introduction
Some examples:
body {background: white; i color: black; font-size: 15px;} h1 {background: blue; font-size: 30px;} p {background: yellow;} strong {background: red;} em {background: red; color: yellow;}

If the value has two or more words:


p {font-family: "Times New Roman", serif}

Cascading Style Sheets

Introduction
Comments (1 or more lines):
/* */

Example:
/* Paragraph */ p { text align: center; text-align: color: black; font-family: Arial; }

/* Center */ /* Black */ /* Font face */

DLSI - Universidad de Alicante

Cascading Style Sheets

Introduction
Different versions:
CSS1: CSS level 1. 1996.
http://www.w3.org/TR/REC-CSS1

CSS2: CSS level 2. 1998.


http://www.w3.org/TR/REC-CSS2/

CSS2 revision 1. 2003. CSS3: CSS level 3. (Working draft)

Problem: incompatibilities between browsers

Cascading Style Sheets

Introduction
More information:
W3C: http://www.w3.org/ W3 Schools: http://www.w3schools.com/

DLSI - Universidad de Alicante

Cascading Style Sheets

Cascading Style Sheets

DLSI - Universidad de Alicante

Cascading Style Sheets

Cascading Style Sheets

Linking HTML and CSS


Three ways of making a style sheet affect the appearance of an HTML document:
External (linking):
<head> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head>

Internal (embedded):
<head> <style type="text/css" media="screen"> p {text-indent: 10pt} </style> </head>

Inline:
<p style="text-indent: 10pt">indented paragraph</p>

DLSI - Universidad de Alicante

10

Cascading Style Sheets

Exercise
Change the previous example: link the web page to t an external t l style t l sheet h t

Cascading Style Sheets

Linking HTML and CSS


External:
Many pages can be linked to a single style sheet Making changes to this style sheet can then change the appearance of all the web pages linked to it

Internal:
When the style sheet is used for only one web page

Inline:
When the style is used for only one HTML element

DLSI - Universidad de Alicante

11

Cascading Style Sheets

Linking HTML and CSS


The most popular method is the external style sheet:
<link link rel="stylesheet" rel stylesheet href href="style.css" style.css type="text/css" media="screen" />

href:
Tells the browser where to locate the style sheet, with either a relative or absolute URL

rel:
Tells the browser what to expect
stylesheet alternate stylesheet

Cascading Style Sheets

Linking HTML and CSS


If you define different alternative style sheets, you have to assign a title to each style sheet
<link rel="alternate stylesheet" href="style.css" type="text/css" media="screen" title="Style 1" />

Example: webpage of Spanish Social System (Seguridad Social)

DLSI - Universidad de Alicante

12

Cascading Style Sheets

Cascading Style Sheets

Linking HTML and CSS


<link rel="stylesheet" href="/ireach/internet/css/estilos_B.css" media "screen" type media="screen" type="text/css"> "text/css"> <link rel="alternate stylesheet" href="/ireach/internet/css/estilosHC_B.css" media="screen" type="text/css" title="2.Alto Contraste"> <link rel="alternate stylesheet" href="/ireach/internet/css/estilosHT href /ireach/internet/css/estilosHT_B.css B.css" media="screen" type="text/css" title="3.Texto Grande"> <link rel="stylesheet" href="/ireach/internet/css/estilosP_B.css" media="print" type="text/css">

DLSI - Universidad de Alicante

13

Cascading Style Sheets

Cascading Style Sheets

Linking HTML and CSS


type:
Tells the browser the type of document linked Common values:
text/css text/javascript

DLSI - Universidad de Alicante

14

Cascading Style Sheets

Linking HTML and CSS


media:
Tells the browser the type of device the style sheet is for: screen: Computer display print: Printer projection: Projector aural: Speech syntetizer braille: Braille line tty: Console (text) display tv: Television all: All devices (default value)

Cascading Style Sheets

Rules, selectors, and properties


Rules: the selector, followed by the set of properties, which are surrounded by curly braces (that is { and })
Selector Declaration

h1 {colo {color: #FF0000 #FF0000; backg background: o nd #00FF00}


Property Value Property Colon Separator Value Colon

DLSI - Universidad de Alicante

15

Cascading Style Sheets

Rules, selectors, and properties


Selector:
Type: select every instance of the specified type of HTML element Class: class name preceded by . ID: identifier name preceded by # Pseudo Pseudo-classes: classes: name of the pseudo-class pseudo class

Cascading Style Sheets

Rules, selectors, and properties


Property and value: the property name f ll followed db by a colon l , a space and d th then th the value (if necessary, with its unit, though no space before the unit!) Advices:
Make sure you get the property name exactly right: it's it s got to be color color, not colour or collor All CSS properties can only take a specified range of values: get used to consulting the specification Don't get the punctuation wrong (dont forget the semi-colon between properties)

DLSI - Universidad de Alicante

16

Cascading Style Sheets

Exercise
Write a new webpage Give Gi a b background k d color l (li (light ht gray) ) and d a color l (dark (d k blue) to the whole page
Selector: html or body Property: background-color
Value: #999999

Property: color
Value: #0000AA

Cascading Style Sheets

Exercise - Solution
html { background-color: background color: #999999; color: #0000AA; }

Tips:
The style sheet is easier to read if you put each property on a new line it's very easy to forget semi-colons. Always put that extra one on the last property in a statement. You won't forget to do it when you add a new property later on

DLSI - Universidad de Alicante

17

Cascading Style Sheets

Cascading Style Sheets

Rules, selectors, and properties


Class: is an attribute we can add to HTML elements l t so th that t we can identify id tif them th from f the style sheet, using a class selector, and give them their own style
<p class="footer">

The form of a class selector is very simple, and it would select the specified element with the class attribute class-name
p.footer { color: blue; }

DLSI - Universidad de Alicante

18

Cascading Style Sheets

Rules, selectors, and properties


If you dont specify an element, the class name applies li t to all ll th the elements: l t
.important { color: red; } <p class="important"> Bl Bla, bl bla, bl bla. </p> <ul class="important"> <li>Bla, bla.</li> <li>Bla, bla.</li> </ul>

Cascading Style Sheets

Exercise
Write a new webpage with three paragraphs Define D fi th three classes l f for th the th three paragraphs: h
< p class="normal"> Color dark blue < p class="important"> Color red, background color yellow < p class="extra"> Color green, background color gold

DLSI - Universidad de Alicante

19

Cascading Style Sheets

Exercise - Solution
<html> <head><title>Three paragraphs</title> <style type="text/css"> .normal {color: #0000AA;} .important {color: red; background-color: yellow;} .veryimportant {color: yellow; background-color: red;} </style> <body> y <p class="normal"> This is the first paragraph. Bla, bla, bla, bla.</p> <p class="important"> This is the second paragraph. Bla, bla, bla, bla.</p> <p class="veryimportant"> This is the third paragraph. Bla, bla, bla, bla.</p> </body></html>

Cascading Style Sheets

DLSI - Universidad de Alicante

20

Cascading Style Sheets

Text properties
background-color: background color of element color: color of text

Cascading Style Sheets

Text properties
Colors:
Name of color red rgb(x,x,x) rgb(255,0,0) rgb(y%, y%, y%) rgb(100%,0%,0%) #rrggbb #ff0000 #rgb = #rrggbb #f00 = #ff0000

DLSI - Universidad de Alicante

21

Cascading Style Sheets

Text properties
font-family: specifies a list of one or more fonts using the family name of each
The font names are separated by commas A browser then uses the first font in the list that is installed on its system At the end of that list you should always put one of five generic font names:
serif (e.g. Times) sans-serif (e.g. Helvetica) cursive (e.g. Zapf-Chancery) fantasy (e.g. Western) monospace (e.g. Courier)

If you want to use a font with more than a single word name make sure you put it between quote marks, like this: "Times New Roman"

Cascading Style Sheets

Text properties
font-size: can take what is referred to in CSS as length values

DLSI - Universidad de Alicante

22

Cascading Style Sheets

Text properties
Units:
%: percentage in: inches cm: centimeters mm: millimeters em: equal to the current size of text ex: equal to letter x height pt: point (1 pt = 1/72 inches) pc: pica (1 pc = 12 points) px: pixels

Cascading Style Sheets

Text properties
Units:
Keywords:
xx-small, x-small, small, medium, large, x-large, xx-large smaller, larger

Absolute:
in, cm, mm, pt, pc, px

Relative:
%, em, ex

DLSI - Universidad de Alicante

23

Cascading Style Sheets

Text properties
Best unit: em
If you set the font-size using em units, they will always remain relative to the main text on the page, whatever that might be For example, if you set <h1> to 2em, it will be twice as big as the rest of the text on the page

Cascading Style Sheets

Text properties
font-style: sets the style of the font
normal: default, normal font italic: an italic font oblique: an oblique font

font-variant: displays text in normal or small-caps small caps font


normal small-caps

DLSI - Universidad de Alicante

24

Cascading Style Sheets

Text properties
font-weight: controls the boldness of text
normal bold bolder lighter 100, 200, ..., 900

Cascading Style Sheets

Text properties
text-align: controls the justification of text
left right center justify

DLSI - Universidad de Alicante

25

Cascading Style Sheets

Text properties
text-decoration: for underlining and striking through text
none underline overline line through line-through blink

Cascading Style Sheets

Text properties
text-transform: controls the letters in an element
none capitalize: each word in a text starts with a capital letter uppercase pp lowercase

DLSI - Universidad de Alicante

26

Cascading Style Sheets

Text properties
letter-spacing: controls the spacing between characters word-spacing: controls the spacing between words line-height: sets the distance between lines

Cascading Style Sheets

Exercise
Use the different text properties:
Add some special styles to make the headings stand out more from the main text Make the text in the paragraphs look more clean and attractive

DLSI - Universidad de Alicante

27

Cascading Style Sheets

Background
background-color: defines the backgroud color l background-image: puts an image in the background
background-image: url(logo.png);

background-repeat: defines how the b k backgound di image i is going i t to b be repeated t d background-position: defines the position of the background image

Cascading Style Sheets

Background
background-repeat:
repeat: the image will tile to fill the whole element repeat-x: the image will only repeat horizontally across the element repeat-y: the image will only repeat vertically down the element no-repeat: only a single instance of the element will appear

DLSI - Universidad de Alicante

28

Cascading Style Sheets

Exercise
Create a new web page Put an image as background image Try the different repeat values

Cascading Style Sheets

Background
background-position: specify 2 values, the first for where you want the image to be horizontally, the second for where it will be vertically
Length values Keyword values: top, bottom, left, right, center

DLSI - Universidad de Alicante

29

Cascading Style Sheets

Background
Example:
background-position: center center - places the image right in the center of the element, both horizontally and vertically background-position: top left places the image in the top left corner background-position: right bottom - places the image in the bottom right corner

Cascading Style Sheets

Exercise
Create a new web page Put an image as background image in the center of the web page

DLSI - Universidad de Alicante

30

Cascading Style Sheets

Links
Links can have four different states:
link: this is the normal state visited: when a browser has visited that destination recently hover: while the cursor is over the link active: while the link is being clicked

We can create rules that apply to links in any of these states

Cascading Style Sheets

Links
Pseudo-classes:
a:link {...} a:visited {...} a:hover {...} a:active {...}

DLSI - Universidad de Alicante

31

Cascading Style Sheets

Exercise
Give links in both their normal and visited state a backgroundcolor of #95b7cd and make their text color the same as the regular text on the page A user cant tell whether a link is to a page they have recently viewed or not. Give links in their hover state a background-color of #aaddee Give links in their active state a background-color of #3cc7f0

Cascading Style Sheets

Exercise - Solution
a:link { color: #666666; background-color: } a:visited { color: #666666; background-color: } a:hover { background-color: g } a:active { background-color: } #95b7cd;

#95b7cd;

#aaddee;

#3cc7f0;

Roll over and click the links to see the effect of the hover and active states

DLSI - Universidad de Alicante

32

Cascading Style Sheets

Exercise
Most browsers have a default setting for links, which is to underline them How can we change this? How can we draw a line through the text of visited links?

Cascading Style Sheets

Exercise - Solution
a:link { ... text-decoration: none; }

a:visited { ... text-decoration: line-through; }

DLSI - Universidad de Alicante

33

Cascading Style Sheets

Box model
Boxes: each element of the web page is represented t d by b a b box

Cascading Style Sheets

Box model
margin is the distance between the edge of an element and its adjacent elements padding is the distance between the edge of an element and its content

DLSI - Universidad de Alicante

34

Cascading Style Sheets

Box model
padding, border and margin are divided i t four into f edges: d top, t bottom, b tt left l ft y right i ht Therefore, we have: border-left, border-right, border-top and borderbottom (and the same for margin and padding) padding ddi , border b d and d margin i apply l th the values to all four edges

Cascading Style Sheets

Box model
Borders can be applied either to all edges of an element, l t or each h edge d i individually di id ll There are three characteristics of a border you can control:
Its style, using values like
solid dotted dashed double

Its width, using all the usual length values Its color, using the color values

DLSI - Universidad de Alicante

35

Cascading Style Sheets

Exercise
Create a new web page Write W it four f paragraphs h Apply a different border style and background to each paragraph

Cascading Style Sheets

DLSI - Universidad de Alicante

36

Cascading Style Sheets

Exercise - Solution
.p1 { background-color: #999999; border: solid 5px green; } .p2 { background-color: #aa6666; border: dotted 5px green; } .p3 { background-color: g #66aa66; border: dashed 5px green; } .p4 { background-color: #6666aa; border: double 5px green; }

Cascading Style Sheets

Exercise 1
Read exercise document: Curriculum vitae

DLSI - Universidad de Alicante

37

Cascading Style Sheets

Layout
<span> and <div> are the main building bl k used blocks di in CSS page l layouts t They are simply generic HTML block element
span: inline div: block

You can wrap it around the different blocks of content you want to position i i on your page

Cascading Style Sheets

Layout
<span> and <div> need unique id attributes tt ib t so that th t we can identify id tif th them and d give them positioning properties in the style sheet ids must be unique in any single HTML document, otherwise HTML document is not valid

DLSI - Universidad de Alicante

38

Cascading Style Sheets

Layout
Example:
HTML:
<div id="header"> ... </div>

CSS:
#header {background-color: {background color: gray; color: red}

Cascading Style Sheets

Layout
Basic three column layout with a navigation bar (navbar) on the left and a sidebar on the right
It uses a combination of static, relative and absolute positioning

DLSI - Universidad de Alicante

39

Cascading Style Sheets

Layout
<div id="header"></div> <div id="content"> id content > <div id="navbar"></div> <div id="main-text"></div> <div id="sidebar"></div> </div>

Cascading Style Sheets

Layout
Both #header and #main-text are going to be positioned statically
They simply flow down the page, one after the other, in the same order as they occur in the XHTML

DLSI - Universidad de Alicante

40

Cascading Style Sheets

Layout
body { margin: 0; background-color: #aaaaaa; text-align: center; } #header { background-color: #0000ff; color: #ffffff; text-align: g center; font-size: 2em; } #content { position: relative; }

Cascading Style Sheets

Layout
#navbar { position: absolute; top: 0; left: 0; width: 198px; background-color: #ff0000; } #main-text { margin-left: g 198px; p margin-right: 198px; background-color: #ffffff; }

DLSI - Universidad de Alicante

41

Cascading Style Sheets

Layout
#sidebar { position: absolute; top: 0; right: 0; width: 198px; background-color: #00ff00; }

Cascading Style Sheets

DLSI - Universidad de Alicante

42

Cascading Style Sheets

Exercise 2
Read exercise document: 2-columns layout f curriculum for i l vitae it

DLSI - Universidad de Alicante

43

You might also like