book-css BBU

8/12/2019 book-css BBU

1/27

CSSWeb Development

ITEC Bayon Hosting


2/27

Module 1: Introduction to Cascading Style Sheets

CSSInternal CSS

CSS File HTML

style tagSyntax:

Css_statements;

style attributetagSyntax:

External CSS

CSS File HTML File CSS File

link tagSyntax

@import style tagSyntax

@import url(css_path);


3/27

Module 2: CSS Basic

CSSComments

statements Comments Interpreter

Syntax

/* This is my first css_statementThat wrote to create stylesheetsFor my web page*/

Styletag tagelement tag

tag {}Syntax:

Tag_Name{Css_statement

}

element tag

H1{color:red;text-align:center;

}..

.WelcomeHeading 2To My Site


4/27

Classclass () style element style

class open tag element attribute classvalue class

class (.) class {}Syntax:

.class_Name{Css_statement

}

class Font Khmer OS 20px Font Time New

Roman 14px

.khmer{font-family:Khmer OS;font-size:20px;

}.english{

font-family:Time New Roman;font-size:14px;

}

Web Page

Browser Unicode attributecontentmetatag

idelement id element # id {}

Syntax#element_id{


5/27

Css_statements}

#khmer_content{Background:#CCCCCC;Font-family:Khmer OS System;Font-size:14px;

}

Comments statements Comments Interpreter

tag, class, id (,)

. H1,H2{}.khmerTop,.khmerBottom{}#box1,#box2{}

Inheritance ()Inheritance tag tag

tag tag Syntax

tag1Name ag2Name{css_statement

}...


6/27

div p{

font-size:16px;color:blue;

}span p{

font-size:18px;color:red;

}p{

font-size:20px;color:Green;

}

Welcome

Welcome

Welcome

Welcome

Welcome

Welcome

Inheritance id tag tag

style idelement inheritance styletag Syntax:

#element_id tagName{Css_statement;

}...

#borderBox p{border:solid 1px;color:blue;

}#greyBox p{


7/27

background:#CCCCCC;}

Welcome

Welcome

Welcome

Welcome

Inheritance class tag.className tagName

Inheritance id tag style tag element class Syntax:

.className tagName{Css_statements

}...

tagName.className

class tag Syntax:

tagName.className{css_statement

}

div.redText{

color:red;font-size:20px;

}span.redText{

color:red;font-size:12px;

}


8/27

WelcomeWelcome

WelcomeWelcome

Formatting

Universal Resource LocationSyntax:

