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

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

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

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

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

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

12. What CSS is? CSS = Cascading Style Sheets

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

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

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

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

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

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

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

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

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

22. Inline Style Affects individual HTML tag...... some text

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

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

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

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

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

28. Designing CSS

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

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

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

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

33. The most frequently used HTML elements

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

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

36. CSS1 Text Properties

37. Setting Font Properties

38. Boxes Properties

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

40. Create External Cascading Style Sheets with Visual Studio

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

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

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

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

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

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

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

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

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

50. Using template for web design

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

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

53. Free Web templates http://www.freewebtemplates.com/templates/html http://www.freewebsitetemplates.com/

54. Practicing

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

56. Examples CSS navigation menu http://www.webcredible.co.uk/user-friendly- resources/css/css-navigation-menu.shtml