Top Banner
CASCADING STYLE SHEETS (CSS)
45

CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Jul 06, 2020

Download

Documents

dariahiddleston
Welcome message from author
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
Page 1: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

CASCADING STYLE SHEETS (CSS)

Page 2: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Introducing CSS

A style sheet (CSS) is a set of declarationsdescribing the layout and appearance of adocument.

CSS enable you to specify link styles, fonts,margins, tables, colors, sizes, alignmentsand much more throughout your entire webpage.

When change to the CSS file, they willautomatically update all of the pages onyour web site.

Page 3: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Introducing CSS

You can apply styles to a Web site in threeways:

Inline styles

Embedded style sheet

External style sheet

Each approach has its own advantages anddisadvantages, you can combine three wayin developing your Web sites.

Page 4: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Inline Styles

An inline style is a style that is applieddirectly to an element through the use of thefollowing style attribute.

Ex:

<h1 style="text-align: center; color: red”>

Sunny Acres

</h1>

<tagName Style=”property1:value1;property2: value2;…”>

Content

</tagName>

Page 5: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Embedded Style Sheet

Embedded style sheet: applies to thecontent of entire web page.

The coding is placed between the <HEAD>and </HEAD> tags within your HTML page.

<head>

<style>

tagName {property1: value1; property2: value2 …}

</style>

</head>

Page 6: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Embedded Style Sheet

Ex:

<style type=“text/css”>