url(http://www.example.com/style/banner.css);

@import url(http://www.style.com/style/box.css);Body{

Background:url(https://reader010.{domain}/reader010/html5/0616/5b242f93a}

Body{Background:url(../images/my Image.jpg);

}

Color

RGB Format

Syntax:rgb(red,green,blue)

red, blue, green

Hexa Format

Syntax:#rrggbb

rr,gg,bb 00-FF

Name Format

Syntax:colorName

blue, red, black, white, gray, green, purple, pink

Link Behavior

a:link
http://www.example.com/style/banner.csshttp://www.example.com/style/banner.csshttp://www.example.com/style/banner.css


9/27

a:visited

a:active

window link

a:hovermouse

Syntaxa:link{

color:green;textdecoration=none;

}a:visited{

color:red;textdecoration=none;

}

a:active{color:blue;textdecoration=none;

}a:hover{

color:black;textdecoration=overline;

}

Descending a.footer:link{color:blue}a.header:link{color:red}

#leftBlock a:link{color:green}


10/27

Applied CSS

Formatting Text

font-family:

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

Arial, Helvetica, sans-serif "Times New Roman", Times, serif "Courier New", Courier, monospace Georgia, "Times New Roman", Times, serif Verdana, Arial, Helvetica, sans-serif Geneva, Arial, Helvetica, sans-serif

Tahoma, "Lucida Grande", Arial, sans-serif "Lucida Console", Monaco, monospace

"Marker Felt", "Comic Sans MS", fantasy "Century Gothic", "Gill Sans", Arial, sans-serif

color:

color:#F1F1F1;color:rgb(241,241,241);color:gray;

font-size:

font-size:[16px|1em|100%|...];

16px, 1em, 100%font-style:

font-style: [italic|oblique|normal];

italic oblique normal

font-weight:


12/27

text-indent:

text-indent:[#px|#em];

tag p tag

tagName:first-letter

p:first-letter{declaration;

}

tag

tagName:first-line

p:first-line{declaration;

}

tag

Styling List

list-style-type:

list-style-type:[..|none]];

,, tag List style


13/27

list-style-position:

list-style-position:[inside|outside];

style list

Remove indent of list item

padding-left:0px;

margin-left:0px;list item

list-style-image:

list-style-image:url(images/bullet.jpg);

style

Margins, Padding, and Borders

Understanding the Box Model

Box properties Padding : content border content


14/27

Border: box

Background-color: border padding Margin: tag tag

p tag


15/27

Define margin and padding

All Edge

margin:#px|#em|#%;padding: #px|#em|#%;

Specified Edgemargin-left:#px|#em|#%;margin-right:#px|#em|#%;margin-top: #px|#em|#%;margin-bottom:#px|#em|#%;

padding-left:#px|#em|#%;padding-right:#px|#em|#%;padding-top: #px|#em|#%;padding-bottom:#px|#em|#%;

Shorthandmargin: top right bottom left; //TRouBLepadding: top right bottom left;

margin: 0 10px 10px 20px;padding: 10px 0 10px 0;

Display with inline and block-level block

tag HTML boxbox 2 inline block box

block box p, div, table, ul, ol, li inline box tag

inline box tag , , , tag padding, margin line-height

box display CSS

display:

display:[inline|block|none]

Defining Border

Border style style


16/27

border:

border: color width style;border: #AABB44 1px solid;

Each Border Edge:

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

Each Border Porperty

border-width: width;border-color: color;border-style: style;

Each Border Edge and Property

border-left-color: color;border-top-style: style;...

background-color:

background-color: color;

box

overflow:

overflow: visible|scroll|auto|hidden;


17/27

IE browser boxoverflow

visible scroll

scrollbar

auto scroll scrollbar hidden

Wrap Content with Floating Elements

float:

float: left|right|none;

left :

Element

element right : Element

element none :

Background, Border with float Problem

style box float

Element

background border style element background, border overflow:hidden

body{font-family:Georgia, "Times New Roman", Times, serif;

}h1{

background-color:#CCCCCC;border:1px solid;

overflow:hidden;}h2{

margin-bottom:0px;border-bottom:2px dashed;color:#FF9933;overflow:hidden;

zoom:1;//IE 5 6 IE 7 }p{

margin-top:0;}


18/27

#sidebar{background:rgb(227,108,10);border:#CC3300;float:right;width:250px;padding:20px;margin:20px;

}

* html #sidebar{ display:inline;} //IE 5 6


19/27

clear:

clear: left|right|both|none;

element wrap element floatelement element float

left

element

float

element right float

right element float element left float both element float none element float

Adding Graphics to Web Page

background-image:

background-image: url(image/bg.jpg);

background tag

background-repeat:

background-repeat: repeat|repeat-x|repeat-y|no-repeat;

repeat background image

background-position:

background-position: [left|center|right|#px|%] [bottom|center|top|#px|%];

background image

html { height: 100%; }

firefox browser body page

background-attachment:

background-attachment: scroll|fixed;

fixed:background-image scrollscroll: background-image scroll

background:

background: url() #FFF center center fixed ;

property background


20/27

Navigation Technique

Requirement

Link ,, tag link navigation option Vertical

Navigation, Horizontal NavigationVertical Navigation Sample

Preloading Techniques

Pixy Techniques

preloading-rollover

normal state, rollover state state style link (20px) a{ background: url(state.jpg) 0px 0px;

a:hover{ background: url(state.jpg) opx -20px;

Using Hidden Loading

download client

page

div tag

load visibility:hidden, position:absolute

Sliding Door Technique

HTML link li style sheet background li li{ background: url(btn_right.png) right top;

a a{ background: url(btn_left.png) left top;


21/27

Formatting Table and Form

border-collapse:

border-collapse: collapse|separate;

border

table


22/27

CSS Page Layout

CSS Page Layout absolute positioning floatAbsolute Positioning element

Page

pixel

Type of Web Page Layout

Fixed Width

Page browser Page

Screen 800x600 Page 760px

scroll bar

Browser

Screen 1024x768 950px

Liquid

browser browser

Elastic

page em

user

browser

container


23/27


24/27


25/27

Step to Create Page Layout

1. Page Content wrapper container cotent pagebanner, column, footer

2. wrapper

style wrapper 3. column tag id class attribute:4. Float divs column

left sidebar main content div float left, div div leftsidebar float left main content float rightright side bar float right.

5. width column


26/27


27/27

6. left marginmain column7. left margin left_sidebar : -587px;

book-css BBU

Documents

Transcript of book-css BBU