Cascading Style Sheets - PowerPoint PPT Presentation

cascading style sheets n.
Skip this Video
Loading SlideShow in 5 Seconds..
Cascading Style Sheets PowerPoint Presentation
Download Presentation
Cascading Style Sheets

play fullscreen
1 / 32
Cascading Style Sheets
Download Presentation
Download Presentation

Cascading Style Sheets

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Cascading Style Sheets

  2. Lecture Overview • Overview of Cascading Style Sheets (CSS) • Ways to declare a CSS • CSS formatting capabilities • New features in CSS3

  3. Introduction to CSS • A trend in Web page design is to separate the document structure and content from the document formatting • Cascading Style Sheets are the preferred XML way to do this • I will use them extensively in this course • I will (try) not to use the old deprecated methods

  4. CSS Versions • CSS 2 is the current version supported by most browsers • CSS 3 is in the “draft” state. The standard is broken down into several modules • I’ll talk about CSS 3 and where we are

  5. Style Rules (1) • Style rules format “things” • The things we format are defined by the selector • Element names • Classes • IDs

  6. Style Rules (2) • Style rules are made up of a property and a value • A colon separates a property and its value • Multiple property:value pairs are connected with a semi-colon as in property:value; property:value

  7. Style Rules (3) • Property / value pairs are enclosed in a selection block • A selector precedes the declaration block

  8. Types of Selectors • There are different types of selectors • Each has a different level of “specificity” • A class within an element • An id within an element • An element within an element

  9. Element in Element • It’s possible to apply styles to an element only when it appears inside of another element • Example to format <em> only inside of <code> code em{color: #800000;}

  10. Element in Class • Classes allow you to restrict the selector by setting the class attribute of some other element • Class named begins with a period • Followed by the developer-chosen class name • Followed by the typical { property:value;property:value}

  11. Declaring a Class (Example) • Declare a class named MyClass (name begins with a dot (.)) .MyClass {color:aqua} Declare a class that will be applied only to <p> tags p.MyClass{color:aqua}

  12. Using a Class (Example) • Use the class attribute of an element to apply the style • The value is the same as the CSS class name • Example to format the paragraph using the CSS class named MyClass: <p class="MyClass">Formatted using class MyClass.</p>

  13. ID Selectors • They are similar to inline styles but allow a style to be referenced through an element’s id attribute • One-to-one correspondence between the selector and style • Use these to format blocks with <div> and <span>

  14. ID Selectors (2) • The declaration is similar to a class • Use # instead of . in the CSS file • Example to format the element whose id attribute has a value of #TestID #TestID { }

  15. When rules collide • Simply put, the more specific rule overrides the more general rule • Style rules are inherited

  16. Using CSS – The Basics • Using CSS is (usually) a two-part process • Declare a style • Use the style to format an element, such as a paragraph • One style can be used to format many elements

  17. Three ways to Declare a Style • Inline • The style is declared as part of the element declaration in the element’s body • We really don’t use these much • Embedded • Declared in the header of the Web page (<head>) element • External • The style is declared in a CSS page and used by the referencing HTML page

  18. Inline Style Declaration • Set the style property of an element • The property’s value contains a style declaration as mentioned in the previous slide • See InlineStyle.htm in the corresponding chapter example

  19. Inline Style Declaration (Example) • The style attribute contains the style declaration <p style="padding: 10px; margin: 10px; font-family: ‘arial'; font-size: 10pt; font-weight: bold; border: thin groove #000080; width: 300px;" > Some text </p>

  20. Embedded Style Sheets • Embedded (internal) style sheets appear inside of a <style> element in the <head> section • Multiple styles can be declared • You can declare styles for common HTML elements such as <p> or anything else

  21. Embedded Style Sheets (Syntax) • Each style has the following syntax • selector { property:value;property:value} • selector contains the HTML5 tag, class, id • Note the <> characters do not appear • The property:value syntax is the same as before • Note that the {} characters enclose the style • See EmbeddedStyle.htm

  22. Embedded Style Sheets Example

  23. External Style Sheets • Its just a file with an extension of .css • Its contents are the same as the contents of a <style> element • Reference an external style sheet using the <link> tag in an XHTML document • It’s possible to reference several external style sheets using multiple <link> tags

  24. Using the <link> Tag • The <link> tag has 3 important attributes • rel – The relationship between the current document and the linked document • Always “stylesheet” • type – MIME type • Always “text/css” • href – The URL of the linked CSS • Absolute and relative URL are permitted

  25. Using the <Link> Tag (Example) • Link to the CSS named using a relative directory reference <link rel=“stylesheet" href="MainStyle.css" type="text/css" /> • See ExternalStyle.htmand MainStyle.css

  26. Conflict Resolution • It’s possible that an inline, internal, or external style element will conflict • Styles are applied in the following order • External style sheets • Embedded style sheets • Inline styles • Thus, inline styles will override embedded and external styles

  27. .NET and CSS • Visual Studio .NET knows how to • Create cascading style sheets • Create custom styles

  28. Creating a CSS in .NET • From an open project • Click Project, Add New Item • Select Cascading Style Sheet

  29. Creating a CSS in .NET (Illustration)

  30. CSS in .NET (Illustration)

  31. CSS in .NET (Illustration)

  32. Using CSS in .NET • .NET validates the <link> element • .NET validates the stylesheet itself • Intellisense also works as you would expect