7/27/2019 1 - Css

1/17

7/27/2019 1 - Css

2/17

CSS CSS stands for Cascading StyleSheets Styles define how to display HTMLelements

Styles were added to HTML 4.0 tosolve a problem

External Style Sheets can save a lotof work

External Style Sheets are stored inCSS files

7/27/2019 1 - Css

3/17

Syntax & Example

The CSS syntax is made up ofthree parts: a selector, aproperty and a value

selector {property:value} Eg:

body {color:black}

p {font-family:"sans serif"}

p {text-align:center;color:red}p

{

text-align:center;

color:black;

font-family:arial

}

7/27/2019 1 - Css

4/17

Grouping:h1,h2,h3,h4,h5,h6

{

color:green}

class Selector:

p.right {text-align:right}

p.center {text-align:center} (or)

.center {text-align:center}

HTML Document:

This is right-aligned.

This is center-aligned.

id Selector:

#green {color:green}

7/27/2019 1 - Css

5/17

p#para1{

text-align:center;

color:red

}

CSS Comments:

/*This is a comment*/p{

text-align:center;

/*This is another comment*/

color:black;

font-family:arial

}

7/27/2019 1 - Css

6/17

Types of CSS

External style sheet An external style sheet is ideal when the

style is applied to many pages. With an

external style sheet, we can change the

look of an entire Web site by changing one

file.

Internal style sheet An internal style sheet should be used

when a single document has a unique

style. We define internal styles in the head

section of an HTML page, by using the tag

Inline style To use inline styles we use the style

attribute in the relevant tag.

7/27/2019 1 - Css

7/17

Cascading order

Browser defaultLast priority

External style sheet

Third priority Inline style (inside an HTML

element)

Second priority Internal style sheet (in the head

section)

Highest priority

7/27/2019 1 - Css

8/17

CSS Background body {background-color:#b0c4de}

body {background-image:url(xxxx.gif')}

body

{

background-image:url(xxxx.gif');

background-attachment:fixed;

background-repeat:repeat-x;

background-repeat:no-repeat;

background-position:top right;

}

body {background:#ffffff url(xxxx.gif')

no-repeat top right}

7/27/2019 1 - Css

9/17

Property Description Values

background Sets all the background

properties in one declaration

background-color

background-image

background-repeat background-

attachment background-position

Inherit

background-

attachment

Sets whether a background

image is fixed or scrolls with

the rest of the page

scroll

fixed

inherit

background-color Sets the background color ofan element

color-rgb,color-hex,color-nametransparent,inherit

background-image Sets the background image for

an element

url(URL), none, inherit

background-

position

Sets the starting position of a

background image

top left,top center,top right,

center left,center center,center right

bottom left,bottom center

bottom right,x% y%,xpos ypos,inherit

background-repeat Sets if/how a background

image will be repeated

Repeat,repeat-x,repeat-y,no-repeat

inherit

7/27/2019 1 - Css

10/17

CSS Text

7/27/2019 1 - Css

11/17

CSS Font

Font Families:Generic family Font family Description

Serif Times New Roman Serif fonts have small

Georgia lines at the ends on some

characters

Sans-serif Arial "Sans" means without -

Verdana these fonts do not have

the lines at the ends of characters

Monospace Courier New All monospace

Lucida Console characters has the same

width

p{font-family:"Times New Roman",Georgia,Serif}

Font Style & Size:p.normal {font-style:normal}

p.italic {font-style:italic}

p.oblique {font-style:oblique}

h2 {font-size:30px}

7/27/2019 1 - Css

12/17

The CSS Box Model

All HTML elements can be considered asboxes.

In CSS, the term "box model" is used whentalking about design and layout.

The CSS box model is essentially a box thatwraps around HTML elements, and itconsists of:

Margins

borders

padding

content

The box model allows us to place a borderaround elements and space elements in

relation to other elements.

7/27/2019 1 - Css

13/17

The above picture shows the box model.

Margin - Clears an area around the border. The margin does not have

a background color, and it is completely transparent

Border - A border that lies around the padding and content. The

border is affected by the background color of the box

Padding - Clears an area around the content. The padding is affected

by the background color of the box

Content - The content of the box, where text and images appear

7/27/2019 1 - Css

14/17

CSS Border /Outline

border-style:value;

border-width:value; border-color:value;

BORDER-STYLE values: none

dotted

dashed

solid

double

grove

ridge

inset

outsetNote: The border-style property can have from one to four values.

7/27/2019 1 - Css

15/17

p.one{border-style:solid;border-color:#0000ff;}p.two{border-style:dotted;border-color:#ff0000 #0000ff;}p.three{border-style:ridge;border-color:#ff0000 #00ff00 #0000ff;}p.four{border-style:inset;border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);}

One-colored border!

Two-colored border!

Three-colored border!

Four-colored border!

Note: The "border-color" property does not work if it is used alone. Use the"border-style" property to set the borders first.

7/27/2019 1 - Css

16/17

CSS Padding padding-top:25px;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;

CSS List

list-style-position:inside list-style-position:outside

7/27/2019 1 - Css

17/17

CSS TablesProperty Description Values

border-collapse Specifies whether or

not table borders

should be collapsed

collapse

separate

inherit

border-spacing Specifies the distance

between the borders

of adjacent cells

length length

inherit

caption-side Specifies the

placement of a table

caption

top

bottom

inherit

empty-cells Specifies whether or

not to display borders

and background on

empty cells in a table

show

hide

inherit

table-layout Sets the layout

algorithm to be used

for a table

auto

fixed

inherit