NSWI142 – Web Applications

Web Applications (NSWI142 ), Lecture 3 1

NSWI142 – Web Applications

Lecture 3 – CSS (Part 1)Martin Nečaský, Ph.D.

[email protected]

CSS

• Style and appearance is no longer a part of (X)HTML

• CSS is used for that• CSS – Cascading Style Sheets

– (X)HTML contains data to display– CSS says how to display it

• CSS sources:http://www.w3schools.com/css/http://www.w3.org/Style/CSS/


http://www.w3schools.com/css/

http://www.w3.org/Style/CSS/

CSS Levels• Instead of versions

– Each level extends and refines the previous one• CSS Level 1

– CSS1 specification obsolete– CSS Level 1: features from CSS1 in CSS2.1 syntax

• CSS Level 2– CSS2 became W3C Recommendation before there was a „Candidate Recommendation“ stage

- many problems over time– CSS Level 2 Revision 1 (CSS2.1) created, obsoleted CSS2, Defines CSS Level 2

• W3C Recommendation 07 June 2011

• CSS Level 3– Modular instead of a monolithic document– Core: CSS2.1– Modules add/replace features of CSS2.1– Each module levels individually (Selectors Level 4 before Line Module Level 3)

• current status: http://www.w3.org/standards/techs/css#w3c_all


http://www.w3.org/standards/techs/css#w3c_all

CSS Profiles

• Not all implementations will implement all functionality defined in CSS.– CSS Mobile Profile 2.0– CSS Print Profile 1.0– CSS TV Profile 1.0


CSS Lecture Content

• CSS2.1– Basics– Examples


CSS Hello World (1/2)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML>

<HEAD><TITLE>Bach's home page</TITLE>

</HEAD><BODY>

<H1>Bach's home page</H1><P>Johann Sebastian Bach was a composer.

</BODY></HTML>

CSS:h1 { color: red; }


CSS Hello World (2/2)h1 {color: red;

}• CSS style saying that H1 headings will be red• h1 is a selector – selects HTML elements affected by the

following style• Syntax:

<selector> { property1: value1;property2: value2;}


CSS – How to add to a web page1. Sometimes appropriate:

– To the HTML head add: <style>– <style type="text/css">…</style>– Content of the element is the style sheet itself

2. Better: External style– One style for multiple web pages– A separate file, e.g. style.css– To the HTML head add: <link>– <link rel="stylesheet" href="style.css"/>– Possibly multiple style sheets

• For various media, browsers, …

3. Not recommended: Inline style– <p style="font-size: 5pt;" >…</p>


Example

body {background-color: green;font-weight: bold;color: white;

}• This time we specify a style for the whole <body>• The style is inherited

– E.g. <p> elements inside <body> styled like this unless overwritten


CSS and (X)HTML• id and class attributes can be specified for each (X)HTML

element– One id uniquely identifies ONE specific element– One class can be assigned to MULTIPLE elements

• These (X)HTML attributes are commonly used for CSS styles (and other things – JavaScript, …)

• Using CSS we can say:– „heading with id="xy" will be red“– „each element with class="blue" will be blue

• Example: <p class="blue">…</p>• In CSS we will exploit the div and span elements


(X)HTML - <div>, <span>Block and inline elements

• <div> and <span> are elements without HTML meaning• But they can have id and class attributes• They are used for specifying various web page and text parts for formatting• There are 2 visual types of (X)HTML elements according to CSS

– Block• Takes up all available width• Followed by a newline• <div>, <h1>, <p>, <ul>, <ol>, <li>, …• This behavior can be forced by display: block; even for inline elements

– Inline• Takes up only necessary width• Not followed by a newline• <span>, <i>, <b>, <img>, <input>, …• This behavior can be forced by display: inline; even for block elements


Selectors (1/5) – classes and IDs


elements with class="blue" .blue { color: blue; }

the element with id="red" #red { color: red; }

example1_id_class.html

(X)HTML - <div> and <span> - example

XHTML:<div class="blue"> <p>This is my blue paragraph</p> <p>Red <span id="redword">word</span> </p></div>

CSS:div.blue {

color: blue;}#redword {

color: red;}


(X)HTML - <div> and <span> - example

XHTML:<table> <tr class="odd"> <td>1-1</td><td>1-2</td></tr> <tr class="even"><td>2-1</td><td>2-2</td></tr> <tr class="odd"> <td>3-1</td><td>3-2</td></tr> <tr class="even"><td>4-1</td><td>4-2</td></tr></div>

CSS:tr.odd {

background-color: white;}tr.even {

background-color: grey;}


example2_striped_table.html

Selectors (2/5) - attributeselements with a title attribute [title]

{ color: blue; }elements with an attribute with a specific value type="text"

[type=text] { color: blue; }

elements with an attribute with a specific value alt="myTitle" in a space separated list

[alt~=myTitle]{ color: red; }

elements with an attribute with a specific value alt="myTitle" in a "-" separated list

[lang|=cs] { color: blue; }


example3_striped_table_attributes.html

Selectors (3/5) – pseudo-classes• <a> when the mouse pointer is over ita:hover {background-color: yellow;

}• :visited – visited link• :link – unvisited link• :active – when the user activates the element• :hover – when the mouse pointer is over it

– Works with multiple elements, not just <a>• :focus – when an element has focus


example4_hover.html

Selectors (4/5) – pseudo-elements

• :first-line– p:first-line { text-transform: uppercase }– <P>This is a somewhat long HTML paragraph that will be

