In the following sections, we will present some examples of
using style sheets to format Web pages. But first, there are two HTML tags you
need to know about.
The <div> and <span>
The <div> and <span> tags are essential if you
want to use CSS for formatting your Web pages. These tags have no function
except to mark off sections of a document, permotting you to assign styles to
them by including a class attribute in the tag. The difference between them is
that <div> is block element and its content will start on a new line,
whereas <span> is an inline element and its content will be on the same
line as adjacent content. Thus, <div> can be used to assign a style to a
group of several paragraphs while <span> can be used to assign a style
one or more words in a sentence. We will see that in following section:
Creating Custom
Styles for Headings
The HTML tags <h1> through <h6> are useful for
creating headings in your Web pages. If you do not like the default appearance
of these headings, you can use CSS to format them to your likings. Let us see,
the same in the following examples:
1) Start
your text editor and create a new, blank file:
2) Enter
the style sheet rules shown below:
·
body {background-color: #CCFFFF;}
·
body, td, th {color: #333333;}
·
h1, h2 {color: #000033;}
·
h3 {color: #006699;}
You must be familiar with the tags used in the above code.
3) Save
the file with the name test.css. Be sure to save it in the same folder where
you will save the Web page.
The next step is to create a Web page that will use this
style sheet. Let us use the following code for the webpage:
<html> <head> <title>Styles of Headings</title> <link href=”test.css” rel=”stylesheet” type=”text/css”> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> </body> </html>
Note
Use of the <link> tag to link the page to the style
sheet.
Output will look like this:
Using Styles for
Table Formatting
This next example shows how you can use a style sheet to
control the formatting of an HTML table. The objective is to define different
styles that can be applied to individual rows. One will be used to display the
first row of the table as a header using a dark blue background. The other
style will be used to format other rows as grey or white alternatively. Each
style will be defined with a class selector; then the appropriate class
attribute will be added to the <tr> elements as needed. Let us see the
code below for this, including the internal style sheet and a table of sample
data. Note how the class attribute is used to assign the appropriate style to
the table rows.
<html>
<head>
<title>Formatting tables with styles</title>
<style>
table.info {width:100%;
border:1px solid #111111;
border-collapse:collapse;}
.tableheader {color:white;
font:bold 14pt arial,sans-serif;
background-color:#006699;}
.alternaterows {background-color:#C0C0C0}
</style>
</head>
<body>
<table class=info>
<tr class=tableheader>
<td width=”35%” class=”tableheader”>Ankit</td>
<td width=”34%” class=”tableheader”>Aakash</td>
<td width=”33%”
class=”tableheader”>Aakansha</td>
</tr>
<tr>
<td width=”33%”>121232</td>
<td width=”33%”>323343</td>
<td width=”34%”>342342</td>
</tr>
<tr class=alternaterows>
<td width=”33%”>546778</td>
<td width=”33%”>899900</td>
<td width=”34%”>432343</td>
</tr>
<tr>
<td width=”33%”>432343</td>
<td width=”33%”>123456</td>
<td width=”34%”>899900</td>
</tr>
<tr class=alternaterows>
<td width=”33%”>123456</td>
<td width=”33%”>432343</td>
<td width=”34%”>899900</td>
</tr>
</table>
</body>
</html>
Its output will be somewhat come as:
Using Styles to
Format Hyperlinks
Every browser has default styles for links. For Internet
Explorer, this is blue underlined text for unvisited links and purple
underlined text for visited links. You can use style to change the way links
are displayed, but first you need to know about pseudoclasses.
Every link in a document uses the <a> tag and they all
look pretty much the same. In other words, there’s no way that you can look at
the HTML source code and tell which links have been visited and which have not.
What happen is that each browser keeps a history list of links visited within
the past so many days (20 days by default in Internet Explorer, but this value
can be changed by the user). If a link’s URL is found in the history list, it
is considered “visited”; otherwise it is not. The browser automatically assigns
the visited pseudoclass to links that have been visited and the link
pseudoclass to links that have not been visited. Two other pseudoclasses are
available as well: active for an active link (one that is being clicked) and
hover for one the mouse cursor is hovering over. Thus,
a:link
is a selector for unverified link and
a:visited a:hover a:active
are selectors for visited, hover and active links respectively.
Suppose you wanted unvisited hyperlinks on a page to have larger white text on
a red background, not underlined. Visited links should be the except for having
black text on a gray background. Here is the style to do this:
<style>
a.link {font-size:larger;
color; #FFFFFF;
padding-left: 10px;
padding-right: 10px;
text-decoration:none;
background-color; #CC0000;}
a:visited {font-size: larger;
color: #000000;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
background-color: #CCCCCC;}
</style>
Note
You must include text-decoration:none in the style to cancel the default underlining of links. Next figure below shows how the resulting link styles will appear, if the above discussed style css(name it as test.css) is used on following html code:
You must include text-decoration:none in the style to cancel the default underlining of links. Next figure below shows how the resulting link styles will appear, if the above discussed style css(name it as test.css) is used on following html code:
<title>Formatting with hyperlinks</title> <link href=”test.css” rel=”stylesheet” type=”text/css”> this is <a href=www.google.com>Visited Google</a> this is <a href=www.yahoo.com>Unvisited Yahoo<a>
Out Put :
Summary
Style sheets provide a great deal of formatting power and
flexibility to the Web page designer. Good design practice dictates that you
use style sheets instead of <font> and other HTML tags. For simple
personal Website, the advantage in minimal, but as you get into developing more
complex sites, the benefits of style sheets will become more evident.
0 comments:
Post a Comment