1 / 14

CSS Box Model and Text Properties

Learn how to attach CSS to a web page, apply CSS rules, and use selectors, classes, and IDs to style elements. Explore text properties like font size, color, and alignment. Understand the box model and how to set padding, borders, and margins.

dominguezl
Download Presentation

CSS Box Model and Text Properties

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/13/11 The Box Model 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” • Attribute media=“screen” (“print”, “handheld”, etc.) • Both <link> and <style> belong in <head>

  3. CSS Rules • Template: selector { property : value+ ; } • Selector identifies 0 or more elements in a document • Element names (e.g. blockquote, p, q …) • Class attribute values (e.g. p.legalese or .legalese) • Id attribute values (e.g. p#signature or #signature) • Property governs an aspect of element presentation • Value specifies a property (e.g. 7px, 7%, red, #777, etc.) • Example: p.legalese, #signature { • color: #0BEAF0 ; • }

  4. 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 • Multiple style sheets are concatenated together

  5. Class and Id Attributes • Distinguish elements having the same name • XHTML (and HTML) • Any element (in <body>) can have a class attribute • At most one element can have an id attribute • CSS • p.legalese { color: red ; } • .legalese { font-size: small ; } • p#signature { font-size: 3em ; } • #signature { border: 1px solid #DEAD29

  6. Some Fonts • 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

  7. 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

  8. 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% • text-align • “left”, “center”, “right”, “justify”, “inherit”

  9. 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)

  10. Deciphering Hex Color Codes • Example: #3FE29B • Separate into color pairs: 3F E2 9B • Replace letters with numbers: 3(15)(14)29(11) • A->(10) B->(11) C->(12) D->(13) E->(14) F->(15) • Multiply first by 16: (48)(15)(224)2(144)(11) • Add: 63226155 • #3FE29B = rgb( 63, 226, 155)

  11. 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 ; }

  12. Some More CSS Properties • padding: 10px • border: 2px dotted #A84E19 • border-width: 2px • border-style: dotted • border-color: #A84E19 • margin: 8em • background-image: url(Images/myDucky.png) • background-repeat: no-repeat • background-position: top center

  13. The Box Model • Element content is surrounded by (optional) boxes: • Padding • transparent space • Border • width • stylesolid double groove outset dotted dashed inset ridge • colorif not specified, same as content text (element color) • Margin • transparent space

  14. Sides • Each box has four sides: • top right bottom left(clockwise ordering) • Properties of each side can be specified separately • border-bottom-style: dotted • padding-left: 10% • Properties of each side can be specified in turn • border-style: none double dotted inherit • margin: 2em 5% 30px 6pt • padding: 4em 8em

More Related