1 / 12

CSS Basics for Web Styling

Learn how to attach CSS to web pages by using style elements and linking CSS files. Explore selectors, properties, values, and inheritance in CSS rules. Discover font families, sizes, and text properties, along with color specifications and setting defaults.

mkaiser
Download Presentation

CSS Basics for Web Styling

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. The Internet 10/11/11 Fonts and Colors CIS 228

  2. Attaching CSS to a Web Page • Style element • Attribute type=”text/css” • Content: one or more CSS rules • Link element (empty element) • Attribute type=”text/css” • Attribute rel=”stylesheet” • Attribute href=”somepath/file.css” • CSS file contains one or more CSS rules • Both <link> and <style> belong in <head>

  3. CSS Rules • Template: selector { property : value+ ; } • Selector identifies 0 or more elements in a document • (Remember a document is a tree of elements) • Element names can be selectors (e.g. blockquote, p, q …) • Property governs an aspect of element presentation • Value specifies a property (e.g. 7, 7px, 7%, red, etc.) • Example: h1, q, em { • background-color: maroon ; • border: 1px solid blue ; • }

  4. Some CSS Properties • color • maroon • grey • background-color • border • border-bottom • font-family • sans-serif • serif

  5. Property Inheritance • Some property values are inherited • e.g. color, font-family • Some are not • e.g. border (why?) • Elements pass inherited values to their children • e.g. em inherits color from p • Inheritance can be overridden by explicit assignment • e.g. em { • color: maroon ; • }

  6. Determining Property Values • What is the value v of property p on element e? • Is there a rule that selects e and defines p? • Only one? that rule gives v • More than one? take the (physically) last one • Is p an inherited property? • Take the value of p for e's parent • Otherwise • Default value • To come: what if there are multiple style sheets?

  7. The Class Attribute • Distinguishes elements having the same name • All Sam's must ware red hats • All Sam's in the drama club must ware red hats • XHTML (and HTML) • Any element (in <body>) can have a class attribute • e.g. <p class=”legalese”>...</p> • CSS • p.legalese { color: red ; } • .legalese { font-size: small ; }

  8. Font Families • Sans-serif • Ariel, Verdana, Geneva, Helvetica, “DejaVu Sans” • Serif • “Times New Roman”, Times, “DejaVu Serif” • Monospace • “Courier New”, Courier, “DejaVu Sans Mono” • Cursive • “Comic Sans”, Cartoon, “Apple Chancery” • Fantasy • Impact, “Last Ninja”, Crush, Papyrus

  9. Font Size • Keywords: • xx-small, x-small, small, medium, large, x-large, xx-large • Absolute size: • Pixels: 14px • Points: 14pt • Relative size: • Reference character: 1.4em • Percentage: 140% • Suggestions: • Default: use keyword (medium or small) in body rule • Otherwise: use relative size measurements

  10. Other Text Properties • font-weight • “bold” or “normal” • font-style • “italic” (“oblique”) or nothing • text-decoration • “underline”, “overline”, “line-through”, “blink”, “none” • line-height • e.g. 1.6em or 160%

  11. Color • Specifying color • 17 named colors • black, white, red, green, blue, aqua, fuchsia, yellow, etc. • Red-Green-Blue triples • rgb(100%, 50%, 25$) • rgb(255, 127, 63) • Hex codes • #FF7F3F • #963 (= #996633)

  12. Setting Defaults • Set defaults for inherited properties on body element • body { • font-family: Verdana, Geneva, “Dejavu Sans”, Arial, san-serif ; • font-size: medium ; • background-color: #FEA ; • Color: #963 ; • } • h1 { font-size: 150% ; } • h3 { font-size: 1.2em ; }

More Related