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
33
Embed
17.6.2015Jaana Holvikivi1 Cascading Style Sheets CSS - Cascading Style Sheets language Cascading Style Sheets (CSS) is a simple mechanism for adding.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
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
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>
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.
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>
li em { color: red; font-weight: bold; }ul { margin-left: 2cm; }
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
18.04.23 Jaana Holvikivi 7
Cascading Style Sheets
<body>
<div>
<b>
<h1> <p>
Inheritance
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>
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)
18.04.23 Jaana Holvikivi 10
Text boxes
block
inline
page
content
margins
block
border
margin
padding
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
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:
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
linefeed in different OSs:MacOS CRUnix LFWindows CR LF
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 */
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
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:"!!!"}
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>
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