Chapter 8. Styling with Fonts and Colors: Expanding Your Vocabulary

  • Customize the fonts in your pages with the font-family property.
    • A font-family is a set of fonts that share common characteristics.
    • There are five font families: sans-serif, serif, monospace, cursive, and fantasy.
  • Control the size of your fonts with the font-size property.
  • Add color to your text with the color property.
  • Affect the weight of your fonts with the font-weight property.
  • Add even more style to your text with the text-decoration property.
    • overlines, underlines, and line-throughs
    • Underlined text is often confused as linked text by users, so use this property carefully.
  • The font-style property is used to create italic or oblique text. Italic and oblique text is slanted.
  • Always make the last font a generic font like serif or sans-serif, so that the browser can make an appropriate substitution if no other fonts are found.
  • FontSquirrel is a great place to find open source, free fonts that you can upload to your server.
  • To use a font that your users may not have installed by default, use the @font-face rule in CSS.
  • Font sizes are usually specified using px, em, %, or keywords.
    • If you use pixels (“px”) to specify your font size, you are telling the browser how many pixels tall to make your letters.
    • You can specify font sizes using em, which, like percentage, is another relative unit of measure. font-size: 1.2em;
    • em and % are relative font sizes, so specifying your font size using em and % means the size of the letters will be relative to the font size of the parent element.
    • You can specify a font size as xx-small, x-small, small, medium, large, x-large, or xx-large and the browser will translate these keywords into pixel values using defaults that are defined in the browser.
    • Using relative sizes for your fonts can make your pages more maintainable.
  • In most cases, the default body font size will be 16 pixels.
  • You need to combine the two values into one rule to get both text decorations.

@font-face{
    font-family: "EMblema One";
    src: url(../journal-copy/EmblemaOne-Regular.woff),
         url(../journal-copy/EmblemaOne-Regular.ttf)
}
body{
    font-family: Verdana, Geneva, Arial, sans-serif;
    font-size: small;
}
h1,h2{
    color:#c60;
    border-bottom: thin dotted #888888;
}
h1{
    font-family: "Emblema One", sans-serif;
    font-size: 220%;
}
h2{
    font-size:130%;
    font-weight: normal;
}
blockquote{
    font-style: italic;
}

Word list

  • hook
  • barb
  • tad
  • oblique
  • bounce
  • hex

Chapter 9. The Box Model: Getting Intimate with Elements

  • line-height property allows you to specify the amount of vertical space between each line of your text.
  • All elements are treated as boxes: paragraphs, headings, block quotes, lists, list items, and so on. Even inline elements like <em> and links are treated by CSS as boxes.
  • Boxes consist of the content area and optional padding, border, and margin.
    • The margin provides space between your element and other elements, while padding gives you extra space around your content.
    • Two other properties also affect the background image: background-position and background-repeat.
      • there is a no-repeat value for the background-repeat property.
      • The background-position property sets the position of the image and can be specified in pixels, or as a percentage, or by using keywords like top, left, right, bottom, and center.
    • For padding, margins, and even borders, CSS has a property for every direction: top, right, bottom, and left.
    • The border-style property controls the visual style of the border. There are eight border styles available, from a solid line to dotted lines to ridges and grooves.
    • The border-width property controls the width of the border. You can use keywords or pixels to specify the width.
    • The border-color property sets the color of the border. This works just like setting font colors; you can use color names, rgb values, or hex codes to specify color.
    • Just as with margins and padding, you can specify border style, width, or color on any side (top, right, bottom, or left)
    • You can create rounded corners on all four corners, or just one corner, or any combinatio.
      • border-radius:15px;
      • border-top-left-radius:3em;
      • border-bottom-right-ridus:0px;
  • An element can’t have multiple ids; and you can’t have more than one element on a page with the same id.
    • an element can have an id and also belong to a class
    • an id selector should match only one element in a page.
  • To select an element by its id, you use a # (hash mark) character in front of the id (compare this to class, where you use a . [dot] in front of the class name).
  • Class names should begin with a letter, but id names can start with a number or a letter. Both id and class names can contain letters and numbers as well as the _ character, but no spaces.
  • You can use more than one stylesheet in your HTML. If two stylesheets have conflicting property definitions, the stylesheet that is last in the HTML file will receive preference.
  • You can target devices by using media queries in your <link> element or the @media rule in your CSS.

#guarantee{
    line-height: 1.9em;
    font-style: italic;
    color: #444444;
    font-family: Georgia, 'Times New Roman', Times, serif;
    border-color: white;
    border-width: 1px;
    border-style: dashed;
    background-color: #a7cece;
    padding: 25px;
    padding-left: 80px;
    margin: 30px;
    margin-right: 250px;
    background-image: url(images/background.gif);
    background-repeat: no-repeat;
    background-position: top left;   
}

Word list

  • darn
  • thick
  • indent
  • tweak
  • dash

  • query

<
Previous Post
0902 Learning, reading, and looking for interesting things
>
Next Post
0903 Pose director, web developer, reader