design1 – intermediate CSS – Web Design Spring 2025 @ York College

Topics

Manipulate common font and text properties using CSS ;
Include external fonts using Google fonts (***note the Google font website UI has changed, but the process is the same);
Define and manipulate the four components of the box model.
We’re going to consider our next design lesson after color, and that’s visual hierarchy. In particular we’re going to discuss:
- size – text size to emphasize relative ordered importance;
- spacing – improve readability and add emphasis by creating whitespace around content;
- typography – using different type styles: bold, italics, background color; and a type face pairing consistently used for headings vs. body text.

Tutorials

Section 06 Intermediate CSS – videos 043–055
The following HTML and CSS pairs will need to be completed as part of the code-along and uploaded to your server in a 04week folder:
- fonts.html / fonts.css
- box-model.html / box-model.css
- tic-tac-toe.html / tic-tac-toe.css
- photo-gallery.html / photo-gallery.css
  - img/all-nine-jpg-files
- blog.html / blog.css
For the photo gallery code-along please select nine images with some connection to one another from unsplash.com. You must crop and resize each image to 1000px x 1000px. All images should be saved in a folder named ‘img’. The images organized in this folder should be used while writing the HTML for your photo gallery project. This folder and the contained images will need to be uploaded to your server.
For the blog code-along, you will use two Google fonts instead of one. One font for headings and the other for body text. Select and use a Google font pair from this curated list of ten pairings.

Problem Set

Now that you’ve been introduced to enough tools in CSS to start to do some real layout and design, it’s time to make a final version of the recipe project. Here is a sample layout for your consideration.

A CSS Reset and use color variables

A classic “CSS reset” removes all the pre-formatted margins and padding for elements, removes text styling, list styling, and makes images responsive.

Use this minimal CSS reset at the top of your CSS document;
Watch my CSS color variables tutorial to manage your color palette.

Set your max-widths and center your content

Update your HTML using the div element to group elements that will share common widths.
You can then set a max-width for media vs. body text. Consider optimal line length for text readability which is about 560-600px.
Use margin: 0 auto to center your content.

Use line-height and padding to add white-space and improve readability

line-height is a property used to effectively change text spacing – making text become “double-spaced” vs. “single-spaced”;
padding will allow you to add space around list items, table rows, and your button text.
You can also use padding between blocks of the recipe to differentiate ingredients vs. instructions vs. media boxes.

Media Element responsive design

The img element will be “responsive” or responding to the width of your browser if you have added the CSS reset, it includes this code:

img {
  max-width: 100%;
  height: auto;
}

Use wrap your YouTube iframe with a div class="video-container" and use the following CSS to make your video responsive:

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 3rem;
	height: 0;
	overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Use absolute positioning to layer text over your image

this will be described in a tutorial to come!

For the blog

Describe your understanding of the box model. What’s the difference between margin and padding? How do borders work? How does the content box work? Draw an example of the box model on a piece of paper with labels. Take a photo of it and use it as part of your description. Before uploading your photo, be sure to resize it so that the largest dimension – height or width – is 1000px.

design1 – intermediate CSS