1 CSS (Cascading Style Sheet) English for ICT. 2 HTML vs. CSS HTML can be used to indicate both...

1

CSS(Cascading Style Sheet)

English for ICT

2

HTML vs. CSS

• HTML can be used to indicate both semantic of document and its presentation

• It is advisable to separate HTML for semantic and use CSS to determine how the document should be presented

• CSS (Cascading Style Sheet) is used to work with HTML and XML

• CSS provides a variety of features for document presentation

3

Parts of a Single ruleset-type Style Rule

property names

font-size : x-large

background-color : yellow

p {

}

declarations

selector stringdeclaration block

4

Specifying Style Rules

• The syntax for specifying style properties is:

• For multiple properties:

Selector { property: value}

Selector { property1: value1;property2: value2;property3: value3;………. ……propertyN: valueN;

}

5

How a Style can be used?

• External (Imported)– CSS is a separate file from HTML

• Embedded– Style rules are defined inside HTML file

• Inline– Style is applied within HTML tags– Actually, it is an attribute of HTML tags

6

Inline Style

<body style="background-color: lime;"> <p id="test" style="font-size:x-large; background-color: yellow;">

Hello World! </p></body>

7

Embeded Style

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Title of document</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css">

body { background-color: lime; }p { font-size: x-large; background-color: yellow;}

</style></head><body>

<p id="test">Hello World!

</p></body></html>

8

External Style

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Title of document</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="style1.css" rel="stylesheet" type="text/css" title="Style 1" /> <link href="style2.css" rel="alternate stylesheet" type="text/css" title="Style 2" /></head><body>

<p id="test">Hello World!

</p>

body { background-color: lime; }

p { font-size: x-large; background-color: yellow;

}

style1.css

body { background-color: yellow; }

p { font-size: x-large; background-color: blue;}

style2.css

9

External Style (contd)

10

Applying Style Sheet according to Media Type

• title attribute are not needed

• These style sheets cannot be selected by users– They will apply regardless of user actions

• Such style sheets are called persistent– They can be recognized by their lack of a title attribute

<title>Title of document</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="style1.css" rel="stylesheet" type="text/css"

media="screen, tv, projection" /> <link href="style2.css" rel="stylesheet" type="text/css"

media="handheld, print" /></head>

11

Possible Values for media Attribute(HTML 4.0 Standard)

Value Media Type

all All types (default)

aural Speech synthesizer

braille Tactile device generating braille characters

handheld Handheld device, such as a cell phone or PDA

print Printer

projector Projector, such as one used to display a large monitor image on a screen

screen Computer monitor

tty Fixed-width character output device

tv Television (monitor with low resolution and little or no scrolling)

12

Benefits of Using Style Sheet

• It is easy to give all of elements on a page a consistent appearance

• If, at a later time, we wish to change an attribute value, we need only make change in on style sheet.

• If we use a single style sheet for all of the pages at a site,– all of the site pages will have a consistent style, – and one that can be changed with little work

13

Selector Types

• Type selector

• Universal selector

• ID selector

• Class selector

• Pseudo-Class selector

• Descendant selector

14

/* Headers have dark background */h1, h2, h3, h4, h5, h6 { background-color : purple }

/* All elements bold */* { font-weight : bold }

/* Elements with certain id's have light background */#p1, #p3 { background-color : aqua }

/* Elements in certain classes are italic, large font, or both */#p4, .takenote { font-style : italic }span.spacial { font-size : x-large }

/* Hyperlink ('a' element) styles */a:link { color : black }a:visited { color : yellow }a:hover { color : green }a:active { color : red }

/* Descendant selectors */ul span { font-variant : small-caps }ul ol li { letter-spacing : 1em }

style_demo.css

15

Type Selector

• Simplest form is to use the name of single element type, such as: body or p, etc.

• A rule can apply to multiple elements by separating them with comma such as: h1, h2, h3, h4

• This specifies that purple is applied to all headers’ background color

h1, h2, h3, h4, h5, h6 { background-color : purple }

16

Universal Selector

• The universal selector is denoted by an asterisk (*)

• Universal selector represents ever possible element type

• This specifies a value of bold for the font-weight property of every element in the document

* { font-weight : bold }

17

ID Selector

• Every element in an XHTML has an associated id attribute

• If a value is assigned to id attribute, then no other element’s id can be the same name

• ID selector can be used by preceding a selector name with a number sign (#)

18

ID Selector Example

• The element with id p1 or p3 will be rendered with its background color of aqua

#p1, #p3 { background-color : aqua }

<p id=“p3”>blah blah blah ….

</p>

19

Class Selector

• Another HTML attribute frequently used with style sheet is class

• Class selector can be represented by preceding the selector name with a period (.)

• Class selector is different from ID selector in that it allows multiple use of the style as oppose to ID select, which applies to only a single element

20

Class Selector Example

• Element needing to have this effect can add “takenote” to its class attribute as follow:

• This means class “special” can be used with span element only

#p4, .takenote { font-style : italic }

span.special { font-size : x-large }

<span class=“takenote”> …….</span>or<span class=“takenote special cool”> …… </span>

Note: *.takenote and .takenote are equivalent.

21

Pseudo-Class Selector

Selector Associated a Elements

a:visited Any element with href corresponding to a URL that has been visited recently

a:link Any element that does not belong to the a:visited pseudo-class

a:active An element that is in the process of being selected; for example, the mouse has been clicked on the element but not released

a:hover An element over which the mouse cursor is located but that does not belong to the a:active pseudo-class

22

Descendant Selector

• A selector that hold only within the content of certain element types is known as a descendant selector

• Text within a span that is part of ul should be displayed using a small-cap font form

• The selector applies to any span within content of any element belonging to class special

ul span { font-variant : small-caps }

.special span { letter-spacing : 1em }

23

At-Rules

• The at-rule that is widely used is @import

• This is used to input one style sheet file into another one

• This file reads in rules from the file “general-rules.css” before continuing with other rule in this style sheet

• url() represents a URL, which can be absolute or relative

@import url(‘general-rules.css’);h1, h2 { background-color : aqua }

24

Style Sheet Rules

• Cascading of style sheet rules (Style Rule Cascading)

• Element inheritance of style properties (Style Rule Inheritance)

25

Style Rule Cascading

• Both rules apply to element with id attribute value p3

• If multiple rules with same properties apply to an element, the all of declarations are applied to the element

• What happens if the below rule is added:

• Which rule would apply to the font-weight property of p3 ?

* { font-weight : bold }

#p1, #p3 { background-color : aqua }

#p3 { font-weight : normal }

26


• Origin of a declaration: (who wrote the declaration?)

– Author: declaration is part of an external or embedded style sheet or is part of the value specified for the style attribute of an element

– User agent: A browser or other user agent may define default style property values for HTML elements

– User: Most browsers allow users to provide a style sheet or to indicate style preferences that are treated as style rules

27


• Every author and user style declaration has one of two weight values: normal and important

• A declaration has important weight if it ends with “!important”

• This will give important weight to font-size property while the text-indent property will have normal weight

p { text-indent: 3cm ; font-size : larger !important }

28


• The priorities from height to low:

1. Important declaration with user origin

2. Important declaration with author origin

3. Normal declaration with author origin

4. Normal declaration with user origin

5. Any declaration with user agent origin

The reason that user declaration has higher priority is accessibility.

29


• To sort the tied declarations according to their specificity

• If a declaration is part of the style attribute of the element, then it is highest specificity

• If a declaration is part of a ruleset, then its specificity is determined by the selector(s) for the ruleset.

30


• Highest to lowest specificity are:

1. ID selectors

2. Class and pseudo-class selectors

3. Descendant and type selector (the more element type names, the more specific)

4. Universal selectors

31


• Even after this sorting process, two or more declarations may have equally high weight-origin and specificity

• The final step is then applied:

– If there is a declaration in the style attribute for element, then it is used

– Otherwise, all of style sheet rules are listed in a top-to-bottom reading of the document, with external and imported style sheets inserted at the point of the link element or @import rule

32


p { color : red }p { color : blue }p { color : green }p { color : yellow }

<title>StyleRuleOrder.html</title><style type="text/css">

p { color : red }</style><link rel="stylesheet“ type="text/css“ href="imp1.css" /><style type="text/css">

p { color : yellow }</style>

@import url(“imp2.css”);p { color : green }

imp1.css

p { color : blue }imp2.css

Then style rulesets are effectively in the order

<p>Hello world!</p>would then display in yellow.

33

Style Rule Cascading Summary

1. Select style sheet and insert rules for HTML attributes

2. Prioritize declarations by origin and weight

3. Break ties based on specificity (style attribute or most specific selector)

4. Break ties based on position within style sheet (last occurring wins

Alternate style sheets

34

Style Rule Inheritance

• Cascading is based on structure of style sheets

• Inheritance is based on the tree structure of the document itself.

• An element inherits a value for one of its properties by checking if its parent element in documents has a value for that property, if so, inheriting the parent’s value

• However, parent may inherit its property value from its parent, and so on.

35

HTML demonstrating Style Inheritance

<head> <title>style_inherit.html</title> <style type="text/css">

body { font-weight : bold } li { font-style : italic } p { font-size : larger } span { font-weight : normal }

</style> </head><body> <ul> <li>

List item outside and <span>inside</span> a span. <p> Embedded paragraph outside and <span>inside</span> a span. </p>

</li> </ul></body>

36

Rendering Style Inheritance

37

CSS Generic Font Families

Font Family Description

serif A serif is a short, decorative line at the end of a stroke of a letter. There are 3 serifs at the top of the W. Most glyphs in a serif font family will have serifs, and such a family is typically proportionately spaced (different glyphs occupy different widths).

sans-serif Usually proportionately spaced, but glyphs lack serifs, so they don’t look as fancy as serif fonts.

cursive Looks more like cursive handwriting than like printing.

fantasy Glyphs are still recognizable as characters, but are nontraditional.

monospace All glyphs have the same width. Since monospace fonts are often used in editors when programming, these font families are frequently used to display program code or other computer data.

38

CSS Length Unit Identifiers

Identifier Meaning

in Inch

cm Centimeter

mm Millimeter

pt Point: 1/72 inch

pc Pica: 12 points

px Pixel: typically 1/96 inch

em Em: reference font size

ex Ex: roughly the height of the lowercase “x” character in the reference font

39

Font Style Properties

Property Possible Values

font-style normal (initial value), italic, or oblique

font-weight bold or normal (initial value)

font-variant small-caps, which displays lowercase characters using uppercase glyphs (small uppercase glyphs if possible), or normal (initial value)

40

41

42

Date post:	18-Jan-2016
Category:	Documents
Upload:	rose-norman
View:	226 times
Download:	1 times

1 CSS (Cascading Style Sheet) English for ICT. 2 HTML vs. CSS HTML can be used to indicate both...

Documents