17.6.2015jaana holvikivi1 cascading style sheets css - cascading style sheets language cascading...

33
30.03.22 Jaana Holvikivi 1 Cascading Style Sheets CSS - Cascading Style Sheets language Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents designed for HTML in 1996 CSS1 (1996), CSS2 (1998), CSS Mobile Profile CSS3 (working drafts) browser support (better than for XSL) CSS1 IE5 onwards, Firefox, etc. CSS level 2 IE8, Firefox, Opera http://www.w3schools.com/css/css_reference.asp own syntax

Post on 20-Dec-2015

257 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 1

Cascading Style Sheets

CSS - Cascading Style Sheets language Cascading Style Sheets (CSS) is a simple mechanism for

adding style (e.g. fonts, colors, spacing) to Web documents

designed for HTML in 1996 CSS1 (1996), CSS2 (1998), CSS Mobile Profile CSS3 (working drafts) browser support (better than for XSL)

CSS1 IE5 onwards, Firefox, etc. CSS level 2 IE8, Firefox, Opera http://www.w3schools.com/css/css_reference.asp

own syntax

Page 2: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 2

CSS rules CSS style rules:

Each rule starts with a tag name followed by a list of style properties bracketed

by { and } tag name defines the element Each style property starts with the property's name,

then a colon and lastly the value for this property. When there is more than one style property in the list, you need to use a semicolon between each of them

• property : value• property – i.e. font-size• value – i.e. 16 pt'

h2 {font-size: 16pt; font-weight:bold} latest rule is valid

Page 3: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 3

Using inline styles

<html><!-- Exercise 1: inline style -->

<head><title>XML - Inline Styles</title></head><body><p>This text does not have any style applied to it.</p><!-- The style attribute allows you to declare inline --><!-- styles. Separate multiple styles with a semicolon. --><p style = "font-size: 20pt">This text has the <em>font-size</em>style applied to it, making it 20pt.</p>

<p style = "font-size: 20pt; color: #0000ff">This text has the<em>font-size</em> and <em>color</em> styles applied to it, making it 20pt. and blue.</p></body></html>

Page 4: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 4

Internal styles

<html><!-- Exercise 2: internal style --><head><title>XML: introduction to CSS </title>

