C4 Notes.docx - Cascading Style Sheets offer many benefits to web designers CSS lets you separate style information from HTML allowing you to provide

C4 Notes.docx - Cascading Style Sheets offer many benefits...

This preview shows page 1 - 3 out of 5 pages.

Cascading Style Sheets offer many benefits to web designers. CSS lets you separate style information from HTML, allowing you to provide style sheets for different destination media as your web site requires. You can control the display characteristics of an entire web site with a single style sheet, making maintenance and enhancements of display information a less taxing chore. You can express a wide range of style properties that increase the legibility, accessibility, and delivery of your content. You can build page layouts, either flexible, fixed, or responsive to suit your user and content needs. As you will see in this chapter and through the rest of the book, CSS is easy to learn and apply to your web design projects. The type attribute instructs the browser that the style has been written in plain text and is using CSS. Currently, no other options exist, but adding the attribute now future-proofs your document: If another option is developed later, future browsers will not have to guess what your page uses. Many CSS properties require that you specify a unit of measurement, such as spacing between elements, border widths, and font size. CSS1: contained properties to control fonts, color, text spacing and alignment, padding and borders CSS2: added positioning, media types and other enhancements. Recommendation is final stage of development by W3C. CSS style rules: express the style characteristics for HTML element. Composed of two parts: Selector : determine the element to which the rule is applied. Declaration : contained within curly brackets & details the exact property values. Has property: quality or characteristics eg color, font size, margin followed by ( : ) and value: precise specification of the property, blue for color, 125% font size, 30px for margin followed by ( ; ) Style sheet: set of style rules> to write and interpret <p> P {color: blue; } Combining CSS Style Rules with HTML: Inline style Sheet: Style properties and values can be placed directly within HTML tags using the style attribute./ to be avoided as they are not flexible. Internal Style Sheet: affect only the document in which they reside External Style Sheet : u can state the style rule in one document and affect all pages on a web site/Groups of styles can be combined in a single document, Link Element: lets you establish document relationship and is within <head> Type selector: to apply the rule to every instance of the element in the document Examining Basic Selection Techniques Using type selectors: body {color: red;} h2 {color: red; } p {font-size: 85%; } Grouping selectors:<h1> & <h2> h1 {color: red; } h2 {color: red; } or h1, h2 {color: red; } Combining declarations:<p> p {color: red; } p {font-size: 125%; } Using descendent selectors: <em> p em {color: blue; } ul li em {color: blue; } selects em within li within ul
Image of page 1
Combining: p { Color: blue; Don’t-size: 125%; } Universal selector: lets you quickly select groups elements and apply a style rule. Symbol is* eg * {color: purple; }
Image of page 2
Image of page 3

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture