Styles Final

8/18/2019 Styles Final

http://slidepdf.com/reader/full/styles-final 1/20

i

In-line Style sheet

1 Font-Inline CSS

<HTML>

<HEAD>

<TITLE>In line Style Sheet</TITLE></HEAD>

<BODY>

<H1 style="Color:red"> Fruits and Vegetables</H1>

<P STYLE=color:blue; font-size:20px>We have many kinds of fruits and vegetables inSri Lanka <br>

They are verydelicious</P><br>

</BODY></HTML>

2. Font_EmbeddedCSS

<HTML>

<HEAD>

<TITLE>Font Embedded CSS</TITLE>

<STYLE TYPE="TEXT/CSS">H1{color:red; font-size:50px}

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

</STYLE></HEAD>

<BODY>

<H1> Fruits and Vegetables</H1>

<P>We have many kinds of fruits and vegetables in Sri Lanka <br>

They are very delicious</P><br>

</BODY>

</HTML>



ii

3.

Linking Style Sheet

<HTML>

<HEAD>

<TITLE>Linking Style Sheet</TITLE><LINK REL="stylesheet" TYPE="text/css" HREF="linking.css">

</HEAD>

<BODY>

<H1> This is an element type selector </H1>

<P>This is an element type selector</P><br><P CLASS=para1>This is a class selector type style</P>

<P ID=para2>This is a ID selector type style sheet

</BODY>

</HTML>

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



iii

4. ID- CSS

<HTML>

<HEAD>

<STYLE TYPE="TEXT/CSS">

#id123{color:red}</STYLE>

</HEAD><BODY>

<H1 id="id123"> Heading 1</H1>

<P>content 1</P><H1>Heading 2</H1>

<P>content</P>

</BODY>

</HTML>

5. Element CSS<html><head>

<style type="text/css">

h1{color:red}H2{color:blue}

</style>

</head>

<body><h1>Heading 1</h1>

<h2>Item 1</h2>

<h1>Heading 2</h1><h2>Item 2</h2>

</body>

</html></body>

</html>

6. Group-CSS<html>

<head>

<style type="text/css">h1,h2,h3,{font:24pix"MSP Mincho"; color:blue}

</style>

</head><body>

<h1>Heading 1</h1>

<h2>Heading 2</h2><h3>Heading 3</h3>

</body></html>



iv

7. V-Link

<html>

<head>


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

A:active{color:green; font-size:x-large}</style>

</head>

<body><a href="goya.html">Back to top</a>

8. Common Sample CSS

Write the CSS code required to produce the given output together with the following

HTML code?

<html>

<head>

<title> CSS</title><link rel="stylesheet" type="text/css" href="test.css">

</head>

<body>

<div class="gothic">this Character is display as MS p gothic</div><div class="arial">this Character is display as arial</div>

<div class="times">this Character is display as times</div>

<div id="italic">this Character is display as times and italic letters</div>



<div id="font1">this Character is display font weight as normal</div><div id="font2">this Character is display font weight as bolder</div>

<div id="font3">this Character is display font weight as 700</div>

<div id="font4">this Character is display font weight as 900</div>

<div class="font5">this Character is display font-size 1in</div>

<div class="font6">this Character is display font-size 10mml</div>

<div class="font7">this Character is display font-size 1pc</div><div class="font8">this Character is display font-size 2em</div>

<div class="font9">this Character is display font-size 12px</div>

<div class="font10">this Character is display font-size 12pt</div>

<div class="font11">this Character is display font-size 1cm</div>



<div id="text1">this Character is display text-decoration underline</div>



v

<div id="text2">this Character is display text-decoration line-through</div>



<div class="fonta">this Character is display letter-spacing normal</div>

<div class="fontb">this Character is display letter-spacing 12px</div><div class="fontc">this Character is display letter-spacing -3</div>



<div id="linea">this Character is display line-height 36px</div>

<div id="lineb">this Character is display line-height 250%</div>



<p class="border1"> At the border color <span class="co">is red and</span> weight is

7px </p></body>

</html>



vi

10. Border Styles

<html><head>


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}

</style></head>

<body>

<p class="dotted">A dotted border</p><p class="dashed">A dashed border</p>

<p class="solid">A solid border</p><p class="double">A double border</p><p class="groove">A groove border</p>

<p class="ridge">A ridge border</p>