broken into several lines. The first line will be identified by a fictional tag sequence.</P>

– THIS IS A SOMEWHAT LONG HTML PARAGRAPH THATwill be broken into several …

• :first-letter• :before, :after

– Insert content before resp. after the actual content


example5_first_line.html

Selectors (5/5) – more

• More selectors– * - matches any element– E > F – matches any F element that is a child of an

element E– E:first-child – matches element E when it is a first

child of its parent– E:lang(c) – matches element E when it is in language c– E + F – matches F element immediately preceded by a

sibling element E


example6_first_child.html

example7_sibling.html

Selector combination examples• h1 em { color:blue }

– <H1>This <SPAN class="myclass">headline is <EM>very</EM> important</SPAN></H1>

– Matches EM that is a descendant of H1• div p *[href]

– matches any element that (1) has the "href" attribute set and (2) is inside a P that is itself inside a DIV

• p.special:before {content: "Special! "}p.special:first-letter {color: #ffd800} – Generates „Special!“ text before content of each <p

class=„special“>content</p>– Will render the "S" of "Special!" in gold.


Properties and values• Some properties have multi-part values• border-width: 9px;

– 9 pixels on all sides• border-width: 10px 0px 10px 0px;

– Order: top, right, bottom, left– Top and bottom 10 pixels, left and right none

• Units– Absolute: px, pt, pc, in, cm, mm– Relative: em, ex– No space between value and unit!

• font-size: 12pt;


example8_border.html

Colors• aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange,

purple, red, silver, teal, white, and yellow• numerical

– red, green, blue - rgb(123,123,123) – 0-255– #ffffff – hexadecimal


http://www.w3.org/TR/CSS21/syndata.html#color-units

http://www.w3.org/TR/CSS21/syndata.html#color-units

Box model

• CSS based on a box model• Each element has

– Margin – distance from border to another box– Border – Padding – between border and main content– Content – the content of the element itself

div {margin: 10px 0px 0px 0px;border-width: 5px;

}


example9_box.html

Borders

• Border• Interesting properties:

– border-width: width + units;– border-style:

• [solid|dotted|double|none|dashed|hidden|groove|ridge|inset|outset];

– border-color: color


Position1. position: static;

– Normal placement according to content flow– Ignores top, left, right, bottom

2. position: relative;– Position relative to normal– Using top, left, right, bottom

3. position: fixed;– Position in the browser window, takes only necessary space– Using top, left, right, bottom

4. position: absolute;– Absolute in the content of the parent, takes only necessary space– Using top, left, right, bottom– Possible overlays of multiple elements

• z-index: -1;• Larger the z-index means more in front


example11_position_static.html

example12_position_relative.html

example10_position_fixed.html

example13_position_absolute.html

Floatingfloat: right;float: left;

• Element floats left or right• Content floats around it• Suitable for example for navigation box on the

left• Or for an image with text around it


example14_float.html

@import rule

• Imports other stylesheets– Must precede all other rules (except @charset)

@import "mystyle.css"; @import url("mystyle.css");• Can be media dependent

@import url("fineprint.css") print;@import url("bluish.css") projection, tv;


Inheritance• body { font-size: 10pt } h1 { font-size: 130% }

• <BODY> <H1>A <EM>large</EM> heading</H1> </BODY>• 'font-size' for H1 element will have the computed value '13pt‚

– (130% times 10pt, the parent's value)• the computed value of 'font-size' is inherited

– the EM element will have the computed value '13pt' as well. • If the user agent does not have the 13pt font available, the

actual value of 'font-size' for both H1 and EM might be, for example, '12pt'.


http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size

http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size

Cascading• 3 sources of rules: Author, User, User-agent• Some rules may be marked !important

– body { color: black !important; }• Sort according to importance (higher is more important)

1. user agent declarations2. user normal declarations3. author normal declarations4. author important declarations5. user important declarations

• Sort rules with the same importance and origin by specificity– More specific selector will override more general ones

• Finally, sort by specified order


Counters• Used for automated numbering• 2 properties

– counter-increment• Increments specified counters by an optionally specified values (default 1)

– counter-reset• Sets specified counters to optionally specified values (default 0)

BODY { counter-reset: chapter; /* Create a chapter counter scope */

} H1:before {

content: "Chapter " counter(chapter) ". ";counter-increment: chapter; /* Add 1 to chapter */

} H1 {

counter-reset: section; /* Set section to 0 */}H2:before {

content: counter(chapter) "." counter(section) " ";counter-increment: section;

}


Lists

• Special list properties– Apply to elements with display: list-item

• (X)HTML: <li> <ul> <ol>– list-style-type

• disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit

– list-style-image• ul {

list-style-image: url("http://png.com/ellipse.png") }

– list-style-position• Sets whether the list symbol is inside or outside the box• outside | inside


http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit

Tables

• Document language elements must be mapped to table elements using the display property (e.g. XML languages)

• For HTML4:table { display: table }tr { display: table-row }thead { display: table-header-group }tbody { display: table-row-group }tfoot { display: table-footer-group }col { display: table-column }colgroup { display: table-column-group }td, th { display: table-cell }caption { display: table-caption }


Validation

• How to determine whether a style is valid?– does it comply with the CSS2.1 standard?

• http://jigsaw.w3.org/css-validator– Validates a link to a page using CSS– Validates through a direct input of the CSS style3


http://jigsaw.w3.org/css-validator

Documents

NSWI142 – Web Applications