3-CSS

Cascading Style Sheets

Web Technology Introduction

Outlines

• Core concepts of CSS

• Controlling fonts

• Text format

• Box model• Box model

• Tables

2

Introduction

First example

3

First example

Introduction

• CSS: Cascading Style Sheets

• CSS is a style language for defining layout of

XHTML documents

– Separation of structure from presentation

– CSS covers fonts, colors, margins, lines, height,

width, background images, advanced positions

and many other things

4

Introduction

• CSS works by associating rules with elements

in documents

• Each rule has two parts

– Selector: indicates which elements the declaration

applies toapplies to

– Declaration: indicates how elements should be

styled

5

Adding CSS Rules to XHTML

• Inline style

• Embedded style

• External style

6

Inline Styles

Declare an individual element’s format

– Attribute style

– CSS property

• Followed by a colon and a value

7

Embedded Style Sheets

• Embed an entire CSS document in an XHTML

document’s head section

– Property background-color

• Specifies the background color

– Property font-family– Property font-family

• Specifies the name of the font to use

– Property font-size

• Specifies a 14-point font

8

External Style Sheets

• Style sheet can be stored in a separate file

9

Advantages of External Style Sheets

• Reuse

• Small source code

• Change the appearance of several pages by

altering just the style sheet rather than each altering just the style sheet rather than each

individual page

• Because the source document does not

contain the style rules, different style sheets

can be attached to the same document

10

Conflicting Styles

• author’s style > user’s style > browser’s style

• Children inherit parent’s style

• If a style is specified for the child => used

instead of parent’s style instead of parent’s style

11

Cascading

• The order

– inline

– embedded

– external

12

Type of Selectors

• Class selector

• ID selector

• Type selector

13

Class Selector

<p class="highlight">This paragraph has red text.</p>

<p class="default">This paragraph has dark gray text.</p>

<p class="default">This paragraph also has dark gray text.</p>

/* Define highlight class */

.highlight {

14

.highlight {

color:#F00;

}

/* Define default class */

.default {

color:#333;

}

ID Selector

<p id="highlight">This paragraph has red text.</p>

<p id="default">This paragraph has dark gray text.</p>

/* Define highlighted text */

#highlight {

15

#highlight {

color:#F00;

}

/* Define default text */

#default {

color:#333;

}

Type Selector

<p>This paragraph has red text.</p>

<p>This paragraph has red text.</p>

/* Define red text */

p{

16

p{

color:#F00;

}

Multiple external style sheets

HTML

CSS

CSS

CSS

17

<link rel="stylesheet“ type="text/css" href="css/one.css" />

<link rel="stylesheet“ type="text/css" href="css/two.css" />

<link rel="stylesheet“ type="text/css" href="css/three.css”/>

three.css has the highest priority

CSS

Imported Style Sheets

CSS

CSS

CSS

CSS

18

@import url("default.css");

@import url("layout.css");

@import url("navigation.css");

@import url("forms.css");

Which has the highest priority?

CSS

Grouping

/* Heading styles */

h1 {

font-family:Helvetica,Arial,sans-serif;

line-height:140%;

color:#333;

}

h2 {



h1, h2, h3 {

font-family:Helvetica,Arial,sans-

serif;

line-height:140%;

color:#333;

}

19


line-height:140%;

color:#333;

}

h3 {


line-height:140%;

color:#333;

}

Grouping


h1, h2, h3 {


line-height:140%;

color:#333;

}

20

}

/* Additionally, render all h1 headings in italics */

h1 {

font-style:italic;

}

Inheritance

/* Top-level heading */

h1 {

color:#333;

}

21

}

<h1>This is the greatest heading <em>in the world</em></h1>

<em> another heading </em>

Contextual Selectors/* Top-level heading */

h1 {

color:#333;

}

/* Make emphasized text shine brightly */

em {

color:#F00;

}


22

/* Top-level heading */

h1 {

color:#333;

}

h1 em {

color:#F00;

}


<em> another heading </em>

CSS Measurements

23

CSS Measurements

24

Colors

Color Color HEX Color RGB

#000000 rgb(0,0,0)

#FF0000 rgb(255,0,0)

