1 / 56

Web Design with Cascading Style Sheet

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

lizina
Télécharger la présentation

Web Design with Cascading Style Sheet

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Design with Cascading Style Sheet Lan Vu

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

  3. Introduction to CSS

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

  5. 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

  6. 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.

  7. 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

  8. 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

  9. 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.

  10. What CSS is? CSS = Cascading Style Sheets

  11. 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

  12. 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

  13. 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

  14. 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

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

  16. 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>

  17. 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; }

  18. Applying CSS to HTML • Internal Style Sheets • Inline Styles • Embedded style sheets • External style sheets

  19. 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

  20. Inline Style Affects individual HTML tag <html> ... <body> ... <p style=“font-family: Arial, sans- serif; ”>some text</p> </body> </html>

  21. 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>

  22. 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

  23. 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>

  24. 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

  25. 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

  26. Designing CSS

  27. 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; }

  28. 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>

  29. 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> …

  30. 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> …

  31. The most frequently used HTML elements

  32. 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)

  33. 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)

  34. CSS1 Text Properties

  35. Setting Font Properties

  36. Boxes Properties

  37. CSS Properties • Visit here for full list of properties • http://msdn.microsoft.com/en-us/library/ms531205(VS.85).aspx

  38. Create External Cascading Style Sheets with Visual Studio

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

  40. 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

  41. 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.

  42. 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.

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

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

  45. 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:

  46. 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.

  47. 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

  48. Using template for web design

More Related