1. 11 Using CSS to Control Appearance Beginning ASP.NET 4.5.1 in C# and VB Chapter 3

2. 2 Objectives You will be able to Use basic features of CSS (Cascading Style Sheets) to control the appearance of your web pages. 2

3. 3 Using CSS Modern websites use CSS to specify layout and appearance of HTML pages Rather than HTML markup. There are three ways to add CSS Directly inside an HTML tag Embedded in the section of a page In a separate file Sharable by multiple HTML files

4. Download Example Create a directory for testing examples on your desktop. Download the Hello World page from the class web site into your test directory. http://www.cse.usf.edu/~turnerr/Web_Application_Design/Downloads/ 003_Using_CSS File hello.html http://www.cse.usf.edu/~turnerr/Web_Application_Design/Downloads/ 003_Using_CSS Details on following slides. 4

5. Download Example 5 Right click on file name, hello.html Then select Save Link as...

6. Download Example In the Save As window, navigate to your test directory. 6 Click Save.

7. View hello.html Open your test directory. 7 Double click on hello.html to open the page in your default browser.

8. View hello.html 8 Open the file in Visual Studio. hello.html in Chrome

9. Open the file in Visual Studio. 9 Back in your test directory, right click on hello.html. Select “Open with”. Then select Microsoft Visual Studio

10. 10 Add In-Line Style Attribute Save file. Note intellisense

11. 11 Back in your test directory Double click on the file to open it in your default browser.

12. 12 Page in Chrome

13. 13 Style Rules in Tag Apply to everything inside the body. Additional rules can be added in enclosed HTML tags. Higher level rules can be overridden with additional CSS rules in enclosed elements. When there are differences the applicable rule is the one closest to the element. This is the meaning of cascading.

14. 14 Style for a Save the file, then click the “Reload” button on the browser.

15. 15 Page in Chrome Click here to reload the page.

16. Things to Notice about In-line Style Rules A style rule is a set of property-value pairs. Equal sign between the keyword style and the style rule definition. Each property-value pair is called a declaration. Declarations are separated by semicolons. The entire block of declarations is enclosed in quotation marks. 16

17. 17 Embedded Style Rules CSS rules inside the HTML tags tend to clutter the page. Obscure the structure. Generally better to embed the style rules in the page head. Style rules in the head have to identify the elements to which they apply.

18. 18 Embedded Style Rules Optional in HTML5

19. 19 Embedded Style Rules Selector Declaration Block PropertyValue Declaration

20. 20 Remove Inline Style Attributes Save the file, then click the “Reload” button on the browser.

21. 21 Page with Embedded CSS Effect is the same.

22. Things to Notice about Embedded Styles Selector required to say what the style applies to Definition enclosed in curly brackets No quotation marks No equal sign Name and value still separated by colon Declarations still separated by semicolons 22

23. Things to Notice about Embedded Styles Style applies to all elements of the page with tags that match the selector. In line styles apply only to the element that they are enclosed in (including any elements nested within it.) In line styles have no need for a selector. 23

24. 24 Style Sheet File We can clean up the HTML file even more by moving the CSS out to a separate file. CSS file can be used by multiple pages.

25. Create in Visual Studio File > New File 25

26. 26 A CSS File Save As StyleSheet1.css in same directory as the html file. Cut and paste the embedded style rules.

27. Save StyleSheet in test directory 27

28. 28 Link the CSS File Delete the embedded style sheet. Save the file and reload the page.

29. 29 Page in Chrome Effect is the same. End of Section

30. More Content Open Call_me_Ishmael.txt file from Downloads area of class web site. http://www.cse.usf.edu/~turnerr/Web_Application_Design/Downloads/003_Using_CSS/ Click on file name to open in browser. Copy content to hello.html inside a new 30

31. 31 More Content Hello, World! Call me Ishmael. Some years ago--never mind how long precisely-- having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off--then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.

32. 32 Page in Chrome

33. 33 CSS Classes Allow us to identify elements as belonging to named classes and specify different styling for each class. Class names are arbitrary. Don’t confuse these CSS classes with classes in object oriented programming languages. This is a different use of the word.

34. 34 CSS Classes

35. 35 CSS Classes The dots in front of Heading and Content say that these style rules apply to classes rather than tags.

36. 36 Page in Chrome

37. 37 Dividing Text into Columns Easy in HTML5. column-count:3 Currently requires vendor prefix for most browsers -webkit-Chrome and Safari -moz-Firefox -ms-Internet Explorer -o-Opera

38. 38 Specifying Columns.Content { color:Black; text-align:justify; font-size:small; -webkit-column-count:3; -moz-column-count:3; -ms-column-count:3; column-count:3 }

39. 39 Page in Chrome

40. Learn More about CSS 40

41. 41 Learn More about CSS