Scribd
Upload
103 views5 pages

Cascading Style Sheets (CSS) Is A Stylesheet Language Used To Describe The

The document describes using CSS (Cascading Style Sheets) to style a web page. It discusses using different fonts, styles, setting background images for pages and elements, and controlling image repetition. It provides examples of external, internal, and inline style sheets, and their priorities. The program section applies various CSS properties like fonts, colors, positioning to elements on an HTML page and sets a background image for a table with control over repetition.

Uploaded by

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

Cascading Style Sheets (CSS) Is A Stylesheet Language Used To Describe The

The document describes using CSS (Cascading Style Sheets) to style a web page. It discusses using different fonts, styles, setting background images for pages and elements, and controlling image repetition. It provides examples of external, internal, and inline style sheets, and their priorities. The program section applies various CSS properties like fonts, colors, positioning to elements on an HTML page and sets a background image for a table with control over repetition.

Uploaded by

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

Week-4 Date: 21-07-08

------------------------------------------------------------------------------------------------------------
AIM:

Design a web page using CSS (Cascading Style Sheets) which includes the following:
1) Use different font, styles: In the style definition you define how each selector should work .Then,
in the body of your pages, you refer to these selectors to activate the styles.
2) Set a background image for both the page and single elements on the page.
3) Control the repetition of the image with the background-repeat property

DESCRIPTION:

Cascading Style Sheets (CSS) is a stylesheet language used to describe the


presentation of a document written in a markup language. Its most common application is
to style web pages written in HTML and XHTML, but the language can be applied to any
kind of XML document.
In CSS, selectors are used to declare which elements a style applies to, a kind of match
expression. Selectors may apply to all elements of a specific type, or only those elements
which match a certain attribute; elements may be matched depending on how they are
placed relative to each other in the markup code, or on how they are nested within the
document object model
A style sheet consists of a list of rules. Each rule or rule-set consists of one or
more selectors and a declaration block. A declaration-block consists of a list of
semicolon-separated declarations in braces. Each declaration itself consists of a property,
a colon (:), a value, then a semi-colon (;)
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the
following rules:
1. External style sheet
2. Internal style sheet (inside the <head> tag)
3. Inline style (inside an HTML element)
An inline style (inside an HTML element) has the highest priority, which means that it will override a
style declared inside the <head> tag, in an external style sheet, or in a browser (a default value).

Syntax
The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value}

www.Technicalsymposium.com
The selector is normally the HTML element/tag you wish to define, the property is the
attribute you wish to change, and each property can take a value. The property and value
are separated by a colon, and surrounded by curly braces:
body {color: black}
External Style Sheet
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>
<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.
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 by using the <style> tag,
<head>
<style>
selector {property:value; property:value;…..}
</style>
</head>
Inline Styles
An inline style loses many of the advantages of style sheets by mixing content
with presentation. Use this method sparingly, such as when a style is to be applied to a
single occurrence of an element.
To use inline styles you use the style attribute in the relevant tag. The style attribute can
contain any CSS property.
<p style="color: sienna; margin-left: 20px">
This is a paragraph </p>

PROGRAM:

www.Technicalsymposium.com
Cas.css:
a:link{color:black;}
a:visited{color:pink;}
a:active{color:red;}
a:hover{color:green;}

.right {
text-align:center;
text-decoration:underline;
font-weight:bold;
color:blue;
font-family:comic sans ms;
font-size:30; }
.image {
text-align:left;
font-family:"monotype corsiva";
font-weight:10;
}

.image1 {
background-image:url("C:\Documents and Settings\All Users\My Documents\My Pictures\krishna.jpg");
background-attachment:fixed;
background-repeat:no-repeat;
width:150;
height:150; }
table { align:center;border:10;
border-style:ridge;
border-color:yellow;}

htm.html:
<html>
<head>
<link rel="stylesheet" href="cas.css" type="text/css">
<style>
.xlink{ text-decoration:none;font-weight:bold;cursor:crosshair;}
.ylink{text-decoration:underline;font-weight:bold;cursor:help;}

www.Technicalsymposium.com
</style>
</head>
<body class="image">

<p style="text-align:right;">
<a href="registration.html" class="xlink"> Reg Link</a>&nbsp;&nbsp;
<a href="topframe.html" class="ylink"> Help Link</a>
</p>
<p class="right">PVPSIT</p>
<div style="position:relative;font-size:90px;z-index:5;color:purple;">PVPSIT</div>
<div style="position:relative;font-size:50px;z-index:1;top:-70; left:5;color:blue;">CSE</div>
<div style="position:relative;font-size:90px;z-index:1;color:purple;">PVPSIT</div>
<div style="position:relative;font-size:50px;z-index:5;top:-70; left:5;color:blue;">CSE</div>
<table align="center" class="image1">
<tr>
<td> Fruits</td>
<td> Mango</td>
</tr>
</table>
</body>
</html>

OUTPUT:

www.Technicalsymposium.com
RESULT: Thus different style of CSS and different type of the properties are applied.

www.Technicalsymposium.com

You might also like