HTML and CSS Refresher Challenges

Structure, Phrasing and Display

The difference between structural elements and phrasing elements is that block elements tend to make up bigger structural pieces than inline elements. Inline elements are used for small phrasing pieces of content within block elements. As for display properties in CSS, the display property overrides any display value and helps customize how elements are displayed on a page.

Box Model

The CSS Box Model is a great visualization of the hierarchy of the layout in a web page. The model below is essentially how the box is structured. By default, padding and border properties can expand the element beyond its width. Using the "box-sizing" property, it will include padding & border, which is usually easier for layouts.

CSS Box Model

Background Images

When using background images in CSS, we have to make sure that we use the correct tag. If the image is solely for decoration or style to the page, use the "background-image" property. If the image is important to the content of the page, use the "img" tag in HTML. When using background images, we can use properties such as "background-size", "background-repeat" and "background-position" to help customize how the image looks on the page. Oh, and make sure the text is still readable!