Web Design with Cascading Style Sheet Lan Vu

Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design

Introduction to CSS

Why do we need CSS? Our designing purpose: ▫ Create a theme for website ▫ To have a indentify look throughout our website

Why do we need CSS? How to do that ? ▫ Use a common layout for all pages ▫ Use color of texts, links, buttons and graphics… reflecting that color theme for all page ▫ Use same font set for all page

Why do we need CSS? What have we done until now? ▫ Create a sample page with expected format, layout. ▫ Create specific pages as a copy of this sample page ▫ Modify design on each specific page.

Why do we need CSS? What if we want ? Do the whole design process again with new theme Or modify each existing pages to new design

Why do we need CSS? If your website has 2-3 pages ▫ No problem, I will re-design them. But if your website has 10, 20 … 100 pages ▫ Oh NO! I don’t have time to re-design all pages

Why do we need CSS? Using CSS helps you to save much time on change format, style and theme of your website. CSS even bring you more benefit in design.

What CSS is? CSS = Cascading Style Sheets

What CSS is? A style sheet is a set of rules to tell a web browser how to present the web page content ▫ i.e. how to display HTML elements

CSS Benefits Separate structure from appearance ▫ HTML establishes structure and content of a web page ▫ CSS controls appearance of the page Create consistent look-and-feel across multiple pages Ease of maintenance Reduce HTML file size

