Free games, exercises and tests to help you learn frontend web development

CSS Intro

1. Box model

Consider the boxes below.

1) How are the CSS rules attached? By className or by ID?

2) Look at the width and height and also at the padding, borders and margins. Compare the CSS with what you actually see.

The main point is this: the first box has box-sizing: content-box; on it. The second box has box-sizing: border-box;. With content-box the padding and border are added to the dimensions of the box. So - both these boxes have width 200px but in the first one the padding and borders have been added, so the overall box is wider.

With border-box the padding and border are included in the dimensions of the box. This is often more convenient. content-box is the default so you have to explictly set border-box if you want that.

Hello from inside a box.

Consult this reference for details

Activity

Use the Inspector Panel in Chrome to examine and edit the properties and values to make sure you understand them. (Right-click on each box and choose Inspect).

2. Font size

There are several different ways of specifying font-size in css and each has its own advantages and disadvantages. Following are examples of the most common: (nb there are others).

This text is specified in px. (pixels). This allows for very precise control of size. This text is specified in %. How does this work?

This text is specified in rem. This is relative to the size on the root html element. Can you set the font-size on the html element in the Chrome Inspector to different values and see what happens?

Graphic shows how to add CSS to html element

This text is specified in vw. What happens when you resize the browser window?

3. CSS positioning

The CSS position property has 4 possible values: absolute, static, relative and fixed.

The two boxes above float.

The default position is static. This means that elements just flow naturally - one after another. (A special case of static is floating - in this mode block elements do not display one after another but they 'float' next to each other)

Relative position is relative to where it would be otherwise. For example you can use relative positioning to make a small adjustment to move an element, for example, a litle bit to the right of where it would be if simply statically positioned.

Absolute positing is always relative to the parent element. (The parent must itself have a position)

Fixed positioning means that the element is fixed relative to the viewport a typical use case is to create a footer which does not scroll with the page like a menu bar. See the 'CSS Intro' element which is attached to the viewport on this page. (Note; The actual site footer uses flex).

4. Responsive Images

Very important! These days a web page must display nicely in everything from a browser on a high-resolution monitor (at least 1920 x 1080) to a small mobile screen. Images must scale to fit the display.

Consider the two images below. What happens when you resize the browser window?
The first image uses the img-fluid class from Bootstrap to make it responsive. Use the inspector to see what CSS rules img-fluid uses: max-width: 100%; height: auto;

Summary

We have looked at some important examples of CSS. The box model, different ways of setting font-size, the basics of CSS Positioning, and how to make an image responsive. There is much more to learn - keep checking back for more tutorials.