1 / 32

Cascading Style Sheets

Cascading Style Sheets. Lecture Overview. Overview of Cascading Style Sheets (CSS) Ways to declare a CSS CSS formatting capabilities New features in CSS3. Introduction to CSS. A trend in Web page design is to separate the document structure and content from the document formatting

calla
Download Presentation

Cascading Style Sheets

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

More Related