AW03 – Images and Layout with CSS

3.1. Styling images

TASK: You need to create an HTML and CSS document for this lesson task. Use one root folder containing separate CSS and image folders. Find three images you can use; one will be used as a background and one as part of the content, while the third should be a simple png with a transparent background.

Link the styles.css file with the HTML document using the <link> property inside the <head> section of the HTML document.

Part 1

Create a basic structure for the HTML document with a <body> containing a <header>, <main> and <footer> section. Insert a <h1> element into the <header> section and a <p> element with text inside the <main> section.

Using CSS, apply the following to the HTML page:

  • A background image for the <body> section;
  • A solid colour background for the <header> section, but with an opacity rule applied so that the background image is slightly visible behind the <header> container.

Once you have the background image showing, apply different values to the background properties that will produce the following results:

  • A repeated pattern of the background image using the properties “background-repeat” and “background-size”.
  • Place the background image in the centre of the screen using the properties “background-position”,; “background-size”, and “background-repeat”.
  • A full-page background image that fills the screen using “background-repeat” and “background-size” (remember that size can have specific values in % or px, but it can also have relative values like “contain” and “cover”).

Take screenshots of the HTML and CSS code as well as the browser results. Write a short description explaining how the property values changed the behaviour of the background image. This should be loaded onto your blog.

Part 2

Insert a div with a class into the <main> section of the HTML page. Specify the div’s size using a CSS rule that includes a height and width property. You can also specify a border so you can see the empty container. If you need to refresh your memory on border styles, visit this link.

Once the empty container is showing up in the browser or result view, add a multi-layered background to the container that includes the following:

  • A gradient;
  • A pattern made up of the png image you collected earlier.

TIP: You can use one ruleset to specify all the container’s properties (width, height, border and background). When applying multiple image properties, you should only use the background property once, followed by all the values, separated by a comma. The first value will be on top.

Take screenshots of the CSS code and the result and write a short description explaining how the property values changed the behaviour of the background image.

Part 3

Insert two images in the <main> section using the <a> property in the HTML code. Using CSS, do the following:

  • Apply a border radius property to the first image;
  • Apply a pseudo-class property to the second image that reduces the opacity on hover.

TIP: Make use of classes or IDs to apply different properties to different images.

Take screenshots of the HTML and CSS code as well as the browser results to load onto your blog.

Answer

Part 1

HTML

CSS & Browser

Part 2

CSS & Browser

Part 3

HTML

CSS & Browser

3.2. Layout elements

TASK: You need to create an HTML and CSS document for this lesson task. Link the CSS file with the HTML document using the <link> property inside the <head> section of the HTML document.

Part 1

Copy this basic structure into the body of the HTML document and indent the code so that it shows the nested relationship of the content:

Part 2

Using what you’ve learned so far, try to recreate the following browser display using CSS to style the above HTML:

Here’s a list of things that should be included in the HTML/CSS:

  • Classes;
  • Inline block display;
  • Margin properties;
  • Padding properties;
  • Font family;
  • Background colour properties;
  • Border properties;
  • Pseudo-class for the hover effect on the navigation menu.

NOTE : The font and colour may vary, but try to create a similar layout.

Take screenshots of the HTML and CSS code as well as the browser results to load onto your blog. Write a short paragraph about what you’ve learned, any difficulties you encountered and how you managed to solve it.

Answer

Part 1

Part 2

3.3. Styling layout

TASK: Download these exercise files containing the basic HTML document, logo and photograph. You will have to create a CSS document for this lesson task. Use one root folder to save the HTML file and use separate CSS and image folders.

Link the stylesheet to the HTML document using the link attribute in the <head> of the HTML document.

GOAL: Look at this layout for a fictitious website advertising web development courses. Use what you have learned to create the same layout (or as close to this as possible):

Part 1

First, examine the layout and draw a wireframe showing the different sections of the page. Then, inspect the HTML code to find the hierarchy of parent and child elements that respond to the sections you identified. Write down the names of the classes of the parent containers that make up the basic structure.

For example: <nav> is the parent container that holds two siblings: the logo image and the <ul> that make up the navigation menu. The <ul> element is the parent container that holds the three list items: Home, About and Contact.

Part 2

Start styling the different sections by assigning rulesets to the existing classes. Here are some tips you might find helpful:

  • The body element by default has some margin around the edges. To remove the margin, set it to 0%.
  • Flex was used to style the <nav> element as well as the first hero image section.
  • To get the elements within a flex container to align to the left and right sides of the window with space between, use the CSS rule “justify-content: space-between”.
  • Remember, padding creates spacing within an element (between the border and the content), while margin creates space between elements (outside the element’s border).
  • To get elements within a flex container to align right, use “justify-content: flex-end”.
  • Grid was used to style the information section below the image.
  • Position was used to create the footer.

Take screenshots of your result. Write a short summary about how well you think you could redo the example website. Comment on what you’ve learned. Upload this to your WordPress blog.

Answer

Part 1

Part 2

3.4. Media queries and code conventions

TASK: For this lesson task, you’ll continue to work on the website you styled for SBD (fictitious website for web development courses) from the previous lesson task.

GOAL: For this lesson task, you’ll continue to work on the website you styled for SBD (fictitious website for web development courses) from the previous lesson task.

Take a screenshot of your browser display, as well as your HTML and CSS documents. Compare this example to your own. Upload it to your blog and explain what you’ve learnt.

Answer