Scribd
Upload
1K views

WEEK 4 Design A Web Page Using CSS (Cascading Style Sheets)

The document describes using CSS to style a web page with three sentences: 1) It defines styles for fonts, text alignment, background images and other properties in an external CSS file and links it to an HTML file. 2) The HTML file applies classes and inline styles to elements to control text formatting, links, and add a background image to a table. 3) When rendered, the web page displays formatted text, centered images and tables according to the CSS rules.

Uploaded by

bhaskar1210510101
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
1K views

WEEK 4 Design A Web Page Using CSS (Cascading Style Sheets)

The document describes using CSS to style a web page with three sentences: 1) It defines styles for fonts, text alignment, background images and other properties in an external CSS file and links it to an HTML file. 2) The HTML file applies classes and inline styles to elements to control text formatting, links, and add a background image to a table. 3) When rendered, the web page displays formatted text, centered images and tables according to the CSS rules.

Uploaded by

bhaskar1210510101
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Week-4 web page using CSS

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


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:

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;}
</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:

You might also like