560 likes | 689 Views
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
E N D
Overview • Introduction to CSS • Designing CSS • Using Visual Studio to create CSS • Using template for web design
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
Rule Structure Selector Declaration body { font-family: Tahoma, Arial, sans-serif; color: black; background: white; margin: 8px; } Value Property
Applying CSS to HTML CSS: 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; } <body> <h1>First Section Heading</h1> <p> 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. </p> <div class="shaded"> <h1>Another Section Heading</h1> <p> Another paragraph. </p> </div> </body>
Applying CSS to HTML HTML: <body> <h1>First Section Heading</h1> <p> 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. </p> <div class="shaded"> <h1>Another Section Heading</h1> <p> Another paragraph. </p> </div> </body> CSS: 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; }
Applying CSS to HTML • Internal Style Sheets • Inline Styles • Embedded style sheets • External style sheets
Adding Styles to HTML External style sheets <head> ... <link rel="stylesheet" type="text/css" href="myStyles.css" /> <style type="text/css"> body { font-family: Tahoma, Arial, sans-serif; ... } </style> </head> <body> ... <div style=“padding:2px; ... "> ... </body> • Embedded style sheets Inline Styles
Inline Style Affects individual HTML tag <html> ... <body> ... <p style=“font-family: Arial, sans- serif; ”>some text</p> </body> </html>
Embedded style sheets Affects individual HTML document <html> <head> ... <style type=“text/css”> p {font-family: Arial, sans-serif;} </style></head> <body> ... <p>some text</p> </body> </html>
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 <html> <head> ... <link href=“styles.css” rel=“stylesheet” type=“text/css” /> </head> <body> ... <p>some text</p> </body> </html>
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
Cascading Order • The cascading order of precedence for styles, starting with the least important to the most important, is as follows: • Browser default • External style sheets • Internal style sheets • Inline styles
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 ContextualSelector: 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 <a href=“nextpage.html”>Next page</a>
Selector Type ID Selector • CSS … #red_heading {color: red} #summary {color: red} p#conclusion {color: blue} • HTML … <h1 id=“red_heading”>Headline</h1> <p id=“summary”>Summary</p> <p id=“conclusion”>Conclusion</p> …
Selector Type Class Selectors • CSS: … .blue {color: #082984} .red {color: #de2131} • HTML … <h1 class=“red”>Headline</h1> <p class=“red”>a summary</p> <p class=“blue”>some text</p> …
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)
CSS Properties • Visit here for full list of properties • http://msdn.microsoft.com/en-us/library/ms531205(VS.85).aspx
Create CSS file • Run VS : All program Visual Studio 2005 Visual Studio 2005 • Creating CSS file in VS: Choose menu File New File
Create CSS file • 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 • 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 • 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 • On the Styles menu, click Add Style Rule.The Add Style Rule dialog box appears
Add CSS rules • 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 • Find the new style selector and then place the cursor between the braces ( { } ). • On the Styles menu, click Build Style. • 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. • Open the HTML page in Visual Studio • Select Source view windows • Add a linkelement inside the <head></head> tags on the Web page. Example: <link href="MyStyles.css" rel="stylesheet" type="text/css" /> 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