#00FF00 rgb(0,255,0)

#0000FF rgb(0,0,255)

#FFFF00 rgb(255,255,0)

25

#00FFFF rgb(0,255,255)

#FF00FF rgb(255,0,255)

#C0C0C0 rgb(192,192,192)

#FFFFFF rgb(255,255,255)

Division

<div> tag divides a page into groups

<div>

<p>This is our content area.</p>

</div>

26

<div id="container">


</div>

Division

<div id="container">


</div>

27

/* Container holds all visible page elements */

#container {

padding: 20px;

border: 1px solid #000;

background: #CCC;

}

Controlling Fonts

28

Controlling Fonts

The font-family Property

<p class=”one”>Here is some text.</p>

<p class=”two”>Here is some text.</p>

<p class=”three”>Here is some text.</p>

29

.one {font-family:arial, verdana, sans-serif;}

.two {font-family:times, “times new roman”, serif;}

.three {font-family:courier, “courier new”, serif;}

Generic Fonts

30

Controlling Fonts

• Size: p {font-size: 12pt}

• Weight: p {font-weight: bold}

• Style: p {font-style: italic}

• Stretch: p {font-stretch: narrow}• Stretch: p {font-stretch: narrow}

31

Formatting Text

• color: color of text

• text-align: Specifies the alignment of the text within

its containing element; values = {left, right, center,

justify}

• vertical-align: Vertical alignment of text within • vertical-align: Vertical alignment of text within

containing element and in relation to containing

element; values={baseline, sub, super, top, etc.}

• text-decoration: Specifies whether the text should

be underlined, overlined, strikethrough, or blinking

text; values={overline, underline, line-through, blink}

32

Box Model

Every element is treated as a box in CSS

33

Box Model

Property Description

border Even if you cannot see it, every box has a border. This

separates the edge of the box from other boxes.

margin The margin is the distance between the edge of a box and

34

margin The margin is the distance between the edge of a box and

the box next to it.

padding This padding is the space between the content of the box

and its border.

Border Properties

• border-color

• border-style: none, solid, dotted, etc.

• border-width

• border-top/bottom/left/rightcolor/style/width• border-top/bottom/left/rightcolor/style/width

35

Borders

• border-style: none, dotted, dashed, solid,

double, groove, ridge, inset, and outset

#container {

width: 400px;

margin: 10px auto 10px auto;

36

margin: 10px auto 10px auto;

padding: 20px;

border-style: dashed dotted solid ridge;

}

Padding Properties

Padding is the distance between the edges

(borders) of an (X)HTML element and the

content within it, and can be applied to any

element.

37

#container {

padding-top: 20px;

padding-left: 10%;

padding-right: 1em;

padding-bottom: 0;

}

Margin Properties

The margin property is used to declare the

margin between an (X)HTML element and

those elements outside of it#container {

margin-top: 20px;

margin-left: auto;

38

margin-left: auto;

margin-right: auto;

margin-bottom: 1em;

}

#container {

margin: 20px auto 1em auto;

}

Dimensions

Property Purpose

height Sets the height of a box

width Sets the width of a box

line-height Sets the height of a line of text

39

max-height Sets a maximum height for a box

min-height Sets the minimum height for a box

max-width Sets the maximum width for a box

min-width Sets the minimum width for a box

The overflow Property

Value Purpose

hidden The overflowing content is hidden.

scroll The box is given scrollbars to allow users to

scroll to see the content.

40

scroll to see the content.

Pseudo-class

41

Pseudo-class

42

Background

43

Tables

• padding to set the amount of space between the border of a table cell and its content — this property is very important to make tables easier to read.

• border to set the properties of the border of a table.

• border to set the properties of the border of a table.

• text and font properties to change the appearance of anything written in the cell.

• text-align to align writing to the left, right, or center of a cell.

44

Tables

• vertical-align to align writing to the top, middle, or bottom of a cell.

• width to set the width of a table or cell.

• height to set the height of a cell (often used on a row as well).on a row as well).

• background-color to change the background color of a table or cell.

• background-image to add an image to the background of a table or cell.

45

3-CSS

Documents

Transcript of 3-CSS