Things I Learned from Learn to Code HTML & CSS, Lesson 9

Here are some things I learned from Lesson 9: Adding Media of Learn to Code HTML & CSS by Shay Howe.

Adding Images

Sizing Images

Specifying either a width or a height will cause the other dimension to adjust automatically to maintain the aspect ratio of the image.

Positioning Images

By default, images arepositioned as inline-level elements.

Inline Positioning Images

The height of the line in which an image appears will be changed to match the height of the image.

Adding Audio

Unlike the <img> element, the <audio> element requires both opening and closing tags.

Audio Attributes

The most common <audio> attributes include autoplay, controls, loop, and preload.

The first three are Boolean attributes, so they don’t require a stated value.

By default, the <audio> element isn’t displayed on a page. To display the element, the controls Boolean attribute is necessary.

The preload attribute helps identify what information about the audio should be loaded before the clip is played. It accepts three values:

none
No information is preloaded
auto
All information is preloaded
metadata
Any available metadata is loaded, such as the length of the file

When the preload attribute isn’t present, all information is loaded. For this reason, using the preload attribute with a value of metadata or none is a good idea when an audio file is not essential to the page. It’ll help to conserve bandwidth and allow pages to load faster.

Audio Fallbacks & Multiple Sources

Different browsers support different audio file formats, the three most popular of which are ogg, mp3, and wav. For the best browser support we’ll need to use a handful of audio fallbacks, which will be included inside an <audio> element’s opening and closing tags.

To begin, we’ll remove the src attribute from the <audio> element. Intead, we’ll use the <source> element, with a src attribute, nested inside the <audio> element to define a new source.

We can list one audio file format after the other. We’ll use the type attribute to quickly help the browser identify which audio types are available. When a browser recognizes an audio file format it will load that file and ignore all the others.

For browsers that do not support HTML5, we can provide a link to download the audio file after any <source> elements within the <audio> element.

<audio controls>
  <source src="jazz.ogg" type="audio/ogg">
  <source src="jazz.mp3" type="audio/mp3">
  <source src="jazz.wav" type="audio/wav">
  Please <a href="jazz.mp3" download>download</a> the audio file.
</audio>

Adding Video

Unlike <audio> elements, the video will display even if the controls Boolean attribute is not specified. However, the best practice is to include the controls Boolean attribute unless there is a good reason not to allow users to start, stop, or replay the video.

It’s good to specify the width and height properties of a video element in CSS.

Poster Attribute

The <poster> attribute allows us to specify an image, in the form of a URL, to be shown before a video is played.

Video Fallbacks

Video fallbacks work the same way as audio fallbacks.

One additional fallback option that could be used in place of a plain text fallback is to use a YouTube or Vimeo embedded video.

Adding Inline Frames

Pages referenced within the src attribute of an <iframe> element play by their own rules, as they don’t inherit any styles or behaviors from the page they are referenced on. Additionally, links within the page referenced within the <iframe> element will open inside that frame, leaving the page that contains the <iframe> element unchanged.

Semantically Identifying Figures & Captions

With HTML5 also came the introduction of the <figure> and <figcaption> elements. These were created to semantically mark up self-contained content or media, commonly with a caption. Before HTML5 this used to be done using an ordered list, but that was not semantically correct.

Figure

The <figure> block-level element is used to identify and wrap self-contained content, often in the form of media. It may surround images, audio clips, videos, blocks of code, diagrams, illustrations, or other self-contained media. More than one item of self-contained content may be contained within the <figure> element. If the <figure> element is moved from the main portion of a page to another location, it should not disrupt the content or legibility of the page.

Figure Caption

To add a caption or legend to the <figure> element, the <figcaption> element is used. It may appear at the top of, bottom of, or anywhere within the <figure> element; however, it may only appear once. It will serve as the caption for all content within the <figure> element.

Additionally, the <figcaption> element may replace an <img> element’s alt attribute if its content provides a useful description of the visual content of the image.

Not all forms of media need to be included within a <figure> element or include a <figcaption> element; only those that are self-contained and belong together as a group.

Things I Learned from Learn to Code HTML & CSS, Lesson 8

Here are some things I learned from Lesson 8: Creating Lists of Learn to Code HTML & CSS by Shay Howe.

Ordered Lists

Start Attribute

The start attribute defines the number from which an ordered list should start (default: 1).

The start attribute accepts only integer values, even though ordered lists may use different numbering systems, such as roman numerals.

Reversed Attribute

The reversed attribute allows an ordered list to appear in reverse order.

The reversed attribute is a Boolean attribute, and as such it doesn’t accept any value. False is the default value; the value becomes true when the attribute name reversed appears on the <ol> element.

Value Attribute

The value attribute may be used on an individual <li> element within an ordered list to change its value within the list. The number of any list item appearing below a list item wih a value attribute will be recalculated accordingly.

Description Lists

Description lists are used to outline multiple terms and their descriptions, as in a glossary, for example.

The description list, <dl>, requires two block-level elements: the description term element, <dt>, and the description element, <dd>.

A description list may have multiple terms per description, as well as multiple descriptions per term.

The <dt> element must come before the <dd> element.

By default, the <dl> element will include vertical margins, just like the <ul> and <ol> elements. Additionally, the <dd> element includes a left margin by default.

Nesting Lists

Every list may be placed within another list. However, lists should still be reserved specifically for where they hold the most semantic value.