<p class="inset">An inset border</p><p class="outset">An outset border</p>

</body>

</html>

Border Styles (out put)



vii

11. Z- index

<html>

<head>


img.x{

position:absolute;left:0px;

top:0px;

z-index:-1}

</style>

</head>

<body>

<h1>This is a Heading</h1><img class="x" src="bulbon.gif" width="100" height="180"><p>Default z-index is 0. Z-index -1 has lower priority.</p>

</body>

</html>



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;

width: 50px;

height: 55px;

}

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

}



ix

#localnav ul li {

display: inline;}

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



x



xi

HTML code for CSS Template:

<html>

<head>

<title> Better Future </title>

<link href="../css/default.css" rel="stylesheet" type="text/css" title="Default" /><link href="../css/black.css" rel="alternate stylesheet" type="text/css" title="High

Contrast" /></head>

<body>

<div id="container"><div id="top">

<img class="imgl" src="../images/logoUCSC.jpg" alt="UCSC Logo"/>

<img class="imgr" src="../images/APCD_new_logo.png" alt="APCD Logo"/>

<h1>Better Future for all community in Sri Lanka</h1>

</div><div id="leftnav">

<ul>

<li><a accesskey="1" tabindex="1" href="index.html">Home</a></li><li><a accesskey="2" tabindex="2" href="aboutus.html">About Us</a></li>

<li><a accesskey="3" tabindex="3" href="people.html">People</a></li>

<li><a accesskey="4" tabindex="4" href="comment.html">Comment</a></li>

<li><a accesskey="5" tabindex="5" href="event.html">Events</a></li><li><a accesskey="6" tabindex="6" href="news.html">News</a></li>

<li><a accesskey="7" tabindex="7" href="contactus.html">Contact Us</a></li>

</ul></div>

<div id="content"><h2>Sri Lanka </h2>

<p>Write your paragraph here </p>

</div>

</div>

<div id="footer">

University of Colombo School of Computing, 35, Reid Avenue, Colombo 7, Sri Lanka</div>

</div>

</body></html>



xii

Sample Properties of CSS



xiii

The Box Properties



xiv



xv

How to use some of the css box properties

Width and Height

Width

Possible Values:

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

<DIV style=”width: 100px”>This section of text will be 100 pixels long</DIV>

height

Possible values:

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

Borders

border-style

Possible Values:none

solid

double

border-width

Possible Values:

number of pixelsthin

medium

thick

border-color

Possible Values:

color name

Margins

Margin-left

Possible Values:number in pixels

percentageauto

margin-right




xvi

Margin-topSame 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


percentage

auto

CSS Positioning Properties

How to position elements on the page

Position

Possible Values:

staticabsolute

relative

top

Possible Values:

number of pixelspercentage

left

Possible Values:number of pixels

percentage



xvii

The Text Properties

How to use some of the css text properties

letter-spacing

Possible Values:

number of pixelsnormal

text-align

Possible Values:

leftright

center

justify

vertical-align

Possible Values:baselinesub

super

toptext-top

middle

bottom

text-bottom

text-decoration

Possible Values:none

underline

overlineline-through

blink

text-transform

Possible Values:

none

uppercaselowercase

Line-height

Possible Values:normal




xviii

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:


font- style


italic

oblique

font-variant

possible Values:

normalsmall-caps

font-weight


bold

bolderlighter

100

200300

400

500600

700

800900



xix

The Cursor Properties

How to change the cursor with style sheets

cursor : type

<A HREF=”#” style=”cursor : crosshair”>A Cross Link</A>

<SPAN style= “cursor:wait”>Should you Wait for This?</SPAN>

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



More on Backgrounds

Repeating, Fixing and other things

Property

Possible Values:background-image

URL of image to be usedbackground-repeat:value

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

background-attachment:valuescroll, fixed

background-position:value 1 value 2

value 1:

top, center, bottom, pixel number, percentagevalue 2

left, center, right, pixel number, percentage

background-attachment:value

This one can use one of two values:background-attachment : scroll

background-attachment : fixed

More on Backgrounds: Part 2

Repeating, fixing and other things

background repeat valueThis 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 rightbackground-position:top right

background-position:center rightbackground-position:bottom center

Using pixels and percentages (from top-left or page)background-position: 200 250

background-position: 30% 60%

Documents

Styles Final