1 / 28

Introduction to Cascading Style Sheets

Introduction to Cascading Style Sheets. Style sheets are files or forms that describe the layout and appearance of a document Cascading Style Sheets , or CSS , is a style sheet language used on the Web CSS specifications are maintained by the World Wide Web Consortium (W3C)

thad
Download Presentation

Introduction 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. Introduction to Cascading Style Sheets • Style sheets are files or forms that describe the layout and appearance of a document • Cascading Style Sheets, or CSS, is a style sheet language used on the Web • CSS specifications are maintained by the World Wide Web Consortium (W3C) • Three versions of CSS exist: CSS1, CSS2, and CSS3

  2. CSS1 Fonts Text Color Backgrounds Block-level Elements CSS2.1 Positioning Visual Formatting Media Types Interfaces The Evolution of Cascading Style Sheets • CSS3 • User Interfaces • Accessibility • Columnar layout • International Features • Mobile Devices • Scalable Vector Graphics

  3. Ways to Apply a Style Sheet • Three ways to apply a style to an HTML or XHTML document: • Inline Styles: applied directly to a single element in a document • Embedded Styles: applied to the elements of an entire document • External Styles: applied to a group of documents on a web site

  4. Inline Styles • Inline styles are easy to use and interpret because they are applied directly to the elements they affect: <element style=“style1: value1; style2: value2; style3: value3;…”> Example: <h1 style=“font-family:sans-serif; text-align: right”>Scrapbooks</ h1>

  5. Embedded Styles • You can embed style definitions in the document head using the form: <style type=“text/css” media=“all” id=“text” title=“text”> … style declarations … </style> style declarations are of the form: selector { styles separated by semi-colons} The thing that gets the style

  6. Example of Embedded Styles(Using an Element as the Selector)

  7. Example of Embedded Styles(Using an ID as the Selector) • IDs are identifiers of elements in an HTML file. • HTML and XHTML require each id be unique– therefore an id value can only be used once in a document. • An ID can be referenced in a style sheet using #.

  8. External Style Sheets • An external style sheet is a text file that contains style declarations • It can be linked to any page in the site, allowing the same style declaration to be applied to the entire site • The text file scraps.css (with comments):

  9. Applying an External Style Sheet • Either use the link element: <link href=“url” rel=“stylesheet” type=“text/css” media=“all” id=“text” title=“text” /> • Or import one style sheet into another: <style type=“text/css”> @import url(scraps.css); </style>

  10. Cascade Order: Style Precedence When there are multiple styles of the same precedence, the last style has precedence: <style type=“text/css”> h1{color: orange; text-align: center} h1{color: blue} </style> draws blue, centered level 1 headers.

  11. Cascade Order: Style Inheritance • If a style is not specified for an element, it inherits the style of its parent element. This is called style inheritance. <style type=“text/css”> body {color:blue} </style> implies <p> are blue too because the <body> tag is the parent of paragraphs.

  12. Some Important Styles in CSS • Tonight • Color Styles • Text Styles (including Lists) • Next Week • Images Styles and Attributes • Box Model Styles

  13. Color Styles: Working with Color in HTML • Using color will make your web pages: • visually interesting • eye-catching for the reader • HTML is a text-based language, requiring you to define your colors in textual terms • HTML 4.01 identifies a color in one of three ways: • by the color value (2 ways) • by the color name • HTML 5 adds HLS and color transparency

  14. Basic Principles of Color Theory • Any color can be thought of as a combination of three primary colors: red, green, and blue • By varying the intensity of each primary color, you can create almost any color and any shade of color • This principle allows a computer monitor to combine pixels of red, green, and blue to create the array of colors you see on your screen

  15. Adding the Three Primary Colors Primary color model for light

  16. RGB (Red, Green, and Blue) Triplets • Software programs, such as your Web browser, define color mathematically • The intensity of each of three colors (RGB) is assigned a number from 0 (absence of color) to 255 (highest intensity) • In this way, 2553, or more than 16.7 million, distinct colors can be defined • Each color is represented by an RGB triplet, written in HTML as: rgb(R,G,B) (0 <= R,G,B <=255) • Alternatively, the color triplet can also be written as 3 hexadecimal numbers, written in HTML as #rrggbb(00 <= rr,gg,bb <= FF)

  17. RGB Triplets Examples • White has a triplet of (255,255,255), indicating that red, green, and blue are equally mixed at the highest intensity • Yellow has the triplet (255,255,0) because it is an equal mixture of red and green with no presence of blue • In HTML 4.01, the color yellow is specified as • yellow OR • rgb(255,255,0) OR • #FFFF00

  18. The 17 Basic Color Names The 17 basic color names that are recognized by all versions of HTML and XHTML.

  19. Partial List of Extended Color Names Partial list of extended color names

  20. Defining Foreground and Background Colors • Foreground color style: • color: color coloris either the color value or the color name • Background color style: • background-color: color • You can apply foreground and background colors to any block-level element (e.g., <body>, <p>, <h1>, …)

  21. Defining Foreground and Background Colors

  22. Fonts Generic fonts A specific font is a font such as Times New Roman, Arial, or Garamond. The font is installed on a user’s computer A generic font refers to the font’s general appearance

  23. Setting the Font Family • Font style is defined as: font-family: list of comma-separated fonts • Example: font-family: Arial, sans-serif, Courier New • Use like: <p style = “font-family: Arial, sans-serif, Courier New”> Hello, there </p>

  24. Setting the Font Size • The style to change the font size of text within an element: • font-size: length • Absolute units define a font size using one of six standard units of measurement: • Millimeters (mm) - Centimeters (cm) • Inches (in) - Pixels (px) • Points (pt) - Picas (pc) • Relative units • small, medium, large • percentage (e.g., 150%) • em, (capital M) or ex (lowercase x)

  25. Controlling Text Characteristics • Tracking (space between words, default 0) • word-spacing: value • Kerning (space between letters, default 0) • letter-spacing: value • Leading (space between lines, default 1.2) • line-height: length • Indent (default 0) • text-indent: value • Vertical Alignment • vertical-align: value (baseline, sub, super)

  26. Font Styles and Weights • To specify font styles, use the following style: • font-style: type (normal, italic, oblique) • To control font weight for any page element, use the following style: • font-weight: weight (100–900), normal, bold • To change the decoration of your text, use the following style: • text-decoration: type (underline, overline, line-through, blink)

  27. List Styles • To change the marker displayed in a list, apply the style: list-style-type: type;

  28. More List Styles To insert a graphic image as a list marker, use the style: list-style-image: url(url); To set the position of list markers, use the style: list-style-position: position; where positionis inside or outside. To define all of the list style properties in a single style, use the style: list-style: type url(url) position; To set the indentation of a list, apply the style: padding-left: size; where sizeis the length the list should be indented.

More Related