CSS structure CSS is a set of rules Sample of style sheet body { font-family: Tahoma, Arial, sans-serif; font-size: 13px; color: black; } h1 { font-size: 19px; border-bottom: 1px solid black }.shaded { background: #d0d0ff; } Rules

Rule Structure Have two parts ▫ Selector: tells a browser which HTML elements in a page will be affected by the rule. ▫ Declaration: tells the browser which set of properties to apply. Sample Style sheet

Slide 17 body { font-family: Tahoma, Arial, sans-serif; color: black; background: white; margin: 8px; } Selector Declaration Property Value Rule Structure

Slide 18 body { font-family: Tahoma, Arial, sans-serif; font-size: 13px; color: black; background: white; margin: 8px; } h1 { font-size: 19px; margin-top: 15px; margin-bottom: 5px; border-bottom: 1px solid black }.shaded { background: #d0d0ff; } First Section Heading Here is the first paragraph, containing text that really doesn't have any use or meaning; it just prattles on and on, with no end whatsoever, no point to make, really no purpose for existence at all. Another Section Heading Another paragraph. CSS:HTML: Applying CSS to HTML

Slide 19 First Section Heading Here is the first paragraph, containing text that really doesn't have any use or meaning; it just prattles on and on, with no end whatsoever, no point to make, really no purpose for existence at all. Another Section Heading Another paragraph. HTML: body { font-family: Tahoma, Arial, sans-serif; font-size: 13px; color: black; background: white; margin: 8px; } h1 { font-size: 19px; margin-top: 15px; margin-bottom: 5px; border-bottom: 1px solid black }.shaded { background: #d0d0ff; } CSS: Applying CSS to HTML

Internal Style Sheets ▫ Inline Styles ▫ Embedded style sheets External style sheets

Slide 21 Adding Styles to HTML... body { font-family: Tahoma, Arial, sans-serif;... } External style sheets Embedded style sheets Inline Styles

Inline Style Affects individual HTML tag some text

Embedded style sheets Affects individual HTML document... p {font-family: Arial, sans-serif;}... some text

External Style Sheets Styles are defined in separate text file (.css) ▫ styles.css, style1.css, style2.css HTML files (.html) have links to style sheet files (.css) ▫ Affect all HTML files that are linked to the style sheet

External Style Sheets styles.css file p { font-family: Arial, Sans-serif; } sample.html file some text

Cascading Order CSS uses an order of precedence to determine which styles to apply when a selector is formatted in different sources The least important style formatting is the browser’s default style settings

The cascading order of precedence for styles, starting with the least important to the most important, is as follows: 1.Browser default 2.External style sheets 3.Internal style sheets 4.Inline styles Cascading Order

Designing CSS

Selector Type Element Selectors H1 {color: purple;} H1, H2, P {color: purple;} body { font-family: Tahoma, Arial, sans-serif; color: black; background: white; margin: 8px; }

Selector Type Contextual Selector: Used when an HTML element can display more than one behaviour (e.g. hyperlinks) CSS: a:link {color: #000} a:visited {color: #000} a:hover {color: #69f} a:active {color: #000} HTML Next page

Selector Type ID Selector ▫ CSS … #red_heading {color: red} #summary {color: red} p#conclusion {color: blue} ▫ HTML … Headline Summary Conclusion …

Selector Type Class Selectors ▫ CSS: ….blue {color: #082984}.red {color: #de2131} ▫ HTML … Headline a summary some text …

The most frequently used HTML elements

CSS Properties Font ▫ Font styles: font family ▫ Type: size, weight, or variant Text ▫ Define the layout of blocks of text ▫ Words and characters ▫ Spacing ▫ Alignment ▫ Transformation (forced uppercase or lowercase) ▫ Decoration (underline, overline, and blinking)

CSS Properties Color and image ▫ Color and background formatting of text and images ▫ Define position of background image Border ▫ Define the style of borders for elements like tables, images, documents ▫ Border properties include width, height, style, color, margins, and padding. Display ▫ Define styles for the structure of the doc. ▫ Placement of elements (block or inline)

CSS1 Text Properties

Setting Font Properties

Boxes Properties

CSS Properties Visit here for full list of properties

Create External Cascading Style Sheets with Visual Studio

Create CSS file 1.Run VS : All program  Visual Studio 2005  Visual Studio Creating CSS file in VS: Choose menu File  New  File

Create CSS file 3.In the New File box, choose General in Categories and then choose Style Sheet in the right list. Finally, click Open button

Create CSS file 4.After a new CSS file is created, you can start to add rules to CSS file by typing CSS code in the editor or using design tools of Visual Studio.

Create CSS file 5.Save your CSS file when you’ve done by selecting File  Save or Save As  enter Filename in the Save box. And now, you have had an CSS to be used in all page of your website.

Add CSS rules There are two ways Typing CSS code in the editor Using design tools of Visual Studio.

Add CSS rules Using design tools for designing 1.On the Styles menu, click Add Style Rule. The Add Style Rule dialog box appears

Add CSS rules 2.In the Add Style Rule dialog box, select one of the following CSS selectors ▫ Element Defines a rule for an element by tag name. ▫ Class name Defines a rule for a CSS class. ▫ Element ID Defines a rule for an element with a specific ID. Enter the element name/Class name/ Element ID and then click OK:

Add CSS rules 3.Find the new style selector and then place the cursor between the braces ( { } ). 4.On the Styles menu, click Build Style. 5.In the Style Builder dialog box, define the style attributes that you want the element to have, and then click OK. The Style Builder dialog box inserts CSS style attributes within the braces ( { } ) of the style selector.

Link Cascading Style Sheets to HTML page After you have defined an external cascading style sheet (CSS) you can link the style sheet to individual HTML Web pages to apply the styles to the elements on the page. 1.Open the HTML page in Visual Studio 2.Select Source view windows 3.Add a link element inside the tags on the Web page. Example: MyStyles.css is the filename of CSS file you’ve created NOTE: Remember to upload all CSS files that you linked to your web pages

Using template for web design

Web template Templates are sample web pages that are designed in a specific theme ▫ Just need to add content to template page ▫ No design effort require Use available template for time saving in web design

Web template A template often include:  One or few sample web pages (HTML, PHP, ASP…)  Cascading Style Sheets Files  Images used in template There are a lot templates available in Internet for free download or charged download A download template need to be customized for best fit your design requirement  knowledge in HTML, CSS is useful.

Free Web templates

Practicing

Creating a template for your website The template include ▫ A sample HTML file with specific layout for your website ▫ A CSS file with rules for design of sample file ▫ Images ( if needed ) Using this template to re-design your existing website

Examples CSS navigation menu resources/css/css-navigation-menu.shtml