cascading style sheets css

1

CHAPTER 3

Cascading Style SheetsCSS

2

Outline

Basic CSSLevels of Style SheetsSelectors FormsProperties & Property Values:

Font Color

Page Layout Styling Page Sections Introduction to Layout Floating Elements Sizing and Positioning Ch#6, Sec#2

Conflict Resolution

3

CSS

The CSS1 specification was developed in 1996CSS2 was released in 1998CSS3 is on its way Describe the appearance, layout, and presentation

of information on a web page (as opposed to HTML, which describes the content of the page).

Describe howinformation is to be displayed, not whatis being displayed.

Style sheets allow you to impose a standard style on a whole document, or even a whole collection of documents

4

h1 { color : #333; font-size : large;}

Property

Value

Declaration Deceleration Block

RuleSelector

CSS Syntax & Terminology

Note: the punctuation: The property is followed by a colon (:) and the value is followed by a semicolon(;)

5

Comments in CSS /* ... */

The // single-line comment style is NOT supported in CSS

The HTML comment style is also NOT supported in CSS 

/* This is a comment. It can span many lines in the CSS file. */p{ color: red; background-color: aqua; }

6

Levels of style Sheets


Font Color


Conflict Resolution

7

Levels of Style Sheets

Inline style sheets appear in the tag itselfDocument-level style sheets appear in the

head of the documentExternal style sheets are in separate files,

potentially on any server on the Internet Written as text files with the MIME type text/css

8

Inline Style

Style sheet appears as the value of the style attribute

General form:style = "property_1: value_1; property_2: value_2;…property_n:value_n"

E.g.:<p style="color: blue;"> This is a paragraph </p>

9

Document Level

General form:<style type = "text/css"> /*

rule list */</style>

The <style> tag must include the type attribute, set to "text/css".

10

External Styles 1-2

A <link> tag is used to specify that the browser is to fetch and use an external style sheet file

Syntax: <link rel="stylesheet" type="text/css" href="filename" />

E.g.<link rel = "stylesheet" type = "text/css"href = http://www.wherever.org/termpaper.css />

11

Selector Forms


Font Color


Conflict Resolution

12

1. Simple Selector

• The selector is a tag name ora list of tag names, separated by commas• p { color: blue; } • h1, h2, h3, h4 { font-style: italic; } /*(grouping)*/

13

2. Class Selectors

A style class has a name, which is attached to a tag name p.narrow {property/value list} p.wide {property/value list}

• The class you want on a particular occurrence of a tag is specified with the class attribute of the tag

For example,<p class = "narrow">... </p>...<p class = "wide">...</p>

14

3. Generic Class Selectors

• A generic class can be defined if you want a style to apply to more than one kind of tag

• A generic class must be named, and the name must begin with a period

Example,.really-big { … }

Use it as if it were a normal style class<h1 class = "really-big"> … </h1>...<p class = "really-big"> … </p>

15

4. Id Selectors

An id selector allow the application of a style to one specific element

General form:#specific-id {property-value list}

Example:#section14 {font-size: 20}…<p id = "section14"> … </p>

16

5. Pseudo ClassesPseudo classes are styles that apply when

something happens, rather than because the target element simply exists

Names begin with colonshover classes apply when the mouse cursor is

over the element

17

5. Pseudo Classes

Class Description :hover an element that has the mouse over it.

:link a link that has not been visited.

:visited a link that has already been visited.

Example:a:link{ color: green; } /* unvisited link */a:visited { color: pink; } /* visited link */a:hover { color: red; } /* mouse over link */….<p><a href="http://www.ksu.edu.sa" > KSU </a></p>

18

Properties & Properties Values


Font Color

Page Layout Styling Page Sections Introduction to Layout Floating Elements Sizing and Positioning

Conflict Resolution

19

Font Properties

font-family Value is a list of font names - browser uses the first in the list it

has font-family: Arial, Helvetica, Courier If a font name has more than one word, it should be single-quoted

font-style italic, normal

font-weight- degrees of boldness bolder, lighter, bold, normal

Could specify as a multiple of 100 (100 – 900) Font shorthands

For specifying a list of font propertiesfont: bolder 14pt Arial Helvetica Order must be: style, weight, size, font name(s)

20

Font Properties

<style type = “text/css”>p {font-family: Georgia}h2 {font-family: “Courier New”}</style> …<p> This paragraph uses the first style above.</p><h2> This h2 uses the second style above.</h2>

21

Font Size

• Font Size- E.g. Font-size: 10pt

Units: 16px, 16pt, 1.16em Vague font sizes: xx-small, x-small, small, medium, large, x-large, xx-large, smaller,larger

Percentage font sizes, e.g.: 90%, 120% pt specifies number of point, where a point is 1/72 of an inch onscreen px specifies a number of pixels on the screen em specifies number of m-widths, where 1 em is equal to the font's

current size

22

Alignment of Text

The text-indent property allows indentation Takes either a length or a % value

The text-align property has the possible values, left (the default), center, right, or justify

23

Properties & property Values: Color


Font Color


Conflict Resolution

24

Colors

The color property specifies the foreground color of elements

Property Values: color names: aqua, black, blue, fuchsia, gray, green, lime,

maroon, navy, olive, purple, red, silver, teal, white, yellow RGB codes: red, green, and blue values from 0 (none) to

255 (full) hex codes: RGB values in base-16 from 00 (0, none) to FF

(255, full) Property values are inherited by all nested tagsThe background-color property specifies the

background color of elements

25

Colors

<style type = “text/css”>p {color: red;}h2 {color: rgb(128, 0, 196); }h4 {color: #FF8800;}</style> …<p> This paragraph uses the first style above.</p><h2> This h2 uses the second style above.</h2><h4> This h4 uses the third style above. </h4>

26

Styling Page Sections


Font Color


Conflict Resolution

27

Motivation for page sections

want to be able to style individual elements, groups of elements, sections of text or of the page

want to create complex page layouts http://

www.cssbeauty.com/

28

Introduction to Layout


Font Color


Conflict Resolution

29

CSS Box Model

For layout purposes, every element is composed of: The actual element's content A border around the element Padding between the content

and the border (inside) A margin between the border

and other content (outside)

30

Borders

h2 { border: 5px solid red; }...<h2> This is a heading.</h2>

Property Descriptionborder thickness/style/color of border on all 4

sides

31

More border properties

Property Description border-color, border-width, border-style

Specific properties of border on all 4 sides

border-bottom, border-left, border-right, border-top

All propertiesof border on a particular side

border-bottom-color, border-bottom-style, border-bottom-width, border-left-color, border-left-style, border-left-width, border-right-color, border-right-style, border-right-width, border-top-color, border-top-style, border-top-width

properties of border on a particular side

Complete list of properties

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

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

32

Border Example

h2 {border-left: thick dotted #CC0088; border-bottom-color: rgb(0, 128, 128); border-bottom-style: double;}

…<h2>This is a heading.</h2>

• Each side's border properties can be set individually.• If you omit some properties, they receive default values (e.g. border-bottom-width above)

33

Padding

Property Descriptionpadding padding on all 4 sidespadding-right padding on right side onlypadding-left padding on left side onlypadding-bottom padding on bottom side onlypadding-top padding on top side onlyComplete list of padding properties

34

Padding Example

p{padding: 20px; border: 3px solid black;}h2 {padding: 0px; background-color: yellow;}…<p>This is the first paragraph </p><p>This is the second paragraph </p><h2> This is a heading.</h2>

35

Margin

Property Descriptionmargin margin on all 4 sidesmargin-right margin on right side onlymargin-left margin on left side onlymargin-bottom margin on bottom side onlymargin-top margin on top side onlyComplete list of margin properties

36

Margin Example

p {margin: 50px; background-color: #FFAAFF;}…<p>This is the first paragraph </p><p>This is the second paragraph </p>

37

Floating Elements


Font Color


Conflict Resolution

38

Floating Elements

Property Descriptionfloat Removed from normal document

flow; underlying text wraps around as necessary. Possible values: left, right, or none (default)

img {float:right;} …<img src=”f.jpg" /><p> First paragraph - First paragraph – First ..</p>

39

Floating Elements Diagram

40

Clear property

Property Descriptionclear disallows any floating elements

from overlapping this element . Possible values: left, right, both or none (default)

img {float:right;} …<img src=”f.jpg" /><p> First paragraph - First paragraph – First ..</p><p style="clear:both;"> Second paragraph </p>

41

Clear Property Diagram

div#sidebar { float: right; }p{ clear: right; }

42

Sizing & Positioning


Font Color


Conflict Resolution

43

Sizing & Positioning

Property Value DescriptionPosition static default position

relative offset from its normal static positionabsolute a fixed position within its containing

element fixed a fixed position within the browser

window Right, left, top, bottom

positions of box's corners

div#ad {position: fixed;right: 10%;top: 50%; }…<div id=“ad”> I’m here </div>

44

Static and Relative Positioning

In static position mode, the default, elements are placed left to right, top to bottom The top and left properties are ignored for

static positioningRelative position mode allows changing

position relative to where the element would be with static positioning

This could be used to create superscripts or subscripts by moving text up or down relative to its normal position

45

Relative Positioning

<body style = "font-family: Times; font-size: 24pt;"><p>Apples are <span style ="position: relative; top: 10px; font-family: Times; font-size: 48pt;font-style: italic; color: red;">

GOOD </span> for you.</p></body>============================================<body style = "font-family: Times; font-size: 24pt;"><p>Apples are <span style ="position: relative; font-family: Times; font-size: 48pt;font-style: italic; color: red;">

GOOD </span> for you.</p></body>

46

Absolute Positioning

Removed from normal flow (like floating ones)

Positioned relative to the block element containing them (assuming that block also uses absolute or relative positioning)

Actual position determined by top, bottom, left, right values should often specify a width property as well

#menubar { position: absolute; left: 400px; top: 50px;}

47

Fixed Positioning

removed from normal flowpositioned relative to the browser window

even when the user scrolls the window, element will remain in the same place.

48

Alignment vs. float vs. position

1. If possible, lay out an element by aligning its content

horizontal alignment: text-align: set this on a block element; it aligns the content within it (not

the block elementitself) vertical alignment: vertical-align:

set this on an inline element, and it aligns it vertically within its containing element

2. if alignment won't work, try floating the element3. if floating won't work, try positioning the element

absolute/fixed positioning are a last resort and should not be overused.

cascading style sheets css

Documents