<!-- Declaring a style in the header section --><style type = "text/css"> em { background-color: #8000ff; color: white } h1 { font-family: arial, sans-serif }

p { font-size: 14pt }.special { color: blue }

</style></head>

<body><!-- This class attribute applies the .blue style --><h1 class = "special">Main heading</h1><p> For st etc.

Page 5: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 5

External styles

<html><head>

<title> Linking an external style sheet </title><link rel = "stylesheet" type = "text/css" href = "style4.css"></head>

<body>

/* Example: style4.css *//* External style sheet */a.nodec { text-decoration: none; }a:hover { text-decoration: underline;

color: red;background-color: #ccffcc; }

li em { color: red; font-weight: bold; }ul { margin-left: 2cm; }

Page 6: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 6

Some points of CSS examples

in HTML: <span style =”clear: right”>here a non-floating part of

text is started. Span is used to delimit a text area for exceptional formatting.</span>

div defines a separate paragraphdiv {text-align: center; margin-bottom: 1em}

The z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order.

in CSS: em refers to the relative size of text

Page 7: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 7

Cascading Style Sheets

<body>

<div>

<b>

<h1> <p>

Inheritance

Page 8: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 8

Inheritance

<style type="text/css"> body {color : red} h1 {color : blue} p {font-family: helvetica, arial, sans-serif; padding: 2px} </style>

Page 9: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 9

Text boxes

padding: 2pt 3 pt 4pt 5pt between frame and content

margin: 2px 3px 4px 5px between boxes (order: top, right, bottom, left) margin-left, margin-right, etc.

width: 50%; height: auto size of image

float: left /* right */ (makes the box float) clear: both /* left, right*/ (no floating)

Page 10: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 10

Text boxes

block

inline

page

content

margins

block

border

margin

padding

Page 11: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 11

How the browser sets priority for style definitions

Styles declared as important by the page creator {color : red !important }

Styles declared as important by the user Normal styles by the page creator Normal styles by the user Default styles by the browser if there are no user styles

Page 12: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 12

External information : Pseudo-classes and pseudo-elements

normally CSS styles are based on HTML tags and attributes. Sometimes it is not sufficient.

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

Anchor pseudo-class: Links (LINK) are VISITED or ACTIVE Example: 

a:link {color : red} a:visited {color : blue} a:active {color : white}

The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it.

Page 13: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 13

Some pseudo-elements

P.INITIAL:FIRST-LETTER {font-size : 200 %} P.INITIAL:FIRST-LINE {text-transform : uppercase} The :first-child pseudo-class matches an element that is

the first child of some other element.

Page 14: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 14

Using CSS on HTML pages

Generalized use Write style definitions to fit several pages, preferably

the entire site. If you need page specific styles, use the STYLE attribute inside the document.

Scalability Avoid using absolute values for font size, margins,

etc. Users can have very different browsers, screen resolutions, window sizes, etc. Use relative measures.

Page 15: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 15

Using CSS on HTML pages

Test the styles with different browser versions, Design your pages to work also without style sheet

support Browsers behave and render pages in non-standard

ways! Select fonts with care

people may not have all nice fonts on their PC Don’t push it too far!

Not every single element and attribute needs a pre-set value.

Page 16: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 16

XML and CSS

calling an external CSS from an XML-document <?xml-stylesheet href="my.css" type="text/css“?>

HTML: CSS refers to standard tags (<p> is paragraph, <em> inline text)

XML: you need to explicitly define block elements, inline elements, etc.

Page 17: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 17

XML and CSS

display: block paragraph {display: block}

display: inline name {display:inline}

display: none element is hidden

display: list-item

Page 18: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 18

XML and CSS2 example

<?xml-stylesheet type="text/css" href="bach.css"?><article> <headline>Fredrick the Great meets Bach

</headline> <author>Johann Nikolaus Forkel</author> <para> One evening, just as he was getting his <instrument>flute</instrument> ready and his

musicians were assembled, an officer brought him a list of the strangers who had arrived.

</para> </article>

Page 19: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 19

XML and CSS2 example

article, headline, author, para { display: block }headline { font-size: 1.3em }author { font-style: italic }article, headline, author, para { margin: 0.5em }instrument { display: inline }

Page 20: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 20

XML and CSS: internal styles and images

internal styles in XML<?xml-stylesheet type="text/css"

href="#internalstyles" ?> picture reference

<style id="internalstyles">logo_img {background-image:url(mylogo.jpg); width: 125px;height:110 px; position: relative}

</style><logo_img/><p>Welcome to our institute!</p>

Page 21: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 21

XML and Cascading Style Sheets: Examples

sidebars and tables<?xml-stylesheet type="text/css" href="#internalstyles"?><style id =”internalstyles”>

style {display : none}document {display : block}heading {display : block; font-size:24pt;}p {display : block; font-family: Arial; position:relative;}sidebar {display : block; float: right; border:inset 3pt;

background-color:#C0C0FF;}sidebar heading{display : block; font-size: 18pt;}sidebar p{display:block; font-size: 10pt;}</style>

Page 22: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 22

XML and CSS: Lists

<!–- example.css -->employees {display:block; visibility:visible;}employee {display:list-item;list-style-type:disc}lastName {display : inline; font-size:12pt;}firstName {display : inline; font-size:12pt;}salary {display : none;}

Page 23: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 23

XML and CSS: tables

tables have poor browser support (Mozilla only) <!– table.css -->

employees {display:table;}employee {display:table-row;}firstName {display : table-cell;}lastName {display : table-cell;}title {display : table-cell;} salary {display : table-cell;}

Page 24: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 24

Encoding: ASCII

0 1 0 0 0 0 0 1 AA

Encoding

“A” is represented by this bit pattern1 byte= 8 bits

“A” is represented by this bit pattern1 byte= 8 bits

Page 25: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 25

ASCII -character setCharacter ASCII Code Character ASCII Code

A 100 0001 0 011 0000B 100 0010 1 011 0001C 100 0011 2 011 0010D 100 0100 3 011 0011E 100 0101 4 011 0100F 100 0110 5 011 0101G 100 0111 6 011 0110H 100 1000 7 011 0111I 100 1001 8 011 1000J 100 1010 9 011 1001K 100 1011 Space 010 0000L 100 1100 . 010 1110M 100 1101 ( 010 1000N 100 1110 + 010 1011O 100 1111 & 010 0110P 101 0000 $ 010 0100Q 101 0001 * 010 1010R 101 0010 ) 010 1001S 101 0011 ; 011 1011T 101 0100 , 010 1100U 101 0101 - 101 1111V 101 0110 ? 011 1111W 101 0111 : 011 1010X 101 1000 = 011 1101Y 101 1001

Character ASCII Code Character ASCII CodeA 100 0001 0 011 0000B 100 0010 1 011 0001C 100 0011 2 011 0010D 100 0100 3 011 0011E 100 0101 4 011 0100F 100 0110 5 011 0101G 100 0111 6 011 0110H 100 1000 7 011 0111I 100 1001 8 011 1000J 100 1010 9 011 1001K 100 1011 Space 010 0000L 100 1100 . 010 1110M 100 1101 ( 010 1000N 100 1110 + 010 1011O 100 1111 & 010 0110P 101 0000 $ 010 0100Q 101 0001 * 010 1010R 101 0010 ) 010 1001S 101 0011 ; 011 1011T 101 0100 , 010 1100U 101 0101 - 101 1111V 101 0110 ? 011 1111W 101 0111 : 011 1010X 101 1000 = 011 1101Y 101 1001

Page 26: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 26

ASCII American Standard Code for Information Exchange

7 bit 2 7 = 128 8 bit 28 = 256 , including control characters ANSI, ISO Latin-1: 8 bit codes Unicode (IBM, Microsoft, Sun) 16 bit encoding: 216 = 65 536 ISO 10646 four bytes

Encoding standards

Page 27: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 27

White space

space, linefeed, tabulators character Unicode valuetab #x9newline #xAcarriage return #xDspace #x20

linefeed in different OSs:MacOS CRUnix LFWindows CR LF

Page 28: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 28

White space

space, linefeed, tabulators HTML simply ignores XML: in principle white space is kept normalization:

spaces between elements removed line breaks are replaced by space spaces from beginning and end of a block are

removed quotations around literals are removed entity references are replaced by corresponding

character strings if you wish to keep the white space:

white-space: pre /* normal, nowrap */

Page 29: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 29

CSS2 extensions

CSS2 includes CSS1 plus extensions: location of an element book * title { ...} /* sub-elements of book element */ book > title { ...} /* title-child-elements of book-

element title + para { ... } /* para-elements which follow the

title-element */ para: first-child { ...} /* para-element’s 1. child */

Page 30: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 30

CSS2 extensions

The ':before' and ':after' pseudo-elements can be used to insert generated content before or after an element's content note:before {content:"NOTE: "; font-weight:bold} note:after {content:"!!!"}

Page 31: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 31

CSS2 extensions :before and :after

example: <STYLE>

P.Juliet {font-style:italic;}P.Juliet:before {content: ”Juliet: ”;color:red;}P.Romeo {font-style:bold;}P.Romeo:before {content: ”Romeo: ”;color:blue;}</STYLE><P class=”Romeo”>Hark! What light on yonder window

breaks?></P><P class=”Juliet”> Romeo? Romeo? Wherefore art thou,

Romeo?></P>

Page 32: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 32

CSS2 extensions

reference to attribute value title:before { content: attr(author) } course:after { content: "(" attr(for:) ")" }

element selection based on an attribute value para[security] { ...} /*attribute exists */ para[security="secret"] { ...} para[keywords~="css"] { ...} /* one of the values

is css */ [security="secret"] { ... } /* all elements with

attribute security and value secret */

Page 33: 17.6.2015Jaana Holvikivi1 Cascading Style Sheets  CSS - Cascading Style Sheets language  Cascading Style Sheets (CSS) is a simple mechanism for adding

18.04.23 Jaana Holvikivi 33

CSS2 extensions media

aural: sound @media aural {

document{play-during:url(backgroundmusic.mp3) repeat mix;}title {voice-family:’Elvis’ male;volume:medium;}}

@media visual @media braille @media print { BODY { font-size: 10pt } } @media screen { BODY { font-size: 12pt } } @page