The only element we can place as a direct child of the <ul> and <ol> elements is the <li> element.

Once inside the <li> element, the standard set of elements may be added, including any <ul> or <ol> elements.

List Item Styling

List Style Type Property

Any list-style-type property value can be added to either unordered or ordered lists. In other words, it’s possible to use a numeric list item marker on an unordered list and a nonnumeric marker on an ordered list.

List Style Type Values
List Style Type Value Content
none No list item
disc A filled circle
circle A hollow circle
square A filled square
decimal Decimal numbers
decimal-leading-zero Decimal numbers padded by initial zeros
lower-roman Lowercase roman numerals
upper-roman Uppercase roman numerals
lower-greek Lowercase classical Greek
lower-alpha / lower-latin Lowercase ASCII letters
upper-alpha / upper-latin Uppercase ASCII letters
armenian Traditional Armenian numbering
georgian Traditional Georgian numbering

Using an Image as a List Item Marker

We can place a background image on each <li> element within a list.

The process includes removing any default list-style-type property value and adding a background image and a padding to the <li> element.

List Style Position Property

The list-style-position: outside default property value places the list item marker to the left of the <li> element and doesn’t allow any content to wrap below the list item marker. The inside property value (which is rarely used) allows content to wrap below it as needed.

Shorthand List Style Property

For example:

ul {
  list-style: circle inside;
}

Horizontally Displaying Lists

Displaying List

The quickest way to display a list on a single line is to give the <li> elements a display property value of inline-block (or inline).

The list item marker is automatically removed.

Floating List

If the list item marker is needed, floating each <li> element is a better option.

When floated, the list item marker will sit on top of the <li> element. To prevent this, a horizontal margin or padding should be added.

Remember to clear the floats with clearfix.

Things I Learned from Learn to Code HTML & CSS, Lesson 7

Here are some things I learned from Lesson 7: Setting Backgrounds & Gradients of Learn to Code HTML & CSS by Shay Howe.

Adding a Background Color

Transparent Backgrounds

When using an RGBa or HSLa value as a transparent background color, it’s a good idea to provide a fallback color, too, because not all browsers recognize RGBa or HSLa values.

We can use two background-color properties within a single rule set, the first of which will use a “safe” background color, and the second of which will use a RGBa or HSLa value.

Adding a Background Image

Background Repeat

By default, a background image will repeat indefinitely, both vertically and horizontally, unless otherwise specified.

The background-image property accepts four different values: repeat (default), repeat-x (repeat horizontally), repeat-y (repeat vertically), and no-repeat.

Background Position

The background-position property requires two values: a horizontal offset and a vertical offset (from the left top corner). If only one value is specified, that value is used for the horizontal offset and the vertical offset will default to 50%.

To set a value, we can use the top, right, bottom, left, and center keywords, pixels, percentages, or any length measurements. For example, background-position: right top equals background-position: 100% 0.

Shorthand Background Image Values

For example:

div {
  background: #b2b2b2 url("alert.png") 20px 10px no-repeat;
}

Designing Gradient Backgrounds

Gradient backgrounds are treated as background images. We can create a gradient using the background or background-image property.

Changing the Direction of a Gradient Background

By default, linear gradient backgrounds move from the top to the bottom of an element.

If we want a gradient to move from the left to the right, we can use background: linear-gradient(to right, startColor, endColor). Keyword values may also be combined. If we want the gradient to move from the left top to the right bottom, we can use the keyword value to right bottom.

When we use a diagonal gradient on an element that isn’t exactly square, the background gradient will not proceed directly from one corner to the other. Instead, the gradient will identify the absolute center of the element, place anchors in the perpendicular corners from where it should progress, and then move to the general direction of the corner stated within the value. These perpendicular corners are called “magic corners”, as they are not absolute.

Radial Gradient Background

Instead of using the linear-gradient() function, we’ll use the radial-gradient() function.

Radial gradients work from the inside to the outside of an element.

Using Multiple Background Images

With CSS3, we can use more than one background image on an element by comma-separating multiple background values.

The background image value that comes first will be the foremost background image, and the background image that’s listed last will be the rearmost background image.

You can use either the shorthand background property or break the values up into comma-separated values across the background-image, background-position, and background-repeat properties.

Exploring New Background Properties

CSS3 Background Size

The background-size property accepts a few different values, including length and keyword values.

We can specify a width and a height value by using two space-separated values. Percentage values are in relation to the element’s size, not the background image’s original size.

If a second value isn’t identified after the width, the height value will be automatically set to preserve the aspect ratio of the background image.

The keyword value auto may be used as either the width or height value to preserve the aspect ratio of the background image.

Cover & Contain Keyword Values

The cover keyword value specifies that the background image will be resized to completely cover an element’s width and height. The original aspect ratio will be preserved, so often part of the background image is cut off in order for the image to occupy the full space of the element.

The contain keyword value specifies that the background image will be resized to reside entirely contained within an element’s width and height. The original aspect ratio will be preserved, so often the background image will not occupy the full space of the element.

Both these keyword values may result in slightly distorted background images.

CSS3 Background Clip & Background Origin

The background-clip property specifies the surface area a background image will cover, and the background-origin property specifies where the background-position should originate. These two properties correspond with the keyword values border-box, padding-box, and content-box. Each of these three values may be used for the background-clip and background-origin properties.

The background-clip property value is set to border-box by default. Meanwhile, the background-origin property value is set to padding-box by default.