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.

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

Here are some things I learned from Lesson 6: Working with Typography of Learn to Code HTML & CSS by Shay Howe.

Typeface vs. Font

A typeface is what we see. It is the artistic impression of how text looks, feels, and reads.

A font is a file that contains a typeface. Using a font on a computer allows the computer to access the typeface.

It’s like comparing a song and an MP3.

Changing Font Properties

Font Variant

The font-variant property accepts three values: normal, small-caps, and inherit. Use this to switch typefaces between normal and small caps variants.

Font Weight

Typeface Weights

Attempting to use a weight that’s not available for a given typeface will cause those styles to default to the closest value.

Line Height

The value line-height: 150% equals line-height: 1.5 and is relative to the font-size of the element. You can also use other units, such as pixels.

You can also use line-height to vertically center a single line of text within an element, using the same property value for line-height and height:

.btn {
  height: 22px;
  line-height: 22px;
}

This technique may be seen with buttons, alert messages, and other single-line text blocks.

Shorthand Font Properties

You can use shorthand font properties: font: font-style font-variant font-weight font-size/line-height font-family.

Every property value is optional except font-size and font-family.

For example:

html {
  font: italic small-caps bold 14px/22px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Applying Text Properties

Text Decoration

Multiple text-decoration values may be applied to an element at once by space-separating each keyword within the value.

Text Indent

The text-indent property can be used to indent the first line of text within an element. Positive values will indent text inward, while negative values will indent text outward.

Text shadow

The text-shadow property takes four values. The first determines the shadow’s horizontal offset, the second determines the shadow’s vertical offset, and the third determines the shadow’s blur radius. The fourth is the shadow’s color.

Multiple text shadows can be chained together using comma-separated values.

Box Shadow

If we’d like to place a shadow on the element as a whole, we can use the box-shadow property.

In addition to the three length values and the color value, the box-shadow property also accepts an optional fourth length value, before the color value, for the spread of a shadow. A positive value will expand the shadow larger than the size of the element it’s applied to, and a negative value will shrink the shadow to be smaller than the element.

Lastly, the box-shadow property may include an optional inset value at the beginning of the value to place the shadow inside an element as opposed to outside the element.

Letter Spacing

Using a relative length value with the letter-spacing property will help ensure that we maintain the correct spacing between letters as the font-size of the text is changed.

Embedding Web Fonts

The safest of the web-safe fonts are listed here:

  • Arial
  • Garamond
  • Lucida Sans, Lucida Grande, Lucida
  • Tahoma
  • Trebuchet
  • Courier New, Courier
  • Georgia
  • Palatino Linotype
  • Times New Roman, Times
  • Verdana

Including Citations & Quotes

In general, follow these rules:

  • <cite>: Used to reference a creative work, author, or resource
  • <q>: Used for short, inline quotations
  • <blockquote>: Used for longer external quotations

Dialogue & Prose Citation

An optional attribute to include on the <q> (or <blockquote>) element is the cite attribute. It acts as a citation reference to the quote in the form of a URL. This attribute doesn’t alter the appearance of the element; it simply adds value for screen readers and other devices. Because of that, it’s also helpful to provide a hyperlink to this source next to the actual quotation.

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

Here are some things I learned from Lesson 5: Positioning Content of Learn to Code HTML & CSS by Shay Howe.

Positioning with Floats

Floats in Practice

Floats May Change an Element’s Display Value

The float property relies on an element having a display value of block, and may alter an element’s default display value if it is not already displayed as a block-level element.

Clearing & Containing Floats

Containing Floats

To contain floats, the floated elements must reside within a parent element. It will act as a container, leaving the flow of the document completely normal outside of it.

.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  clear: both;
  *zoom: 1;
}

The :before and :after pseudo-elements ara displayed as table-level elements, much like block-level elements. The :after element is clearing the floats within the container element. Lastly, the container element itself also clears any floats that may appear above it. It also includes a little trickery to get older browsers to play nicely.

The technique is known as a “clearfix”. We’ve chosen to use the class name group, as it expresses the content better.

Positioning with Inline-Block

The display: inline-block value will display elements within a line while allowing them to accept all box model properties. This allows us to take full advantage of the box model without having to worry about clearing any floats.

Inline-Block in Practice

Because inline-block elements are displayed on the same line as one another, they include a single space between them.

Removing Spaces Between Inline-Block Elements

The first solution is to put each new <section> element’s opening tag on the same line as the previous <section> element’s closing tag:

<section>
...
</section><section>
...
</section><section>
...
</section>

Writing inline-block elements this way ensures that the space between inline-block elements within HTML doesn’t exist.

Another way is to open a HTML comment directly after an inline-block element’s closing tag:

<section>
...
</section><!--
--><section>
...
</section><!--
--><section>
...
</section>

Creating Reusable Layouts

One approach is to use inline-block elements to create the grid of a page and then use floats to wrap content around a given element.

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

Here are some things I learned from Lesson 4: Opening the Box Model of Learn to Code HTML & CSS by Shay Howe.

Working with the Box Model

Width & Height

Width

Inline-level elements cannot have a fixed size, thus the width and height properties are only relevant to non-inline elements.

Margin & Padding

Margin

Vertical margins, margin-top and margin-bottom, are not accepted by inline-level elements. They are, however, accepted by block-level and inline-block elements.

Padding

The padding property, unlike the margin property, works vertically on inline-level elements. This vertical padding may blend into the line above or below the given element, but it will be displayed.

