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 tag: Untitled Page Next, between the opening and closing tags, type the following CSS code:

Writing your first CSS h1 { font-size: 200x; color: Green; } p { color:Blue; font-style: italic; }.RightAligned { text-align: right; }

Writing your first CSS Then, inside the tags enter the following: Welcome to this CSS Demo Page CSS makes it super easy to style your pages. with very little code, you can quickly change the looks of a page. 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 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: I am italic because I have the right ID I am not italic because I have a different ID

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 element and a link appear with a bold typeface: This is normal text but this is Red and Bold This is also normal text but this link is Red and Bold as well

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 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: Because I have a class called Highlight, my text appears in bold This text is NOT bold, as it lacks the Highlight class I am NOT bold because I don’t fall within MainContent

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 element: Header goes here Menu goes here Sidebar goes here Footer goes here Welcome to Planet Wrox...

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. This moves your existing code into the main content block. Header goes here Menu goes here Welcome to Planet Wrox... Sidebar goes here Footer goes here

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 : #Header { }

Styling the Planet Wrox Homepage Put your mouse between the curly braces and choose Styles  Build 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.style1 { color: #FF3300; }

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: