.
This would bring up the Style Builder dialog box:
Practical
Learning: Creating Inline CSS
Besides the inline
formatting, you can also create CSS code in the head section and apply its
formatting to the necessary HTML tags. We saw already that you could add
HTML tags to the parentheses of Response.Write(). If you create
your CSS code in the head section of the same file, the browser would make
sure it applies the formatting to the appropriate HTML tag. Here are
examples:
<%@ Page Language="VB" %> <html> <head> <style>
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
color: #000000;
font-size: 10pt;
background-color: #FFDCA5 }
h6 {
font-family: Verdana, Tahoma, sans-serif;
color: #CC3300;
font-size: 10pt;
text-align: center }
hr { color=#CC3300 }
</style>
<title>Grier Summer Camp</title>
</head>
<body>
<p>Grier Summer Camp</p>
<p>Coolfront Island</p>
<p>Coolfront Island, our star house of the season, is a 2-story
like chateau featuring nicely finished brown bricks whose sight is
tremendously appealing. The estate introduces two large living
rooms with exquisite velour furniture. The colonial veranda offers
a patio spanning two walls with a lost view down the far-reaching
landscape. In this particular setting, besides their usual
activities, children will learn special human needs to make their
experience unforgettable.</p>
<hr>
<% Response.Write("<h6>Copyright © 2007 Grier Summer Camp</h6>") %>
<hr>
</body>
</html>
This would produce:
You can also create
custom tags, referred to as custom classes, in your CSS code. If you create a custom class as part of your
CSS, to
use it in the <% %> section, include the name of the class in
single-quotes. Here are examples:
<%@ Page Language="VB" %>
<html>
<head>
<style>
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
color: #000000;
font-size: 10pt;
background-color: #FFDCA5 }
hr { color=#CC3300 }
.toptitle {
color: #800000;
font-family: 'Times New Roman', Garamond, Georgia, Serif;
text-align: center;
font-size: 24pt;
font-weight: bold;
text-decoration: none }
.housetitle {
color: #CC3300;
font-family: Georgia, Times New Roman, Courier New;
font-size: 16pt;
font-weight: bold;
text-decoration: none }
.copyright {
font-family: Verdana, Tahoma, sans-serif;
color: #CC3300;
font-size: 10pt;
text-align: center }
</style>
<title>Grier Summer Camp</title>
</head>
<body>
<% Response.Write("<p class='toptitle'>Grier Summer Camp</p>") %>
<% Response.Write("<p class='housetitle'>Coolfront Island</p>") %>
<p>Coolfront Island, our star house of the season, is a 2-story
like chateau featuring nicely finished brown bricks whose sight is
tremendously appealing. The estate introduces two large living
rooms with exquisite velour furniture. The colonial veranda offers
a patio spanning two walls with a lost view down the far-reaching
landscape. In this particular setting, besides their usual
activities, children will learn special human needs to make their
experience unforgettable.</p>
<hr>
<% Response.Write("<p class='copyright'> " + _
"Copyright © 2007 Grier Summer Camp</p>") %>
<hr>
</body>
</html>
This would produce:
As mentioned earlier, you can also create a CSS file.
To do this, you can use Notepad and enter the necessary code. You should
then save the file with a .css extension. Microsoft Visual Web Developer
2008 Express Edition provides its own means of creating a CSS file you can use in any
application or to create and add a CSS file to the current project.
To create an independent CSS file, on the main menu,
you can click File -> New File..., select Style Sheet in the Templates list,
and accept or give a name to
the file:
Click Add.
After creating the file, you must save it and add it to any folder of your
choice.
To create a CSS file and add it to the current
project, on the main menu, you can click Web Site -> Add New Item... In
the Templates section, click Style Sheet, accept the suggested name or give a name of your choice (recommended) and click
Add.
When you start a new Style Sheet, you get a screen
divided in two sections. The left section displays the already created
tags or classes of your files. The right frame displays the formats (tags,
classes) that have already been created in the file.
After creating and saving the file with
.css extension, you can reference it by its name. For example if you
create a file named Example.css, to use its formats in your web page, in
the head section of the page, you would type:
<link rel="stylesheet" type="text/css" href="Example.css">
The advantage of this application-level style is that
the same style can be applied to different pages of your web site, as long
as you remember to reference the CSS file.
|
|
|||||||||
|
|
Using Cascading Style Sheet
Subscribe to:
Post Comments (Atom)
Related Scripting
No comments:
Post a Comment