1 / 37

Intro to Cascading Style Sheets

Intro to Cascading Style Sheets. IS 373—Web Standards Todd Will. Topics. Intro to Web Page Presentation Cascading Style Sheet Writing Properties Quick Reference CSS Workarounds Conclusion For Next Week. Behavior. Presentation. Structure. Presentation Layer. Key Points

hwexler
Télécharger la présentation

Intro to 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. Intro to Cascading Style Sheets IS 373—Web Standards Todd Will

  2. Topics • Intro to Web Page Presentation • Cascading Style Sheet Writing • Properties Quick Reference • CSS Workarounds • Conclusion • For Next Week CIS 373---Web Standards-CSS

  3. Behavior Presentation Structure Presentation Layer • Key Points • Consumers of your information may be people or machines • People who view your site will use many different: • Browsers • Platforms • Devices • Screen sizes • Site visitors will have various levels of ability • Goal: Universal usability CIS 373---Web Standards-CSS

  4. Test, test, test, test, test, test… • There is no substitute for testing to see if your pages work in various browsers, platforms, screen sizes, devices • For small-scale shops testing is often one of the most difficult steps • Requires an investment in equipment: • PC, Mac, small screen devices, screen reader CIS 373---Web Standards-CSS

  5. What is CSS? • CSS stands for Cascading Style Sheets • Styles define how to display HTML elements • Styles are normally stored in Style Sheets • Styles were added to HTML 4.0 to solve a problem • External Style Sheets can save you a lot of work • External Style Sheets are stored in CSS files • Multiple style definitions will cascade into one CIS 373---Web Standards-CSS

  6. Styles Solve a Common Problem • HTML tags were originally supposed to hold the content of the document with the layout and presentation taken care of by the browser • As browsers added new tags, such as <font> and color attributes to the html, it became more difficult to separate the content of the document from the presentation • To solve this problem, the World Wide Web Consortium (W3C) created Styles  • All major browsers support Cascading Style Sheets. CIS 373---Web Standards-CSS

  7. Style sheets can save work • Styles sheets define HOW HTML elements are to be displayed • Styles are saved in external CSS files but can also be incorporated into the html page • CSS allows developers to control the style and layout of several pages in just one place • Web developers define a style for each html element and then apply that new style to as many pages as you want • After changing the style sheet, all elements on your site can be updated automatically CIS 373---Web Standards-CSS

  8. Multiple Styles Cascade into 1 • Style sheets allow style information to be specified in many ways • Styles can be specified in many ways • Inside a single HTML element, inside the <head> element of an HTML page • An external CSS file • Cascading Order • What happens when more than one style is specified for an element? • If the element is defined in an external css document and then new formatting changes are added within the document • Priority of assigning formatting changes to an html element (from lowest to highest) • Browser default • External style sheet • Internal style sheet (inside the <head> tag) • Inline style (inside an HTML element) • So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser (a default value) CIS 373---Web Standards-CSS

  9. CSS Syntax • CSS Syntax is composed of • A selector • A property • A value • The format of a css formatting change is • Selector {property: value; • property: value;} • Selector • HTML element/tag you wish to define • Property • Attribute you wish to change • Value • Each property can take a value • Property and value are separated by a colon • Each set of property and value are separated by a semicolon • The property and value listing for each element are surrounded by curly braces CIS 373---Web Standards-CSS

  10. Sample CSS Syntax • body {color: black} • Changes the background color to black • Note: If  the value is multiple words, put quotes around the value: • p {font-family: "sans serif"} • Change the paragraph font to sans serif • Note: If you wish to change more than one property, separate each change with a semicolon • p {text-align:center;color:red} • Centers paragraph and changes the text color to red • To make the style definitions more readable, you can describe one property on each line • p { text-align: center; color: black; font-family: arial } CIS 373---Web Standards-CSS

  11. Grouping • Grouping selectors • Separate each selector with a comma • All header elements (h1 through h6) can be assigned the color green by using: • h1,h2,h3,h4,h5,h6 { color: green } CIS 373---Web Standards-CSS

  12. Class Selector • Class selector allows for different styles for the same type of HTML element • Say you want to right align certain paragraphs in your document and center others, you would type: • p.right {text-align: right} • p.center {text-align: center} • You must now use the class attribute in your HTML document: • <p class="right"> This paragraph will be right-aligned. </p> • <p class="center"> This paragraph will be center-aligned. </p> • To apply more than one class per given element, the syntax is: • <p class="center bold"> This is a paragraph. </p> • The paragraph will be styled by the class "center" AND the class "bold". • If you omit the selector, you can apply that class to all html elements, regardless of their type: • .center {text-align: center} • All elements with the class=“center” will be center aligned • <h1 class="center"> This heading will be center-aligned </h1> • <p class="center"> This paragraph will also be center-aligned. </p> • Do NOT start a class with a number as this is not supported by certain browsers CIS 373---Web Standards-CSS

  13. Add Styles to Elements • You can apply a style to html elements of a particular type • The style rule below will match all input elements that has a type attribute with a value of "text": • input[type="text"] {background-color: blue} CIS 373---Web Standards-CSS

  14. The ID Selector • Define styles for HTML elements with the id selector • The id selector is defined as a # • The style rule below will match the element that has an id attribute with a value of "green": • #green {color: green} • The style rule below will match the p element that has an id with a value of "para1": • p#para1 { text-align: center; color: red } • Matches the id attribute to the stylesheet CIS 373---Web Standards-CSS

  15. CSS Comments • Comments explain your code • Good to use comments so you know how something was structured or the reasoning behind it • Comments are ignored by browsers • Comments start with "/*" and end with "*/" • /* This is a comment */ • p { text-align: center; • /* This is another comment */ • color: black; font-family: arial } CIS 373---Web Standards-CSS

  16. Inserting Style Sheets • Three ways to reference a style sheet • External style sheet • Internal Style sheet • Inline styles • Style sheet priorties CIS 373---Web Standards-CSS

  17. External Style Sheets • Ideal when the style is to be applied to many pages • Can change the look of the entire site by changing just one file • Each page must link to the style sheet using the <link> tag • The <link> tag goes inside the head section • <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> • The browser reads the style definitions from the mystyle.css stylesheet and formats the document according to its specifications • External style sheets can be written in any text editor • The file should not contain any html tags • These style sheets are saved with a css extension • Sample CSS file: • hr {color: sienna} • p {margin-left: 20px} • body {background-image: url("images/back40.gif")} • Do NOT leave spaces between the property value and the units • 40px does not equal 40 px in certain browsers CIS 373---Web Standards-CSS

  18. Internal Style Sheets • Internal style sheets should be used when only that document relies upon that unique style • Define internal styles in the head section by using the <style> tag, like this: • <head> • <style type="text/css"> • hr {color: sienna} • p {margin-left: 20px} • body {background-image: url("images/back40.gif")} • </style> • </head> • The browser will now read these style definitions, and format the document according to it. • Note: A browser normally ignores unknown tags CIS 373---Web Standards-CSS

  19. Inline Style Sheets • Inline style sheets mix content with presentation • Use this method sparingly • Normally just use the html attribute if you want to format a single element a certain way • To use inline styles you place the style attribute in the relevant tag • Style attribute can contain any CSS property • Change the color and margin of the paragraph: • <p style="color: sienna; margin-left: 20px"> This is a paragraph </p> CIS 373---Web Standards-CSS

  20. Multiple Style Sheets • If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet • An external style sheet has these properties for the h3 selector: • h3 { color: red; text-align: left; font-size: 8pt } • An internal style sheet has these properties for the h3 selector: • h3 { text-align: right; font-size: 20pt } • If the page with the internal style sheet also links to the external style sheet the properties for h3 will be: • color: red; text-align: right; font-size: 20pt • The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet CIS 373---Web Standards-CSS

  21. CSS Background Properties • Background properties allow for control fo the background color of an element • Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. • Background - A shorthand property for setting all background properties in one declaration • background-color • Sets the background color of an element • “red”, “blue”, hex color • background-image • Sets an image as the backgroundurl(URL) • background-repeat • Sets if/how a background image will be repeated • background-attachment • Sets whether a background image is fixed or scrolls with the rest of the page CIS 373---Web Standards-CSS

  22. Text Properties • Text properties control the appearance of text • Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. • Different properties you can control: • Color • Sets the color of a text • Direction • Sets the text direction • letter-spacing • Increase or decrease the space between characters • text-align • Aligns the text in an element (left, right, center, justify) • text-decoration • Adds decoration to text (none, underline, overline, line-through) • text-indent • Indents the first line of text in an element (length) • text-transform • Controls the letters in an element (none, capitalize, uppercase, lowercase) • white-space • Sets how white space inside an element is handled • word-spacing • Increase or decrease the space between words CIS 373---Web Standards-CSS

  23. Font Properties • Change font, style, and colors of text • Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. • PropertyDescriptionValuesIEFNW3C • Font • A shorthand property for setting all of the properties for a font in one declaration • font-family • A prioritized list of font family names and/or generic family names for an element(Courier, CourierNew) • font-size • Sets the size of a font • xx-small • x-small • Small • Medium • Large • x-large • xx-large • Smaller • larger • font-stretch • Condenses or expands the current font-family • Normal • Wider • narrower • ultra-condensed • extra-condensed CIS 373---Web Standards-CSS

  24. Font Properties (cont) • font-style • Sets the style of the font • normal • italic • Oblique • Bold • italic • font-weight • Sets the weight of a font • Normal • Bold • bolder • lighter • 100 • 200 • 300 • 400 • 500 • 600 • 700 • 800 • 900 CIS 373---Web Standards-CSS

  25. Border Properties • Style and color of an element's border • Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. • Border • Set all of the properties for the four borders in one declaration • border-bottom • A shorthand property for setting all of the properties for the bottom border in one declaration • border-bottom-width • border-style • border-color • border-bottom-color • Sets the color of the bottom border • border-bottom-style • Sets the style of the bottom border • border-style • border-bottom-width • Sets the width of the bottom border • Thin • Medium • thick • border-color • Sets the color of the four borders, can have from one to four colors • border-left • A shorthand property for setting all of the properties for the left border in one declaration • border-left-width • border-style • border-color • border-left-color • Sets the color of the left border • border-left-style • Sets the style of the left border CIS 373---Web Standards-CSS

  26. Border Properties (cont) • border-left-width • Sets the width of the left border • Thin • Medium • thick • border-right • Properties for the right border in one declaration • border-right-width • border-style • border-color • border-right-color • Sets the color of the right border • border-right-style • Sets the style of the right border • border-right-width • Sets the width of the right border • thin • Medium • thick • border-style • Sets the style of the four borders, can have from one to four styles • None • Hidden • Dotted • Dashed • Solid • Double • Groove • Ridge • Inset CIS 373---Web Standards-CSS

  27. Border Properties (cont) • border-top • A shorthand property for setting all of the properties for the top border in one declaration • border-top-width • border-style • border-color • border-top-color • Sets the color of the top border • border-color • border-top-style • Sets the style of the top border • border-top-width • Sets the width of the top border • thin • Medium • thick • border-width • A shorthand property for setting the width of the four borders in one declaration, can have from one to four values • thin • Medium • thick CIS 373---Web Standards-CSS

  28. Margin Properties • Define the space around the html elements • Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. • Margin • A shorthand property for setting the margin properties in one declaration • margin-top • margin-right • margin-bottom • margin-left • margin-bottom • Sets the bottom margin of an element • margin-left • Sets the left margin of an element • margin-right • Sets the right margin of an element • margin-top • Sets the top margin of an element CIS 373---Web Standards-CSS

  29. CSS Padding Properties • The CSS padding properties define the space between the element border and the element content • Negative values are not allowed • The top, right, bottom, and left padding can be changed independently using separate properties • A shorthand padding property is also created to control multiple sides at once. • Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. • Padding • A shorthand property for setting all of  the padding properties in one declaration • padding-top • padding-right • padding-bottom • padding-bottom • Sets the bottom padding of an element • padding-left • Sets the left padding of an element • padding-right • Sets the right padding of an element • padding-top • Sets the top padding of an element CIS 373---Web Standards-CSS

  30. Dealing with Different Browsers • Old Way: Browser sniffing JavaScript • New Way: Standards-compliant code • Your page does not have to be exactly the same in all browsers—in fact, it shouldn’t be • Solutions: • the two-sheet solution… • Media-specific CSS • CSS hacks CIS 373---Web Standards-CSS

  31. The CSS Two-sheet Solution • Older browsers (version 4 and below) don’t recognize @import and have limited support for CSS, so… <html> <head> <link rel=“stylesheet” type=“text/css” href=“safe.css” /> <style type=“text/css”> @import “path/to/style.css” </style> </head> <body> <p>hello world</p> </body> </html> CIS 373---Web Standards-CSS

  32. Media-Specific CSS • CSS defines 10 media types: all, aural, braille, embossed, handheld, print, projection, screen, tty, tv • “all” is the default • Most browsers support “print” and “screen” • Support for “handheld” is spotty—test CIS 373---Web Standards-CSS

  33. Examples of Media-specific CSS <link rel=“stylesheet” type=“text/css” media=“all” href=“core.css” /> <link rel=“stylesheet” type=“text/css” media=“print” href=“print.css” /> <link rel=“stylesheet” type=“text/css” media=“screen” href=“print.css” /> <link rel=“stylesheet” type=“text/css” media=“handheld” href=“handheld.css” /> CIS 373---Web Standards-CSS

  34. CSS Hacks • Most hacks are workarounds for problems with rendering of the CSS box model • All visible elements in CSS are either “block” level or “inline” elements • Default values exist, but you can override these with CSS style rules CIS 373---Web Standards-CSS

  35. The Box Model • Box width is supposed to equal content • In IE 5.x and 6.0 in quirks mode box width is calculated margin+border+padding+content Margin Border Padding Content CIS 373---Web Standards-CSS

  36. Cascading Style Sheets • Allows you to draw out the formatting and presentation of the page to a separate file • Only have to change the display in one place and have it propagate to other pages • Not all browsers support style sheets • Reduces bandwidth costs by 13% • Test, test, test with different browsers, operating systems, etc. to see that it will work well in several different configurations CIS 373---Web Standards-CSS

  37. For Next Week • Learning about scripting • Designing a style sheet homework • Download from course website • Hand in printout of your style sheet, web page source, and web page display • I don’t care how it looks just as long as you fulfill the requirements • Have Fun! CIS 373---Web Standards-CSS

More Related