redi-apr-6-2023.md

• Agenda: continue to work on biography sites, focus on text formatting

• Text formatting:

  • Try inspecting a webpage, you see the HTML structure of the page and the CSS
  • Text formatting makes a website readable, makes the text clear and easy to read
  • Two important factors: color + color contrast, size
  • Text can have different sizes, can be absolute (always the same size) or relative (resized based on elements around it, or based on device size)
  • Users can zoom in on text in their browsers, but usually when we write HTML and CSS we want to make sure that the text is large enough and clear for all screens and users
  • The "standard" font size is 16px, and it is recommended to not make text smaller than that on desktop computers (it may be smaller on mobile)

• Headers (h1, h2, h3...) and paragraphs (p) have a default font size. For example, h1 is larger than h2.

• All text tags have default properties, including color, weight (bold vs. normal), size, and more

• em is a unit that makes a font size relative based on the size of the screen. So you could size a font like font-size: 1em

• List elements (li) also have default styles

• There are also some HTML elements that apply a style, such as <em> and <i> (both of which make the text between them italicised) and <strong> and <b> (both of which make the text between them bold). If you inspect the CSS for text that is between elements like these, you will see some CSS applied. For example, this text: <p>My paragraph has <em>italic text</em> and <strong>bold text</strong></p> - the text between <em> would have the CSS font-style: italic

  • There is also <pre> for "preformatted," which displays exactly as written and usually uses a different font. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre
  • You can use <pre> to display HTML tags. If you want to show HTML on a page, normally the page will interpret what you are writing as more HTML! So you can wrap HTML in <pre> tags to display the tags you wrote to the user
  • <code> also lets you show a code block

• Descendent selectors:

  • You can combine CSS selectors to be more specific. The simplest way to do this is with a descendent combinator, adding two selectors with a space between them:

  <ul>
    <li>
      < symbol
      <ul>
        <li>Is called a "less than" symbol</li>
        <li>It may also be referred to as "left arrow"</li>
      </ul>
    </li>
  </ul>

  /* This applies to ALL li elements */
  li {
    color: orange;
  }
  
  /* This applies only to li items iniside ANOTHER li element (can be deeply nested) */
  li li {
    color: green;
    list-style-type: square;
  }

• font-family:

  • Changes how the text looks to the user
  • Gives a page a certain look and feel
  • There are a few generic font names like sans-serif, serif, monospace, and cursive.
  • There are also many other comon vonts like arial, verdana, times new roman, and more
  • If you write multiple font names in a row separated by commas, it means that the browser should try the first one, and if it does not know that font, it will fall back to the second (or third or fourth)
  • For example: font-family: 'Lucida Console', 'Courier New', 'Courier'. My browser does not have Lucida Console, so it shows the text in Courier New

• We can also apply colors to our text, both to change the text color and the background color

  • <mark></mark> is an HTML element that highlights the text, applying a background color
  • We can use the color: css attribute to set color on our text
  • It's important to have high contrast between your text and the background. Black on white is very high contrast. Yellow on white is not very high contrast, making it hard to read
    • If you have set a background color, as well as the color of your text, and you inspect your page with the browser's inspect tools, you can click on the color next to your CSS property to get a contrast ratio that will tell you if your contrast is high enough (see screenshot)

• Text alignment:

  • Text can be aligned on the left, the right, or in the center. There are also other values like justify (which makes the text take up all of the space available)
  • The default text alignment is on the left side
  • We can overwrite it using text-align: center (or right or justify or many other values)
  • Vertical alignment is tricky. There is a vertical-align CSS property, which works, but only if you have a parent element that has enough empty space to move your text. You may find it difficult to vertically align elements on your page - we'll get to that with flexbox!

• Borders:

  • The CSS border property is a shorthand for several different CSS properties
    • Writing border: 1px solid black is the same as writing three separate CSS properties:
    • border-width: 1px
      • This is also shorthand for four CSS properties, border-top-width, border-right-width, border-bottom-width, border-left-width
    • border-style: solid
      • Same here
    • border-color: black
      • Same here
    • So even though you can use many separate CSS properties to create your border, it's much more common to use the border shortcut

• Background color:

  • You can use the CSS background-color property to change the background color of an element
  • border-radius rounds the corners of the an element, which is visible when you have a background color

• Exercise: use what we have learned about font families, sizes, and colors, as well as the HTML tags we learned about, to style text on our biography pages