1 / 37

Cascading style sheets - CSS

Cascading style sheets - CSS. Separate the content from the style! More flexible (changing one style definition in the style sheet will change the entire site) Consistent design Less work for larger sites (more overhead) CSS1-’96 supported by IE 4, Netscape 4

cilicia
Download Presentation

Cascading style sheets - CSS

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 - CSS • Separate the content from the style! • More flexible (changing one style definition in the style sheet will change the entire site) • Consistent design • Less work for larger sites (more overhead) • CSS1-’96 supported by IE 4, Netscape 4 • CSS2-’98 supported by IE 5, Netscape 6

  2. Cascading Style Sheets (CSS) • Like HTML, style sheets must use a common language and follow common rules. This language is known as Cascading Style Sheets, or more simply, CSS. • CSS has been developed by the WWW Consortium (www.w3c.org), the same organization that develops standards for HTML. • CSS is designed to augment HTML, not replace it. • CSS is a whole new way of formatting Web pages. • CSS provides several tools not available with standard HTML.

  3. Type of style rules • Inline style: • adds styles to each individual tag within the HTML file (single section) • Embedded or global style: • a style is applied to the entire HTML file. The style declarations are in the header (web page) • Linked or external style: • links the HTML file to a text file containing the style declaration. Gives a consistent look across pages (web site)

  4. Components of a CSS Style The three parts to a CSS style: selector, property, and value. • The selector is the HTML tag you are formatting (e.g. H1), • The property is the attribute you want to change (e.g. font, color). • Each property is set to a value. Every property (i.e. attribute) and its value are separated by a colon (:). Recall that we previously assigned attribute/value pairs by using the equals sign. However this syntax is not correct (does not work) in CSS. If you include multiple groups of property/value pairs, each group must be separated by semicolons (;).

  5. Property / Value Pairs Example of property / value pairs separated by semicolons: font-family:Arial; font-style:italic; font-weight:bold; color : blue Compare how you set a style with HTML syntax v.s. CSS syntax: • HTML syntax: color=“blue”  deprecated • CSS syntax: style=“color:blue”

  6. Inline style (in body) <body><h3 style=“font-family:Arial, Times; font-style:italic; color:green”> This is H3, Arial, italic and green </h3> <h3>This is simply H3</h3> </body> <tag style=“attribute1:value1;attribute2:value2 …”> This is H3, Arial, italic and green This is simply H3

  7. Inline Style Examples The style <body style="color:blue"> body is the selector, color is the property, and blue is the value. In the style <body style="background-color:silver"> body is the selector, background-color is the property, and silver is the value. These tags have their usual </body> closing tags.

  8. Inline Style Examples In the style <p style="font-family:Arial; font-weight:bold"> p is the selector, font-family and font-weight are the properties, and Arial and bold are the values. In the style <p style="font-size:300%; color:red"> p is the selector, font-size and color are the properties, and 300% and red are the values. These tags have their usual </p> closing tags.

  9. span, div, and p Tags The previous styles show you how to change the default style of a tag. What if you want to apply a style to just a section of text (one word, a few words, a sentence, a paragraph)? You can use the span or div or p tags, and then apply a style(s): <span style="font-style:italic"> Hey! </span> <div style="color:blue"> Good night… </div>

  10. Differences between span, div, p span tags are usually used to format a small amount of text, such as a single word or sentence. ptags are typically used to format individual paragraphs div tags are usually used to format even largers segments of a web page, such as a table of contents. • Since div tags specify a division or section of the web page, the tag includes additional formatting, namely, a line break before and after the <div> and </div>. • (This is similar to the additional line breaks automatically placed after <h> tags).

  11. Example of the Span tag <body> This sentence has one word in <span style="color:#0000FF;"> blue </span> and the rest in standard text color. <span style="color:#00DD45;">This sentence is in green.</span> <p style="font-style:italic; font-size:200%">Note how unlike tags such as ‘h’ ‘p’ or ‘div’, the ‘span’ tag doesn’t apply extra formatting such as new lines. </p> </body>

  12. Embedded style sheet (in header) <head><style> h3 {font-family:Arial; font-style:italic; color:green}</style> </head><body> <h3>This is H3, Arial, italic and green</h3> <h3>And so is this H3</h3> </body> <style> selector {attribute1:value1; attribute2:value2 …}</style> This is H3, Arial, italic and green And so is this

  13. External style sheet (in header) • Create a text file containing all style declarations: • File should have extension “.css” such as: mystyle.css • Link, or import that file to the HTML file using special tags in the header. <link href=“URL” rel=“stylesheet” type=“text/css”> mystyle.css OR @import or multiple LINK tags allow you to use more than one style sheet in the same document <style> @import url(“mystyle.css”)</style>

  14. Using CSS Style Types • If you need to format a single section in a Web page, you’d probably use an inline style. • An embedded style is applied to various sections within a Web page • Create styles that apply to an entire Web site by creating a text file containing style declarations. • Most style sheets have the extension “.css”, though this is not a requirement. • Within a style sheet, you don’t need <style> tags, just the style declarations.

  15. External Style Examples • http://www.w3schools.com/css/showit.asp?filename=ex1 • http://www.w3schools.com/css/showit.asp?filename=ex2

  16. Setting fonts and attributes • SAFE Font-families: Times New Roman,  text Arial, Helvetica,  headings Courier New  text

  17. Using Font Families • To choose a font-family, use font-family: font1, font2,…. • Examples: body{font-family: Times New Roman, serif} p{font-family: Arial, Helvetica, San-serif} • A browser will display the body text using the first font available in the list above. • Helpful to use a generic family name as the last option.

  18. Font-size style definition font-size: size • h1{font-family: Arial, sans-serif; font-size: 28pt} • Size can be expressed as • Absolute units: cm, mm, pt, in. • Relative units: px, em, ex. • A percentage (of font-size of parental element) • Keywords (absolute): xx-small, x-small,small, medium, large, x-large, xx-large • Keywords (relative): smaller, larger (relative to the font-size of the parental element)

  19. Font styles and weights • font-style: style_type • style_type  normal, italic or oblique • font-weight: weight • weightcan be • a value from 100(lightest) to 900 (boldest) in intervals of 100. • normal or bold • lighter or bolder (relative to the parental element)

  20. Aligning Test • text-align:alignment • Alignmentleft, center, right or justify (like in MS words) • Examples: h1,h2,h3,h4,h5,h6{ font-family: Arial,sans-serif; text-align:center; font-weight:700; } p{font-family: Times new roman,serif; text-align:justify;}

  21. Combining styles • A linked style sheet can help you maintain a consistent look and feel throughout your Web site • If you want a certain page to have additional styles, you can include styles in the head of that particular HTML document • If you want just one section of a page to look different, you might use the inline styles with a <div> or <span> tag.

  22. Combining styles • The @import tag must be the first element within the STYLE tag • Embedded style declarations should come after the @import commands • If two style sheets define competing style, the innermost style sheet wins Style precedence: inline > global > external > browser

  23. CSS control of Lists • Style declarations for list elements • (applicable to <ul>, <ol> and <li> tags). • list-style-type : type • disc, circle, square, none (<ol> or <ul>) • decimal (“decimal-leading-zero” is not a valid value) • lower-roman, upper-roman • lower-alpha, upper-alpha • In IE, specify an image for use as a label (<ol> or <ul>) • list-style-image: url(image) • warnings: • does not work in Netscape 4.0 • nested lists will automatically inherit this image unless you • set the list-style-image attribute to “none” • Change the position of the labels (semi works in IE) • list-style-position: inside (“outside” is the default)

  24. Defining colors in CSS • Color names (names supported by HTML are also supported by CSS): • body {color: teal} • Hexadecimal form: • body {color: #008080} • RGB color values: • body {color: rgb(0,128,128)} • RGB color percentages: • body {color: rgb(0%,50%,50%)}

  25. Colors on the Web Colors on the web are represented by 3 numbers, called an RGB triplet based on their Red, Green, and Blue components. So you can “mix” any color you like. Each component has 8 bits, so there are 24 bits in all. The intensity of each component is expressed as a value ranging between (0-255) in decimal base. RED= (255, 0, 0)

  26. Background color • Background colors can be applied to almost any element in a Web page not just the page itself. H1 {background-color: rgb(204,102,255)} This is an H1 headers with a purple background

  27. More background styles • Background-image : url (file.jpg) • Background-attachment: scroll | fixed (to allow the image to scroll with the element or not) • Background-repeat: repeat | repeat_x | repeat_y | no-repeat (controls how the image is tiled)

  28. Tables and CSS • Recall that the Height and Width attribute for <table> tag have been depricated. We can use the “style” attribute for CSS instead. • Examples: • <table style="width:50%; height:20%"> • <table style="width:100%"> • <table style="width:500px; height:700px"> • <table style="width:50%; height:200px"> • Similarly for table cells: • <td style="width:value; height:value"> • Other Table Attributes? • Examples from W3Schools

  29. Using class and ID as selectors • An HTML tag can be a selector but sometimes you want to be more specific. For example you have a huge table and you want to format the rows in 4 different ways. Using TR as a selector will allow you only one style definition • Instead you can define a class and then attach it to any HTML tag, without limiting the tag itself to a particular style

  30. Using classes as selectors • Define a class (in the header) by • giving it a name preceded by a period • adding the standard style definitions inside {} <style type=“txt/css”> .bright {font-weight:bold; color:red}</style> • Apply the class to any HTML tag <strong class=“bright”> text </strong><h1 class=“bright”> text </h1>

  31. More on classes • Define a class for a specific tag by • Attaching to the tag selector a dot and the class name • Adding the standard style definition within {} • This particular class can only be applied to the tag used in its definition <style type=“txt/css”> h1.bright {font-weight:bold; color:red}</style> “bright” can be used only for h1

  32. Hyperlink pseudo-class • a: link {style for never visited links} • a: visited {style for visited links} • a: active {style for link that is currently being clicked} • a: hover {style when the mouse cursor is hovering over the link} – rollover effect. a:hover {color=red; text-transform:uppercase; font-weight=bold}

  33. The <div> tag • This HTML tag does not format content • It creates a container for block-level elements • You can assign a CLASS (or ID) to the container <ul><div class=“bright”> <li> First item <li> Second item</div> <li>Third element</ul> The <span> tag is used to mark inline elements like letters, words or phrases

  34. Block-level element boxes • HTML tags that can be treated as block-level elements: • <h1>-<h6>, <p>, <hr> • <blockquote> • <ul>,<ol>, <li> • <div> (Use this as a block container) • <body> • <img> • You can move them around the page, apply borders and background colors to them etc.

  35. Formatting block-level elements Block-level element • The size of margins, border and padding are set with the margin, padding, and border properties respectively • The padding area uses the same background as the element itself • Margins are always transparent padding margin border

  36. Formatting block-level elements CSS Box Model Examples

More Related