Transcript Slide 1
Chapter 3 – Designing your web pages
Dr. Stephanos Mavromoustakos
Problems of HTML Formatting
Not rich enough to create attractive web pages
HTML is embedded into your document therefore it
cannot be reused later (e.g. change the font)
You can’t easily change the formatting at runtime, in
the user’s browser. (e.g. change the font size for
visually impaired)
With HTML formatting all the additional markup in
your page adds considerably to the size of the page.
This makes it slower to download and harder to
maintain.
Cascading Style Sheets (CSS)
The HTML document contains what you want to display,
while the CSS file defies how you want to display it.
Style sheets don’t change with each request, so a browser
saves a local copy of the style sheet the first time it loads it.
From then on, it uses this cashed copy instead of
requesting it from the server over and over again. If it
doesn’t download the latest CSS changes use Ctrl+F5 in the
browser (not VWD).
Writing your first CSS
Create a new file called CssDemo.aspx in the Demos
folder.
In the Source View type the following code just before
the </head> tag:
<title>Untitled Page</title>
<style type="text/css"></style>
</head>
Next, between the opening and closing <style> tags,
type the following CSS code:
Writing your first CSS
<style type="text/css">
h1
{
font-size: 200x;
color: Green;
}
p
{
color:Blue;
font-style: italic;
}
.RightAligned
{
text-align: right;
}
</style>
Writing your first CSS
Then, inside the <div> tags enter the following:
<div>
<h1>Welcome to this CSS Demo Page</h1>
<p>CSS makes it super easy to style your
pages.</p>
<p class="RightAligned">
with very little code, you can quickly
change the looks of a page.</p>
</div>
Write the code exactly the way you see it. CSS is case
sensitive
Switch to Design View to see how it looks
Writing your first CSS
The code block from h1 until the closing curly brace (})
between the <style> tags is called a rule set or
simply rule. The h1 is called a selector and indicates
the element the formatting should be applied.
Each line between the curly braces is called a
declaration. A declaration consists of a property,
followed by a colon and then followed by a value.
The semicolon (;) separates the declarations.
CSS – The Language
A style sheet can contain multiple declarations like
before:
h1
{
font-size: 200x;
color: Green;
}
CSS – The Language
SELECTORS – what elements of the page must be styled
Universal (*) – applies to all elements in your page
e.g.
*
{
font-family: Arial;
}
Type – allows you to point to specific HTML element.
e.g.
h1
{
color: Green;
}
CSS – The Language
ID – Always prefixed by a hash symbol (#) and allows you to refer
to a single element in the page. Within an HTML or ASPX page,
you can give each element a unique using the id attribute. With
the ID selector, you can change the behavior for that single
element, like this:
#IntroText
{
font-style: italic;
}
You can reuse this ID across pages in your site like this:
<p id=“IntroText”>I am italic because I have
the right ID</p>
< id=“BodyText”>I am not italic because I have
a different ID</p>
CSS – The Language
Class – It enables you to style multiple HTML elements through the class
attribute. This is handy when you want to give the same type of formatting to a
number of unrelated HTML elements. The following rule changes the text to
bold for all HTML elements that have their class attributes set to
Highlight:
.Highlight
{
font-weight: bold;
color: Red;
}
The following code snippet uses the Highlight class to make the contents of
a <span> element and a link <a> appear with a bold typeface:
This is normal text but <span class=“Highlight”>this is
Red and Bold</span>
This is also normal text but <a href=“CssDemo.aspx”
class=“Highlight”> this link is Red and Bold as well</a>
CSS – The Language
Grouping and Combining Selectors
e.g.
H1, h2, h3
{
color: Red;
}
Also, you can combine selectors, allowing you to hierarchically point to a
specific element in a page. You can do this by separating the selectors
with a space. The following example targets all <p> elements that fall
within an element with an id of MainContent:
#MainContent p
{
font-size: 18px;
}
CSS – The Language
Grouping and Combining Selectors (con’t)
Grouping is just a shortcut to avoid typing the same
declarations over and over again, while combining allows
you to target specific elements in your document.
With combining, you’re not limited to ID and Type selectors;
you can also use it with other selectors like the following
example:
#MainContent p.Highlight
{
font-size: 18px;
font-weight: bold;
}
CSS – The Language
Grouping and Combining Selectors (con’t)
This rule changes all paragraphs with the class Highlight within
an element with its id set to MainContent and leaves all
others untouched. The following HTML snippet uses this rule to
show the effect:
<div id=“MainContent”>
<p class=“Highlight”>Because I have a class
called Highlight, my text appears in bold</p>
<p>This text is NOT bold, as it lacks the
Highlight class</p>
</div>
<p class=“Highlight”>I am NOT bold because I
don’t fall within MainContent</p>
CSS – The Language
Properties
VWD’s Intellisense lists more than 100 items, e.g.
Background-color
Background-image
Border
Color
Font-size
Margin
padding
CSS – The Language
Values
The values depend on the property. e.g.
h1
{
color: Red;
}
h1
{
color: #FF0000
}
h1
{
color: rgb(100%, 0%, 0%);
}
CSS – The Language
Using Shorthand
Many of the CSS properties allow you to write a shorthand version
as well as a more expanded version, e.g.
border: 1px solid Black;
This is an easy way to quickly set all four borders of the HTML to
the same values. If you want more control, you can use the
expanded version, like this:
border-top-width: 1px;
border-top-style: solid;
border-top-color: Black;
border-right-width: 1px;
border-top-style: solid;
border-top-color: Black;
etc
Styling the Planet Wrox Homepage
Open in Source View the file Default.aspx.
Right before the welcome text you created in the previous chapter, add the following
HTML. Make sure you replace the existing HTML in the <form> element:
<form id="form1" runat="server">
<div id="PageWrapper">
<div id="Header">Header goes here</div>
<div id="MenuWrapper">Menu goes here</div>
<div id="MainContent">
</div>
<div id="Sidebar">Sidebar goes here</div>
<div id="Footer">Footer goes here</div>
</div>
<h1>
Welcome to Planet Wrox</h1>
...
</form>
Styling the Planet Wrox Homepage
Copy from the previous slide the heading and the paragraphs and paste them
between the opening and closing tags of the MainContent <div>. This moves
your existing code into the main content block.
<form id="form1" runat="server">
<div id="PageWrapper">
<div id="Header">Header goes here</div>
<div id="MenuWrapper">Menu goes here</div>
<div id="MainContent">
<h1>Welcome to Planet Wrox</h1>
...
</div>
<div id="Sidebar">Sidebar goes here</div>
<div id="Footer">Footer goes here</div>
</div>
</form>
Styling the Planet Wrox Homepage
Open the file Styles.css from the Styles folder. If you
added some code to this file during an earlier example,
remove the code first.
At the top of the page, type the following code that
uses an ID selector to select the Header <div>:
#Header
{
}
Styling the Planet Wrox Homepage
Put your mouse between the curly braces and choose StylesBuild
Style from the main menu. From the Modify Style dialog box (see
below) choose Background and background color set to silver
Styling the Planet Wrox Homepage
Switch to Position category and set width 844 px and
height 83 px. Click OK. Your code should be this now:
#Header
{
background-color: #C0C0C0;
width: 844px;
height: 83px;
}
Styling the Planet Wrox Homepage
Repeat the previous steps to create the
following rules:
*
{
font-family: Arial;
}
h1
{
font-size: 20px;
}
#PageWrapper
{
width: 844px;
}
#MenuWrapper
{
width: 844
px;
}
#MainContent
{
width: 644px;
float: left;
}
#Sidebar
{
background-color: Gray;
width: 200px;
float: right;
}
#Footer
{
background-color: #C0C0C0;
width: 844px;
clear: both;
}
Styling the Planet Wrox Homepage
When you’re done, save and close the file Style.css
Open the file Default.aspx and switch to Design View.
From the Solution Explorer, drag the file Styles folder
onto the page.
VWD inserts code in the head section of the page in
Markup View that attaches the style sheet to the
document (see next slide).
Styling the Planet Wrox Homepage
<head runat="server">
<title></title>
<style type="text/css">
.style1
{
color: #FF3300;
}
</style>
<link href="Styles/Styles.css" rel="stylesheet" type="text/css" />
</head>
Styling the Planet Wrox Homepage
Finally, save the changes to all open documents (press Ctrl+Shift+S)
and then request Default.aspx in your browser (Ctrl+F5). Your screen
should look something like this:
Styling the Planet Wrox Homepage
Why the width of 844px? Because it fits nicely on screen with size 1024X768px.
Note that the MainContent area and the Sidebar are positioned next to each
other. This is done with the CSS float property:
#MainContent
{
width: 644px;
float: left;
}
#Sidebar
{
background-color: Gray;
width: 200px;
float: right;
}
Styling the Planet Wrox Homepage
To end the float, the Clear property is used
#Footer
{
background-color: #C0C0C0;
width: 844px;
clear: both;
}
To tell the browser what styles to apply, you link the style sheet in
the head of the page:
<link href="Styles/Styles.css" rel="stylesheet" type="text/css" />