CSS

Class Tuesday, October 22, 2019

 Today’s Goals:

  • Review first quarter grading– click here to view grade grid . ALL FIRST QUARTER WORK DUE FRIDAY, NOVEMBER 1!
  • Continue learning CSS: background images, Google Fonts, styling links, text shadows, text alignment
  • Get started on CSS Quote project

 Today’s featured website:

 CSS Practice

  • You will:
    1. Add CSS and apply it to your HTML
    2. Change the background color of your page
    3. Add a background image to your page
    4. Change the font
    5. Change the text color and size
  • Set up basic webpage: Let’s set up a basic webpage with html, head, title, and body opening and closing tags. Save this as csspractice1.html. Now, let’s add some content to style- a headline and a paragraph.
  • Add some basic CSS to change the color, font, and size of the text and to add a background-color:
    1. Begin by adding style tags in your head section and some selectors to target our headline and paragraph.
    2. Now let’s change the background color of our webpage by adding the background-color property to our body selector and some color value 
    3. Next, let’s change the colors of our headline and paragraph by using the color property and a value taken from the color names list. Let’s give each one a different color.
    4. Let’s use the font-size property to change the size of our text. We will make our headline and paragraph different sizes- the headline should be larger. For now, we will use pixels for the font-size value but later on will learn about different values.
    5. Let’s also try changing the font.  by using the font-family property and some font value. Don’t worry, we will learn more exciting fonts later!
  • Let’s add a background image
    1. We’ll use this image  and this code  to get started.
    2. We will copy and paste the background-image properties into our body declaration block. Don’t just simply copy/paste the whole thing into your code!
    3. Let’s try changing the values of the background-repeat property and use repeat, repeat-x, and repeat-y
    4. Let’s change the values of the background-position property and use left, right, left top, left bottom, right top, right bottom
  • Big background-image:
    1. Let’s use a large image that will take up most of our page
    2. Use this image  (copy/paste the image address)
    3. We will comment out the original background image using a CSS comment (code sample in code from above; forward slash and starburst). Comment out just the value for the background image property or comment out the entire line and put a new one below by typing or copying/pasting the same thing.
    4. What values do you think are best for the background-repeat and background-position properties when you use a large image?
  • Text shadows and text alignment
    1. Let’s use the text-align property  to center our text
    2. Let’s use the text-shadow property  to add a drop shadow to our text to help it stand out more against a background image (there is also a box-shadow property to give non-text elements shadows)

 Google Fonts

  • Google Fonts has tons of free and easy to use fonts for our webpages
    1. Go to https://fonts.google.com/ 
    2. Choose a font by scrolling and/or check off categories on the right to narrow your choices
    3. When you find a font to use, click on the red circle with the plus sign on the top right
    4. It will say “family selected” on the bottom and click on the black bar to open your font information
    5. Copy the link to the font into the head section of your webpage
    6. Copy and paste the font-family wherever you want to use it (body, h1, p, etc.).

 Styling Links

  • It’s possible to make links look much nicer than the default ways browsers choose to display them.
    1. Let’s add a link on our webpage so we have a link to style
    2. Go to this W3Schools link example 
    3. Let’s review the four different link states
    4. Let’s add a sample link into the tutorial
    5. Now let’s copy/paste the code into our own project to style our own link
    6. Underlining links: let’s use the text-decoration property  to remove the default underlining by the browser

  CSS Quote Project

  • You’ll create an inspirational quote webpage using the new CSS you’ve learned
  • Directions: Go here