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:
- External style sheet
- Internal style sheet (inside the <head> tag)
- 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>
<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:
 |
| http://wikibrand.blogspot.in |
RESULT: Thus different style of CSS and different type of the properties are
applied.
SOURCE:PVPSIT FOR JNTUK
Wonderful bloggers like yourself who would positively reply encouraged me to be more open and engaging in commenting. So know it's helpful..best site
ReplyDeleteWebsite for school uk
I like the helpful info you supply in your articles. I’ll bookmark your weblog and take a look at once more here regularly. I am relatively certain I will learn a lot of new stuff right here! Good luck for the following!
ReplyDeleteweb designing training in chennai
web designing training in velachery
digital marketing training in chennai
digital marketing training in velachery
rpa training in chennai
rpa training in velachery
tally training in chennai
tally training in velachery
Great Article...Thanks for sharing the best information.It was so good to read and useful to improve my knowledge as updated one.
ReplyDeletehadoop training in chennai
hadoop training in annanagar
salesforce training in chennai
salesforce training in annanagar
c and c plus plus course in chennai
c and c plus plus course in annanagar
machine learning training in chennai
machine learning training in annanagar
Wonderful bloggers like yourself who would positively reply encouraged me to be more open and engaging in commenting. So know it's helpful..best site
ReplyDeletedata science training in chennai
data science training in omr
android training in chennai
android training in omr
devops training in chennai
devops training in omr
artificial intelligence training in chennai
artificial intelligence training in omr