MH Integrity

# Lesson 5 More CSS

# More CSS (Cascading Style Sheets)

In this lesson we are going to use HTML image elements and CSS to layout and display 6 images. We will then use google fonts to expand our style and transitions to add motion. We will then finally look at ways to make our layout responsive to different screen sizes.

# Images

  1. Create a new project folder Lesson04
    • Create a basic HTML index.html file and main.css file.
    • In the terminal initialize git. For more details see lesson 02
    • Create a new folder named imgs
    • Check out the https://www.pexels.com/ page. Download 6 medium size images into your new imgs directory.
  2. In our index file, between the <body> elements add 6 <img> elements.
    • add the attribute src="" inside the img tag.
    • add a relative path to the image file.
    • in VS Code it will help you fill in the path, start with imgs/
      • this is called a relative path because it starts with imgs/ and is followed by directories, CTRL-space to complete.
      • Add an attribute alt="alternate text for an image"
      • do this for all six images
    • view the page to see that the images one on top of each other
    • img tags are inline
  3. In the CSS file add
    img {
    width: 250px;
}
    • See that the images line up horizontal, resizing when we changes the width of the browser.
  4. Change the width to a percentage 25%, we can now see three across.
    img {
    width: 30%;
    height: auto;
    margin: 3%;
}
    • now see the effects in the browser.

# HTML File Paths

  • A file path describes the location of a file inside a web site's file structure.

  • File paths are used when linking to external files.

  • It is a best practice to use relative file path.

    An absolute file path is the full URL to an internet file:

    <img src="https://mhintegrity.com/assets/images/code-laptop.jpg" alt="absolute file path">

    A relative file path points to a file but uses the current file's location as a starting point.

    relative file path points to a file in the images folder located at the root
<img src="assets/images/code-laptop.jpg">

relative file path points to a file in the images folder located in the current folder
<img src="/assets/images/code-laptop.jpg">

# Image Filter

Lets apply some visual effects to one of our photos.

  1. In our html page add an attribute id="pic1" ... "pic3" to our first three img tags.
  2. In our CSS page add each of these new rules, and view the effects in the browser.
    #pic1 {
    filter: blur(5px);
}

#pic2 {
    filter: grayscale(80%);
}

#pic3 {
    filter: drop-shadow(16px 16px 20px);
}

# Transition

The transition property is a shorthand property for:

  • transition-property: Specifies the name of the CSS property
  • transition-duration: Specifies how many seconds or milliseconds the transition effect takes
  • transition-timing-function: Specifies the speed curve of the transition effect
    • ease: slow start, then fast, then end slowly
    • linear: same speed
    • ease-in: slow start
    • ease-out: slow end
  • transition-delay: Defines when the transition effect will start
  • Default: all 0s ease 0s

Note: Always specify the transition-duration property, otherwise the duration is 0s, and the transition will have no effect.

img:hover {
    margin: 0%; /* shrink the margin to accomodate size increase */
    width: 35%; /* increase the size of the image */
    transition-duration: 0.6s;
    transition-property: all;
    transition-timing-function: ease;
    transition-delay: .1s;
    /* transition: 0.6s all ease .1s; */
}

# Handle multiple screen sizes with the @media rule

The @media rule is used in media queries to apply different styles for different media types/devices.

/* response for small screen under 600px */
@media screen and (max-width: 600px) {
    img {
        width: 90%;
        height: auto;
        margin: 3%;
    }

    img:hover {
        margin: 0%;
        width: 96%;
        transition: 0.6s all ease .1s;
    }
}

You can also have different stylesheets for different media, like this in the html head:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

# Using Free Fonts by Google

Lets visit https://fonts.google.com/ and find a font we like.

  1. Find the font you like and click on the red plus circle.
  2. View the font family selected and copy the STANDARD link into our HTML <body> tag.
  3. Now we can use the font-family in our CSS
    <link href="https://fonts.googleapis.com/css?family=Mali" rel="stylesheet">

font-family: 'Mali', cursive;
  4. Specifying a font has
    • font-family: You can specify more than one in a comma-separated list.
    • font-style:
      • normal;
      • italic;
      • oblique;
    • font-size: use relative sizes like px or em
      • 1em is default text size in the browser, which is 16px
    • font-weight:
      • normal;
      • bold;
    • font is shorthand property for:
      • font-style font-weight font-size, font-family
    @media screen and (max-width: 600px) {
h1 {
    font: 20px 'Indie Flower', cursive;
    /* font-family: 'Indie Flower', cursive; */
}

Sample code for Lesson 05 can be found at https://github.com/mhintegrity/lesson05

# Assignment due before next class

  • This assignment counts for your grade
  • create a new repo called lesson05
  • Take your assignment from lesson04, the csszengarden and copy it into lesson05.
  • make further changes to your css, demonstrating the following new thinks you learned.
    • fonts
    • images
    • use @media to make a responsive version for a narrow phone.
  • All class demo's have been removed and will be replaced with screenshot videos soon.
    • 38:40 Minutes Long
    • 232 MB Size
    • Resolution: HD 1080p

# Additional Video Covering @Media Rule

  • This Video Demo Link is shared using Microsoft OneDrive
    • 4:48 Minutes Long
    • 229 MB Size
    • Resolution: HD 1080p

# Next Lesson

Lesson 6 Navigation Menus