Box Sizing

CSS3 introduced the box-sizing property, which allows us to change exactly how the box model works and how an element’s size is calculated.

Content Box

The content-box value is the default value, leaving the box model as an additive design. The size of an element begins with the width and height properties, and then any padding, border, or margin property values are added on from there.

Padding Box (Deprecated)

The padding-box value alters the box model by including any padding property values within the width and height of an element. If an element has a width of 400 pixels and a padding of 20 pixels around every side, the actual width will remain 400 pixels. As any padding values increase, the content size within an element shrinks proportionately.

If we add a border or margin, those values will be added to the width and height properties to calculate the full box size.

The padding-box value has been deprecated and should not be used.

Border Box

Lastly, the border-box value alters the box model so that any border or padding property values are included within the width and height of an element. If an element has a width of 400 pixels, a padding of 20 pixels around every side, and a border of 10 pixels around every side, the actual width will remain 400 pixels.

If we add a margin, those values will need to be added to calculate the full box size.

Picking a Box Size

The best box-sizing value to use is border-box. It makes the math much easier.

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

Here are some things I learned from Lesson 3: Getting to Know CSS of Learn to Code HTML & CSS by Shay Howe.

Calculating Specificity

Every selector in CSS has a specificity weight that, along with its placement in the cascade, identifies how its styles will be rendered.

  • The type selector has the lowest specificity weight and holds a point value of 0-0-1.
  • The class selector has a medium specificity weight and holds a point value of 0-1-0.
  • The ID selector has a high specificity weight and holds a point value of 1-0-0.

The first column counts ID selectors, the second column counts class selectors, and the third column counts type selectors.

The higher the specificity weight of a selector, the more superiority the selector is given when a styling conflict occurs. For example, if a paragraph element is selected using a type selector in one place and an ID selector in another, the ID selector will take precedence over the type selector regardless of where the ID selector appears on the cascade.

Combining selectors

Spaces Within Selectors

The best practice is not to prefix a class selector with a type selector. Generally we want to select any element with a given class, not just one type of element.

Specificity Within Combined Selectors

The selector .hotdog p has one class selector (0-1-0) and one type selector (0-0-1). The total combined point value would be 0-1-1.

The selector .hotdog p.mustard has two class selectors and one type selector. The combined point value is 0-2-1.

Comparing the two selectors, the second one has a higher specificity weight and point value. As such it will take precedence within the cascade.

The higher our specificity weights rise, the more likely our cascade is to break.

Layering Styles with Multiple Classes

One way to keep the specificity weights of our selectors low is to be as modular as possible, sharing similar styles from element to element. And one way to be as modular as possible is to layer on different styles by using multiple classes.

Common CSS Property Values

Colors

HSL & HSLa Colors

HSL stands for hue, saturation, and lightness.

The hue is a unitless number from 0 to 360. The value identifies the degree of a color on the color wheel.

The saturation value identifies how saturated with color the hue is, with 0 being grayscale and 100% being fully saturated.

The lightness identifies how dark or light the hue value is, with 0 being completely black and 100% being completely white.

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

Here are some things I learned from Lesson 2: Getting to Know HTML of Learn to Code HTML & CSS by Shay Howe.

Identifying Divisions & Spans

<div>s and <span>s are HTML elements that act as containers solely for styling purposes.

Block vs. Inline Elements

Block-level elements begin on a new line, stacking on top of the other, and occupy any available width. They may wrap inline elements. We’ll most commonly see them used for larger pieces of content, such as paragraphs.

Inline-level elements do not begin on a new line. They fall into the normal flow of the document, lining up one after the other, and only maintain the width of their content. They cannot wrap block elements. We’ll usually see them with smaller pieces of content, such as a few words.

Choose <class> and <id> attribute values based on content, not style.

Building Structure

Structurally based elements provide semantic value.

Header

The <header> element identifies the top of a page, article, section, or other segment of a page.

Navigation

The <nav> element identifies a section of major navigational links on the page, such as global navigation, a table of contents, or previous/next links.

Article

The <article> element identifies a section of independent, self-contained content that may be independently distributed or reused.

Section

The <section> element identifies a thematic grouping of content.

Deciding Between <article>, <section>, or <div> elements

If the content is being grouped solely for styling purposes, use the <div> element.

If the content adds to the document outline and it can be independently redistributed, use the <article> element.

If the content adds to the document outline and represents a thematic group of content, use the <section> element.

Aside

The <aside> element holds content, such as sidebars, inserts, or brief explanations, that is tangentially related to the content surrounding it. When used within an <article> element, for example, the <aside> element may identify content related to the author of the article.

Footer

The <footer> element identifies the closing or end of a page, article, section, or other segment of a page. Content within the <footer> element should be relative information and not diverge from the document or section it is included within.

Creating Hyperlinks

Wrapping Block-Level Elements with Anchors

By nature, <a> is an inline element, and, according to web standards, inline-level elements may not wrap block-level elements. With HTML5, however, anchor elements specifically have permission to wrap any level elements. This is a break from the standard convention, but it’s permissible in order to enable entire blocks of content on a page to become links.

Linking to an Email Address

To add a subject line to a mailto link, include the subject= parameter after the email address. The first parameter following the email address must begin with a question mark, ?, to bind it to the hyperlink path. Spaces must be encoded using %20.

To add body text, use the body= parameter. Use the ampersand, &, to separate multiple parameters. Line breaks must be encoded using %0A.