Css styles 2

8/13/2019 Css styles 2

1/19

i

In-line Style sheet

1 Font-Inline CSS

In line Style Sheet

Fruits and Vegetables

We have many kinds of fruits and vegetables in

Sri Lanka
They are verydelicious

2. Font_EmbeddedCSS

Font Embedded CSS

H1{color:red; font-size:50px}

P {color:green; font-size:12px}

Fruits and Vegetables

We have many kinds of fruits and vegetables in Sri Lanka

They are very delicious


2/19

ii

3.

Linking Style Sheet

Linking Style Sheet

This is an element type selector

This is an element type selector

This is a class selector type style

This is a ID selector type style sheet

Save as: linking_style.html

H1{color:green; font-size:50px}P {color:red; font-size:12px}

.para1{

font-family: monospace;

font-size: 20px;

font-weight: bold;height: 2px;

}#para2{

border: medium;border-color: Fuchsia;

font: italic;

}

Save as: linking.css


3/19

iii

4. ID- CSS

#id123{color:red}

Heading 1

content 1

Heading 2

content

5. Element CSS

h1{color:red}

H2{color:blue}

Heading 1

Item 1Heading 2

Item 2

6. Group-CSS

h1,h2,h3,{font:24pix"MSP Mincho"; color:blue}

Heading 1

Heading 2Heading 3


4/19

iv

7. V-Link

A:link{color:yellow; font-size:large}A:visited{color:blue; font-size:small}

A:active{color:green; font-size:x-large}

Back to top

8. Common Sample CSS

CSS

this Character is display as MS p gothicthis Character is display as arial

this Character is display as times

this Character is display as times and italic letters

this Character is display font weight as normal

this Character is display font weight as bolder

this Character is display font weight as 700

this Character is display font weight as 900

this Character is display font-size 1in

this Character is display font-size 10mmlthis Character is display font-size 1pc

this Character is display font-size 2em

this Character is display font-size 12pxthis Character is display font-size 12pt

this Character is display font-size 1cm

this Character is display text-decoration underline

this Character is display text-decoration line-through


5/19

v

this Character is display letter-spacing normalthis Character is display letter-spacing 12px

this Character is display letter-spacing -3

this Character is display line-height 36px

this Character is display line-height 250%

At the border color is red and weight is

7px


6/19

vi

10. Border Styles

p.dotted {border-style: dotted}

p.dashed {border-style: dashed}p.solid {border-style: solid}

p.double {border-style: double}

p.groove {border-style: groove}p.ridge {border-style: ridge}

p.inset {border-style: inset}

p.outset {border-style: outset}

A dotted border

A dashed border

A solid border

A double border

A groove border

A ridge border

An inset border

An outset border

10. Border Styles (out put)


7/19

vii

11. Z- index

img.x{

position:absolute;

left:0px;top:0px;

z-index:-1

}

This is a Heading

Default z-index is 0. Z-index -1 has lower priority.


8/19

viii

Web Templates handing using CSS

Sample CSS

#container{

width: 100%;

margin: 10px auto;background-color: #fff;

color: #333;border: 1px solid gray;

line-height: 130%;

}

#top{

padding: .5em;

background-color: #F0FFFF;border-bottom: 1px solid gray;

}.imgl {

float: left;

}

#top h1{

padding: 0;

text-align: center;

}

#leftnav{

float: left;width: 160px;

margin: 0;

padding: 1em;}

#leftnav ul li a {

text-decoration: underline;

background-color: Navy;width: 120px;

color: White;

font-weight: bold;

list-style: none;}

#leftnav ul li a:hover {background-color: Aqua;

}#localnav ul li {

display: inline;

}


9/19

ix

#localnav ul li a {text-decoration: underline;

background-color: Navy;

width: 120px;

color: White;font-weight: bold;

list-style: none;

text-align: center;}

#localnav ul li a:hover {background-color: Aqua;

}

#content{

margin-left: 200px;border-left: 1px solid gray;

padding: 1em;max-width: 36em;

}

.img{

float: left;

}

