Course Notes: Lists, Links, & Fonts

LIST STYLING

List CSS

line-height: controls the spacing between lines, keeping uniform spacing between the list items

list-style-type: sets the type of bullet (none, square, circle, roman numeral, etc)

list-style-position: sets whether the bullets appear inside the list items, or outside (default) before the start of each item

list-style-image:  allows you to use a custom image for the bullet point, limited on controlling the position and size à use background-image in the css of your list instead, set list-style-type to “none”, set the background image to your img url, set the background size to approximately 1.6 rem and adjust as needed, then set background-repeat to no-repeat

Controlling list counting (attributes):

  • Start= allows you to start the list counting with a number other than 1
  • Reverse= starts the list counting down instead of up
  • Value= allows you to set your list items to specific numerical values, add to the specific <li> element

LINK STYLING

Link states

  • :link link (unvisited)
  • :visited link (visited)
  • :hover a link that’s hovered over
  • :activea link that’s currently being activated/clicked on

Default style of a link:

  • underlined, blue (unvisited)
  • underlined, purple (visited)
  • hovering changes the mouse to a hand icon
  • users know and expect this link behavior, don’t stray too far away from this style

Link CSS

  • text-decoration “none” gets rid of the default underline
  • border-bottom is preferred over the default text-decoration line because there’s more line styling options, plus the line is lower so it doesn’t cut across the tails of letters such as “g” and “y”
  • define different colors for a:link and a:vistited so that they are distinct
  • give a:focus and a:hover a background color to make the link stand out when hovered over
  • use a:active to invert the color scheme of the link as it’s being clicked on, makes it clear that something is happening
  • adding padding to your link makes it stand out from the rest of the text it’s nestled in without it being highlighted in an obnoxious way

WEB FONTS

font-family: the font applied to your text, include multiple font family names (browser runs down the list of family names until it finds one available to use)

Web safe fonts: the fonts that are ~generally~ available across all systems, very limited

Fonts are usually not free, meaning you’ll have to pay for fonts that aren’t the basic web-safe fonts. Thankfully Google Fonts has tons of free fonts to choose from!

Google Fonts

  1. Visit the Google Font Page
  2. Select a font you like with the plus sign icon and then click on the bar at the bottom of the screen that pops up to see details.
  3. You should see tabs in which to customize & embed. Customize the font styles you’ll want to use (keeping in mind the more font variations you choose the longer your page will take to load).
  4. Then take the <link> code and enter it into the <head> of your document.
  5. Specify the font-family in your CSS with the CSS rules they give you as well.

To specify font files to be downloaded along with your website as it’s accessed add to the top of your css file:

@font-face {
font-family: “myFont”
src: url(“url”)
}