Lesson 05 More CSS

Mark Harder, 12 October 2018

Modern Web Application Development

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);
     }    
    
       * See more filters online at [https://developer.mozilla.org/en-US/docs/Web/CSS/filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)
    

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.

  • This Video Demo Link is shared using Microsoft OneDrive
    • 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