body {background-color:#ff0000;}

h1 {font-size: 36px; font-weight: bolder;

color: #F000AA;}

</style>

Page 7: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Embedded Style Sheet

You can apply that same style to severalelements by entering the elements in acomma separated list before the list of styleproperties.

Ex:

<style>

H1, h2{text-align: center; color: red}

</style>

Page 8: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

External Style Sheet

A external style sheet is a text file thatcontains style declarations. The file can thenbe linked to any all pages on the web site,allowing the same styles to be applied to theentire site.

The file name extension indicates thelanguage of the style sheet. The extensionfor CSS style sheets is .css.

Page 9: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

External Style Sheet

Style.css file

Ex:

Body{font-family: Arial; font-size:12px}

H1{font-family:Arial;font-size:16px;color:red}

P{font-weight: normal; color: blue}

tagName {property1: value1; property2: value2 …}

Page 10: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

External Style Sheet

Apply CSS file for HTML pages: Place a linkto your style.css file within HTML pagebetween <HEAD> and </HEAD> tags

Syntax:

<Head>

<Link Rel=StyleSheet Type=”text/css”Href=”StyleSheet file.css”>

</Head>

Page 11: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

External Style Sheet

You can link a single style sheet to multipledocument in your Web site

Ex:

<head>

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

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

</head>

You can also link a single document to severalstyle sheets.

Page 12: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

IDs and Classes

CSS ID: When you want to apply a style toa specific element, you can mark theelement with the id attribute.

To create a style for that marked element,apply the style declaration

#id {style rule}

id is the value of the element's idattribute

style rule stands for the styles applied tothat specific element.

Page 13: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

IDs and Classes

Ex:

<head>

<style>

#par { text-align: center; color: red }

</style>

</head>

Apply style to id element:

<p id=“par”>Content </p>

Page 14: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

IDs and Classes

CSS Class:

HTML require each id be unique value canonly be used once in a document.

You can mark a group of elements with acommon identifier using the classattribute.

Syntax:

.ClassName{property1:value1; property2: value2; …}

Page 15: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

IDs and Classes

Ex:

<head>

<style>

.clssname { text-align: center; color: red }

</style>

</head>

Apply style to elements:

<p class=“clssname”>Paragraph </p>

<h1 class=“clssname”>Heading1</h1>

Page 16: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Color in HTML and CSS

Defining Text and Background Colors

The style to define the background color is

background-color: color

The style to define the Text color is

Color: color

Ex:

H1{background-color: red; color: #FFAA5C}

Page 17: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Fonts and Text Styles

font-family :[ arial, verdana, sans-serif];

font-style : [italic, normal, oblique ]

font-variant : [normal, small-caps]

font-weight : [normal, bold]

font-size : [?pt, ?em,?%, ?px]

font [font-style | font-variant | font-weight |font-size | font-family] :

Page 18: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Fonts and Text Styles

text-indent:[px]

text-align:[left,right,center,justify]

text-decoration:[underline,overline,line-through]

letter-spacing :[px]

text-transform:[capitalize,uppercase,lowercase, none]

Page 19: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Fonts and Text Styles

Combining all text formatting in a singlestyle:

EX:

font: italic small-caps bold 16pt/24pt Arial,sans-serif

{font: font-style font-variant font-weight font-

size/line-height font-family}

Page 20: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Background Images

Background image:

background-image: url(ur1)

EX:

Style=“background- image:url(background.jpg)”

Background image option:

background-repeat: no-repeat;

background-repeat: repeat-x;

background-repeat: repeat-y;

background-repeat: repeat;

Page 21: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

background

Background Images

Page 22: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Background Images

background-position:[value of points]

Page 23: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Style for Links

States of hyperlinks

a:link

a:visited

a:active

a:hover

EX: <style type="text/css">A:link {text-decoration: none}A:visited {text-decoration: none}A:active {text-decoration: none}A:hover {font-size:24; color:red;}</style>

Page 24: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Styles for bullets

Styles for bullets:

List-style:circle

List-style: disc List-style: square List-style: decimal List-style: lower-alpha List-style: upper-alpha List-style: upper-roman List-style: lower-roman

list-style-image: url (images/bullet.gif)}

Page 25: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Floating an Element

Floating an element causes the element tomove out of the normal document flow onthe page, moving to a position along the leftor right margins of the parent element.

The other elements on the Web page thatare not floated are then moved up to occupythe position previously occupied by thefloating element.

Page 26: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Floating an Element

Page 27: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Floating an Element

Syntax:

float: position

Where position is:

None (default to turn off floating)

Left/Right

You can also stack floating elements tocreate a column effect in page layout.

Page 28: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Floating an Element

Page 29: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Floating an Element

If you want to prevent an object fromwrapping around a floating element.

To prevent an element from wrapping, applythe clear style

Syntax: clear: position

position is none (the default), left, right,or both.

The element not to be displayed until theright margin of the parent element isfloating objects

Page 30: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Floating an Element

Page 31: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Working with the Box Model

The box model describes the structure ofpage elements as they are laid out on theWeb page, each element is composed of thefour sections

The margin between the element andother page content.

The border of the box containing theelement content

Page 32: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Working with the Box Model

The padding between the element'scontent and the box border

The content of the element itself

Page 33: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Styles for Margin and Padding

Styles Margin : The margin clears an areaaround an element. It includes top, right,bottom, and left margin which can bechanged independently using separateproperties.

Page 34: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Styles for Margin and Padding

The padding clears an area around thecontent of an element. It includes top, right,bottom, and left margin which can bechanged independently using separateproperties.

Page 35: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Styles for Margin and Padding

Page 36: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Styles for Border

border-width : [value];

border-color : [value of color]

Page 37: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Styles for Border

border-style :[value]

border :[width style color ]

Page 38: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Width and Height Styles

Page 39: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Styles for position of elements

Ex:

h1 {border-width: thick; border-style: dotted;

border-color: gold; }

h2 {border-width: 20px; border-style: outset;

border-color: red; }

p {border-width: 1px; border-style: dashed;

border-color: blue; }

ul {border-width: thin; border-style: solid;

border-color: orange; }

Page 40: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Styles for position of elements

position:[absolute,relative];

top: [value];

left: [value];

bottom: [value];

right: [value];

Page 41: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Styles for position of elements

EX:

#box1 { position:absolute; top: 50px; left: 50px; }

#box2 { position:absolute; top: 50px; right: 50px; }

#box3 { position:absolute; bottom:50px; right: 50px; }

#box4 { position:absolute; bottom:50px;left:50px; }

Page 42: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Styles for position of elements

Page 43: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Color Table of HTML and CSS

The principle of color:

Any color is combined by three maincolor: red, green and blue.

Page 44: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Color Table of HTML and CSS

Use hex #rrggbb

rr: red

gg : green

bb : blue

White RGB=(255,255,255)=#FFFFFF

Black RGB=(0,0,0)=#000000

Yellow RGB=(255,255,0)= #FFFF00

Red RGB=(255,0,0)=#FF0000

Blue RGB=(0,0,255)=#0000FF

Page 45: CASCADING STYLE SHEETS (CSS) - xuanhien.files.wordpress.com · CASCADING STYLE SHEETS (CSS) Introducing CSS A style sheet (CSS) is a set of declarations describing the layout and

Color Table of HTML and CSS