.imgr{float: right;

width: 50px;

height: 55px;

}

#footer{

clear: both;margin: 0;

padding: .5em;

color: #333;background-color: #F0FFFF;

border-top: 1px solid gray;

}

#leftnav p { margin: 0 0 1em 0; }

#content h2 { margin: 0 0 .5em 0; }


10/19

x


11/19

xi

Sample Properties of CSS


12/19

xii


13/19

xiii

The Box Properties


14/19

xiv

How to use some of the css box properties

Width and Height

Width

Possible Values:

number of pixels: {width: 100px}percentage: {width: 25%}

This section of text will be 100 pixels long

height

Possible values:

number of pixels: {height: 100px}

percentage: {height: 25%}

Borders

border-style

Possible Values:

nonesolid

double

border-width

Possible Values:

number of pixels

thin

medium

thick

border-color

Possible Values:

color name

Margins

Margin-left

Possible Values:

number in pixelspercentage

auto

margin-right

Possible Values:

number in pixels


15/19

xv

Margin-top

Same as above, but defines the top margin. The default is 0.

Margin-bottom

Same as above, but defines the bottom margin. The default is 0.

Padding

Padding-left

Possible Values:

number in pixelspercentage

auto

CSS Positioning Properties

How to position elements on the page

Position

Possible Values:

static

absoluterelative

top

Possible Values:number of pixels

percentage

left

Possible Values:

number of pixels

percentage


16/19

xvi

The Text Properties

How to use some of the css text properties

letter-spacing

Possible Values:

number of pixelsnormal

text-align

Possible Values:

left

rightcenter

justify

vertical-align

Possible Values:baseline

subsuper

top

text-topmiddle

bottom

text-bottom

text-decoration

Possible Values:

none

underline

overlineline-through

blink

text-transform

Possible Values:

noneuppercase

lowercase

Line-height

Possible Values:

normal

number of pixelspercentage


17/19

xvii

text-indent

Possible Values:

number of pixels

percentage

The Font PropertiesHow to use some of the css font properties

font-family

Possible Values:

name of font

font-size

Possible Values:

number of pixels

percentage

font- style

Possible Values:

normalitalic

oblique

font-variant

possible Values:

normal

small-caps

font-weight

Possible Values:

normal

boldbolder

lighter

100200

300

400500

600

700

800900


18/19

xviii

The Cursor Properties

How to change the cursor with style sheets

cursor : type

A Cross Link

Should you Wait for This?

Cursor Type Example (Move Mouse Over Text)

auto Shows it according to how the viewer has it set (plain)

crosshair Looks like a cross

default Makes the cursor stay the same

move Looks like you should be moving something

hand The hand you usually see over links

help A question mark beside the arrow

text The bar you see when the mouse is over text

wait The waiting hourglass!

n-resize An arrow- North

s-resize An arrow-South

e-resize An arrow-East

w-resize An arrow-West

ne-resize An arrow-NorthEast

nw-resize An arrow-NorthWest

se-resize An arrow-SouthEast

sw-resize An arrow-SouthWest


19/19

i

More on Backgrounds

Repeating, Fixing and other things

Property

Possible Values:background-image

URL of image to be used

background-repeat:valuerepeat, no-repeat, repeat-x, repeat-y

background-attachment:value

scroll, fixedbackground-position:value 1 value 2

value 1:

top, center, bottom, pixel number, percentage

value 2

left, center, right, pixel number, percentage

background-attachment:value

This one can use one of two values:

background-attachment : scrollbackground-attachment : fixed

More on Backgrounds: Part 2

Repeating, fixing and other things

background repeat value

This one can have several values, here are the possibilities:

background-repeat:repeat

background-repaet:no-repeatbackground-repeat:repeat-x

background-repeat:repeat-y

background-position:value value

The two values can be loots of things, here are some samples:

Using top, center, or bottom with left, center or right

background-position:top rightbackground-position:center right

background-position:bottom center

Using pixels and percentages (from top-left or page)

background-position: 200 250

background-position: 30% 60%

Documents

Css styles 2