CASCADING STYLE SHEETS CSS · INTRODUCTION CSE The Benefits of Using Cascading Style Sheets CSS will save you a great deal of time. You can make changes to the CSS file, they will

CSE

CASCADING STYLE SHEETS

CSS Faculty of Computer Science and Engineering

CSE

INTRODUCTION

Cascading Style Sheets enable you to control

the style and layout of a web page. They will

enable you to specify link styles, fonts, margins,

tables, colors, sizes, alignments and much more

throughout your entire web page.

They can also be used to create a template like

style sheet (stored within a separate file) that

can be used throughout your web site. You can

simply link to your style sheet within each of your

web pages and have the ability to update the

styles for your entire web site with just one file.

CSE

INTRODUCTION

The Benefits of Using Cascading Style Sheets

CSS will save you a great deal of time.

You can make changes to the CSS file, they

will automatically update all of the pages on

your web site.

CSE

CREATING CSS

Inline CSS [Inline style]:

Added to your standard HTML tags.

Embedded CSS [Internal style]:

An embedded CSS is exactly as it sounds.

The CSS code is actually placed within the

HTML web page between the <HEAD> and

</HEAD> tags.

Linked CSS [External style]:

A linked style sheet, on the other hand, is a

completely separate document that is linked

to within a web page.

CSE

CREATING CSS

Inline CSS: used within HTML tag using the

STYLE property.

<tagName Style=”property1:value1;property2:

value2;…”>

Content

</tagName>

CSE

CREATING CSS

Ex:

<body style="background-color: #FF0000">

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

<p style = “color:aqua ; font- style:italic, text-

align:center”>

<A HREF="http://www.tuoitre.com.vn"

STYLE="TEXT-DECORATION: NONE">

Tuoi tre

</A>

{remove the underline of individual link}

CSE

CREATING CSS

Embedded CSS:

Performs the same tasks as the inline style

tags. However, the coding is placed between

the <HEAD> and </HEAD> tags within your

HTML page. You can specify how your entire

page will appear including links, fonts, text

and more, simply by using embedded style

tags.

CSE

CREATING CSS

<head>

<style>

tagName {property1: value 1; property2: value 2

…}

</style>

</head>

Exp:

<style type=“text/css”>

Body{background-color:#ff0000;}

</style>

CSE

CREATING CSS

<HTML>

<HEAD>

<STYLE TYPE=”text/css”>

H1,H2 { color: #8B008B ; font-family: Arial }

body {background-color: #ADFF2F;}

</STYLE></HEAD>

<BODY>

<H1>This is the H1 element</H1>

<H2>This is the H2 element</H2>

<H3>This is the H3 element with its default style as

displayed in the browser</H3>

</BODY></HTML>

CSE

CREATING CSS

Linked CSS: creating a file that defines specific

styles. This CSS file can be used throughout

your entire web site to specify everything from

body styles and headings to paragraphs and

HTML tables.

Creating a Linked CSS:

Create a file in Notepad with all of attributes

which want to format

Save this file with extension .css

CSE

CREATING CSS

Style.css file

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

H1{font-family:Georgia; font-size:16px; font-weight:

bold; color: blue}

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

CSE

CREATING CSS

Apply .css file for HTML pages.

Place a link to your style.css file within HTML

page between <HEAD> and </HEAD> tags

Syntax:

<Head>

<Link Rel=StyleSheet Type=”text/css”

Href=”StyleSheet file.css”>

</Head>

CSE

CREATING CSS

Example:

CSE Apply a style for many HTML pages

<head>

<link rel="stylesheet" type="text/css"

href="styles.css" />

</head>

CSE Apply a lot of style sheets for a HTML page

<head>


href="styles.css" />


href="styles2.css" />

</head>

CSE

CSS Classes and ID's

Classes and ID's are used much the same way

in CSS.

Classes are often used to identify groups of

selectors, while ID's are used to identify one

selector or element.

Class is used for plain HTML documents, while

ID's are usually used for documents that contain

JavaScript or Dynamic HTML (DHTML).

CSE


A class is created, as explained above, with the

use of a period and a codeword for the class.

A ID is specify “#” symbol

An class is specified in “.” symbol.

Classes or ID's can be used a lot of HTML tags

such as <i></i>, <u></ul> and <p></p> and

many others.

Define tables by using classes and ID's in CSS.

CSE

Style.css

CSE


CSE


CSE


CSE Styles for Colors and backgrounds

color : [value of color]

background-color : [value of color]

background-image : url([ file name])

background-repeat : [types for repeat]


background-position:[value of points]


background

CSE

Style for Font

font-family :[ arial, verdana, sans-serif]; {tên font}

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] :

CSE

Style for Text

text-indent:[khoảng cách text (px)]

text-align:[left,right,center,justify(canh lề)]

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

letter-spacing :[px]

text-transform :[capitalize, uppercase,

lowercase, none]

CSE

Style for Links

States of hyperlinks

a:link

a:visited

a:active

a:hover

<style type="text/css">

A:link {text-decoration: none}

A:visited {text-decoration: none}

A:active {text-decoration: none}

A:hover {font-size:24; font-weight:bold; color:

red;}</style>

CSE

Styles for bullets

Styles for bullets:

List-style:circle chấm tròn rổng

List-style: disc chấm tròn đen

List-style: square chấm đen vuông

List-style: decimal đánh số ả rập

List-style: lower-alpha thứ tự alpha

List-style: upper-alpha thứ tự alpha chữ in

hoa

List-style: upper-roman số la mã hoa

List-style: lower-roman số la mã thường

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

CSE

Styles for Margin and Padding

Styles Margin and Padding: The margin clears

an area around an element (outside the border).

It includes top, right, bottom, and left margin

which can be changed independently using

separate properties.

CSE

Styles for Margin and Padding

The padding clears an area around the content

(inside the border) of an element. It includes top,

right, bottom, and left margin which can be

changed independently using separate

properties.

CSE

Styles for Border

border-width : [value];

border-color : [value of color]

CSE

Styles for Border

border-style :[value]

border :[width style color ]

CSE

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; }

CSE

Styles for position of elements

position:[absolute,relative];

top: [value];

left: [value];

bottom: [value];

right: [value];

CSE


#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; }

CSE


CSE

Color Table of HTML and CSS

The principle of color:

Any color is combined by three main color:

red, green and blue.

CSE


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

CSE


Documents

CASCADING STYLE SHEETS CSS · INTRODUCTION CSE The Benefits of Using Cascading Style Sheets CSS will save you a great deal of time. You can make changes to the CSS file, they will