Scribd
Upload
30 views11 pages

Experiment n0.7

The document discusses adding style sheets to HTML documents. It explains the different ways to add styles like external, internal and inline styles. It also covers various CSS properties for fonts, text, boxes and links. The exercises at the end demonstrate how to apply these properties to style elements on a web page.

Uploaded by

Pallavi Patil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
30 views11 pages

Experiment n0.7

The document discusses adding style sheets to HTML documents. It explains the different ways to add styles like external, internal and inline styles. It also covers various CSS properties for fonts, text, boxes and links. The exercises at the end demonstrate how to apply these properties to style elements on a web page.

Uploaded by

Pallavi Patil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

EXPERIMENT NO.

TITLE : - Design a web page to apply style sheet properties.

AIM : - To add style sheets to a document, to link a style sheet, to embed and
import style sheets

OBJECTIVE : understand the concept of style sheet, to a style sheet and to embed and
import style sheets.

THEORY:

Cascading Style sheets (CSS)

CSS Syntax A CSS rule has two main parts: a selector, and one or more declarations:

The selector is normally the HTML element you want to style. Each declaration consists
of a property and a value. The property is the style attribute you want to change. Each
property has a value.

Steps to add Style Sheets to a Document


Style information is included in the document using three ways:
 External style sheets
 Internal style sheets(Document wide style)
 Inline style

External Style Sheets: used when the style is to be applied for many pages.

An external style sheet is ideal when the style is applied to many pages. With an external
style sheet, you can change the look of an entire Web site by changing one file. Each
page must link to the style sheet using the <link> tag. The <link> tag goes inside the head
section:
<head>

1
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
The browser will read the style definitions from the file mystyle.css, and format the
document according to it.
Attributes:

Rel Indicates the relationship to <link> element


Href Used to indicate the URL of style sheet to be used
Type Indicates the linked documents type , in case of CSS document we set it to
“text/css”

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You
define internal styles in the head section of an HTML page, by using the <style> tag, like
this:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with
presentation. Use this method sparingly!
To use inline styles you use the style attribute in the relevant tag. The style attribute can
contain any CSS property. The example shows how to change the color and the left
margin of a paragraph:

<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>


Style sheet properties :
 font –family : property specifies the font for an element.Possible values for font-
family, like "times", "courier", "arial", etc.
 font-size :used to set the size of the font
 font style:used to specify normal ,italic,oblique font style.
 font –weight: used to set weight of the font. Values are – bolder,extra bold or any
negative integer no. indicating font weight.

2
 font-variant : used to select a variation of font family.Possible values are :small-
caps,normal.
For example :
H1
{ font family :Arial;
font size: 18;
font style :italic;
font weight: border;
font-variant:small-caps}

Text Properties:

 The word-spacing property defines an additional amount of space between words which
is specified in cm(centimeter),mm(millimeter),pt(point),pc(picas),em,px(pixels).
 The letter-spacing property defines an additional amount of space between characters.
 vertical-align property may be used to alter the vertical positioning of an inline element,
relative to its parent element or to the element's line.The vertical-align property is
particularly useful for aligning images.
 The text-align text-align can be used to change the text justification. Possible values
are left, right, center, and justify (for full justification with to ragged left or right
margin).

 The line-height property will accept a value to control the spacing between baselines of
text. When the value is a number, the line height is calculated by multiplying the
element's font size by the number.
For example :
H2
{word –spacing:12pt;
letter-spacing : 10pt;
vertical –align : text-top;
text align:justify;
text indent : 2cm;
line –height :2}

Box properties:

Margin properties: determines distance between edge of an element box and edge of adjacent
element. The margin property sets the margins for an element, and is a shorthand property for the
following properties:

margin-bottom Sets the bottom margin of an element

3
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
For Example :Body

{ margin-top:20 px;

margin-right:25 px;

margin-left:30 px;

margin-bottom:30 px; }

Border properties:

Determine the visual characteristics of border surrounding the element edge.

border-width Specifies the width of the border. Default value is "medium"


border-style Specifies the style of the border. Default value is "none"
border-color Specifies the color of the border. Default value is the color of the text

For example :

Body { border-style: dotted;

border-width:10px;

border-color: green }

Padding properties

An element's padding is the space between its content and its border. Padding creates extra space
within an element, while margin creates extra space around an element.

This property can have from one to four values.

 padding-top

 padding-right

 padding-bottom

4
 padding-left

Example:

P{ padding-top: 5px;

padding-right: 60px;

padding-bottom: 15px;

padding-left: 30px;

Exercises:

1) Use different font, styles:In the style definition you define how each selector should work (font,
color etc.). Then, in the body of your pages, you refer to these selectors to activate the styles.

<html>

<head>

<title>

week no-4.1 exp web technologies

</title>

<STYLE TYPE="TEXT/CSS">

H1

COLOR:rgb(50,100,150);

TEXT-ALIGN:right;

FONT-FAMILY:Times new roman;

H6

COLOR:green;

TEXT-ALIGN:CENTER;

5
FONT-FAMILY:Verdana;

</STYLE>

</HEAD>

<body>

<H1>WELCOME TO CSE</H1>

<H6>WELCOME TO INTERNAL CSS</H2>

</BODY>

</HTML>

OUTPUT :

6
2) Set a background image for both the page and single elements on the page.You can
define the background image for the page .

Program:

<html>

<head>

<title>Image</title>

<style>

body

background-image:url("Sunset.jpg" );

background-repeat:no-repeat;

h1

background-image:url("Winter.jpg ");

</style>

</head>

<body>

<H1>WEB DESIGNING</H1>

</body>

</html>

Output:

7
3) Control the repetition of the image with the background-repeat property.As
background-repeat: repeat Tiles the image until the entire page is filled, just like an
ordinary background image in plain HTML.

Program:

<html>

<head>

<title>Image</title>

<style>

body

background-image:url("a.jpg");

8
background-repeat:repeat-Y;

</style>

</head>

<body>HAPPY BIRTHDAY </body>

</html>

Output:

9
4) Define styles for links as

A:link

A:visited

A:active

A:hover

Program:

<html>

<head>

<style type="text/css">

a:link {color:"orange";} /* unvisited link */

a:visited {color:"red";} /* visited link */

a:hover {color:green;} /* mouse over link */

a:active {color:yellow;} /* selected link */

</style>

</head>

<body>

<p><b><a href="css4.html">This is a link</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS

definition in order to be effective.</p>

<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order

to be effective.</p>

</body>

</html>

10
Output:

Conclusion :

11

You might also like