Daily Tips & Tricks for Web Enthusiasts

HTML & CSS

How to Easily Scale Text Dynamically with CSS

HTML & CSS •

Usually the size of text on a web page is defined using the em or px units of measure, like this:

font-size: 16px;

The 16px value here defines the height of the invisible box text is rendered in.

This is often fine, but sometimes something a bit more dynamic would come in handy. For example, imagine being able to have the text on a page increase or decrease as the width of the viewport increased or decreased. That would come in handy, wouldn’t it?

Good news: You can do this with the vw unit.

font-size: 6vw;

This CSS defines the height of the invisible box text is rendered in as a percentage of the width of the viewport (vw stands for viewport width). That means text will get larger as the viewport width increases, and smaller as the viewport width decreases.

Give it a try, you’ll be surprised how useful and interesting it can be.

How to Easily Style the Current Navigation Element

HTML & CSS •

Let’s say you have a website with some navigation elements:

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/blog/">Blog</a></li>
        <li><a href="/about/">About</a></li>
    </ul>
</nav>

Now, imagine you want to make the active navigation element bold. That is, when you’re on the home page, the Home link should be bold; when you’re somewhere inside the blog section the Blog link should be bold, and so on.

You might be thinking about writing some code on the server that spits out a special class for the current section’s navigation link. That would work, but it isn’t going to scale well as more sections are added.

But there’s a better way!

Let’s start by adding some classes to the navigation elements:

<nav>
    <ul>
        <li><a class="home" href="/">Home</a></li>
        <li><a class="blog" href="/blog/">Blog</a></li>
        <li><a class="about" href="/about/">About</a></li>
    </ul>
</nav>

Now, for each section of the site, add a matching class to the body element, like this:

<body class="home">

Now, with this CSS, the current section’s navigation element will key off of the body class:

body.home nav a.home,
body.blog nav a.blog,
body.about nav a.about {
    font-weight: bold;
}

Nothing dynamic, and no server-side coding required!

If a new section is added to the site all you need to do is add the new navigation link:

<nav>
    <ul>
        <li><a class="home" href="/">Home</a></li>
        <li><a class="blog" href="/blog/">Blog</a></li>
        <li><a class="about" href="/about/">About</a></li>
        <li><a class="contact" href="/contact/">Contact</a></li>
    </ul>
</nav>

Then add a new selector to the CSS:

body.home nav a.home,
body.blog nav a.blog,
body.about nav a.about,
body.contact nav a.contact {
    font-weight: bold;
}

There you go!

HTML for Keyboard Shortcuts

HTML & CSS •

If you’re writing technical instructions, documentation, or educational material that includes keyboard shortcuts, make sure you use the <kbd> element where appropriate.

Here’s what the HTML5 specification has this to say about the <kbd> element:

The <kbd> element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands).

There are two things that make this element really great:

  1. It provides a clean, semantic way to define keyboard input.
  2. It makes it very easy to visually style keyboard input in a distinct way.

By default, text inside a <kbd> element is rendered with a monospace font, but it’s very easy to style this element to suit your own needs. Here on Core Assistance, for example, I often use the <kbd> element when I talk about keyboard shortcuts, so I wrote some CSS that makes <kbd> elements look like actual keyboard keys. Here’s an example: If you’re on a Mac, you can press Command + R to reload this page.

Here’s the CSS I use for <kbd> elements on Core Assistance. I’ve added some comments to explain what each declaration does. Feel free to use this CSS as-is on your own site or as a jumping-off point for your own <kbd> styles:

kbd {
    /* It all begins with a solid border. */
    border-style: solid;

    /* Make the border 1px thick on the top and both sides, but 3px thick on the bottom.  This gives these elements a nice raised appearance. */
    border-width: 1px 1px 3px;

    /* Round the corners a bit.  I'm using the em unit because I want the rounding of the corners to scale with the text. */
    border-radius: .25em;

    /* Use the same font-family as the surrounding text. */
    font-family: inherit;

    /* Give the text inside the borders a little breathing room. */
    padding: .1em .25em;
}

You may also need to adjust the line-height of your text so these styles don’t interfere with other text.

CSS Terminology

HTML & CSS •

A few weeks ago, I showed you what all the various bits and pieces of HTML are called in the HTML Terminology tip. Today we’re going to find out what all the basic CSS terms refer to.

Let’s use this CSS as a starting point:

.example {
    color: green;
    font-weight: bold;
}

That entire thing is called a rule. In older versions of the CSS specification it was also referred to as a rule set.

The first part of this rule is the selector:

.example

The selector specifies which elements this CSS rule applies to. It selects the elements (hence the name). In this case this CSS rule applies to all elements with the example class.

CSS rules can have multiple selectors, separated by commas, like this:

.example, h2, #primary

That would select all elements with the example class, all h2 elements, and the elements with an id of primary.

The second part of our example rule above are the declarations, which is everything between the curly braces:

color: green;
font-weight: bold;

The declarations define how the elements specified by the selector will be altered. In this case there are two declarations, one to make the foreground color green, and the other to make the font weight bold.

Each declaration is made up of a property and a value. Take this declaration, for example:

color: green;

In this declaration the property is color and the value is green.

A CSS rule can have as few or as many declarations as you wish.

Now you know the basics of CSS terminology!

Don’t Use Inline Styles

HTML & CSS •

You can add CSS to a specific HTML element using the style attribute, like this:

<h3 style="font-size: 1.5em; font-weight: normal; color: green;">I'm a Header!</h3>

CSS rules specified in a style attribute like this are referred to as inline styles, because the style information is inline with the HTML.

You should avoid using inline styles at all costs.

Inline Styles are Harder to Maintain

The example above makes three changes to a single h3 element. What if you want to make those same changes to another element? If you use inline styles you’ll need to copy and paste all or part of that style attribute to the other element.

Now what if you want to change the color? You’ve got to remember to change it in two places. Or was it three? Or fourteeen?

Inline Styles are the Enemy of Consistency

When you use inline styles it’s incredibly easy to forget to apply them to an element, or overlook changing the styles on another element. Using a seperate CSS file allows you to keep all your style information in one place, ensuring that the edits you make there will be applied uniformly across your site.

Inline Styles Aren’t Cached Seperately & Add Bloat

Of the following two options, which do you think is faster and better?

Option One

Download this CSS once and cache it:

h3 {
    font-size: 1.5em;
    font-weight: normal;
    color: green;
}

Then load five pages, each with one of these:

<h3>I'm a Header!</h3>
<h3>I'm a Header!</h3>
<h3>I'm a Header!</h3>
<h3>I'm a Header!</h3>
<h3>I'm a Header!</h3>
Option Two

Download this, seperately, for each of the five page loads:

<h3 style="font-size: 1.5em; font-weight: normal; color: green;">I'm a Header!</h3>
<h3 style="font-size: 1.5em; font-weight: normal; color: green;">I'm a Header!</h3>
<h3 style="font-size: 1.5em; font-weight: normal; color: green;">I'm a Header!</h3>
<h3 style="font-size: 1.5em; font-weight: normal; color: green;">I'm a Header!</h3>
<h3 style="font-size: 1.5em; font-weight: normal; color: green;">I'm a Header!</h3>

Inline Styles Break Seperation of Concerns

HTML is for content, CSS is for presentation. There are some exceptions, but inline styles should not be one of them.

Keeping a clear boundary between content and presentation is one of the best ways to keep your code maintainable and understandable. When you start mixing these you’ll end up with a tangled mess that no one wants to deal with.

Is it Ever Okay to Use Inline Styles?

There are some specific situations where use of inline styles cannot be avoided.

Sometimes inline styles must be used out of necessity, with the most common example being HTML emails. Many email clients are woefully out of date when it comes to supporting technologies we’ve been enjoying on the web for years and years, and many of them simply don’t understand CSS that isn’t inline.

Another example is JavaScript, which is used to alter the appearance of an element using inline styles (although modifying other attributes, like classes, are usually a better option).

Inline styles can also be convinent for quick prototypes or experiments, but they should never be used in a production environment.

Specify Automatic Form Functionality

HTML & CSS •

Form fields have four attributes that give you control over their automatic behavior: autocomplete, spellcheck, autocapitalize, and autocorrect. The first two included in the HTML spec, while the other two are non-standard but still worth implementing.

Autocomplete

The autocomplete attribute tells the browser if it should provide autocomplete functionality for a form field. Aside from the basic choices of on and off for the value of this attribute, there are a wide variety of choices to specify what, exactly, the browser should put in a given form field. Here are some examples:

  • name
  • username
  • new-password
  • current-password
  • email
  • address-line1
  • postal-code

That’s just a sample. There are a bunch of other possible values covering things like payment details, personal information, and more. You can find a complete list with details for each possible value, along with a handy table, in the WHATWG Standard.

Adding the autocomplete attribute to form fields when appropriate can make filling your form out a lot easier for everyone, especially people using mobile devices that are difficult to type on.

Spellcheck

Just what it says on the tin: the spellcheck attribute controls the automatic spell check functionality of a form field. Possible values are true, false, and default. This attribute comes in handy if you have a text field that’s going to accept something like a special token (like a coupon code), URL, or programming code.

Autocapitalize

As I mentioned above, the autocapitalize attribute is non-standard. It’s only supported in Safari on iOS and Chrome. Possible values are sentences, words, characters, and none.

Despite being non-standard this attribute can still help a ton of people and make your form a lot easier to fill out, and including it has no negative impact. Browsers that don’t support it will simply ignore it.

Autocorrect

The autocorrect attribute is also non-standard, and this attribute is only supported in Safari on iOS. Possible values are on and off.

Again, this has the potential to help people have a better experience filling out your forms, and there’s no downside to including it.

These four attributes, when used wisely, can make the difference between a frustrating form experience and a pleasant one. Implementing these usually only takes a few minutes. This is time I’m sure your visitors will consider well-spent.

HTML Terminology

HTML & CSS •

Elements, tags, attributes… there are a lot of terms used to describe the various bits of HTML. Understanding the most common of these terms will help you understand and discuss HTML with confidence, so in this tip I’m going to describe all the terms that apply to this snippet of HTML:

<a href="https://coreassistance.com/">Core Assistance</a>

That entire thing, the entire link from start to finish, is called an element. Specifically, this is an anchor element (the a stands for anchor).

This anchor element is made up of several components, the first of which is the opening tag, which is this part:

<a href="https://coreassistance.com/">

This opening tag contains an attribute:

href="https://coreassistance.com/"

Attributes are made up of name-value pairs. In this example, the name of this attribute is href and the value of the attribute is https://coreassistance.com/.

That’s the opening tag. Next comes the content of the element, also commonly called the text content:

Core Assistance

Finally, we have the closing tag:

</a>

So, to recap, here’s the entire element:

<a href="https://coreassistance.com/">Core Assistance</a>

This element has:

  • An opening tag:
    <a href="https://coreassistance.com/">
    • Containing an attribute:
      href="https://coreassistance.com/"
  • Some text content:
    Core Assistance
  • A closing tag:
    </a>

There are, of course, a couple of exceptions worth pointing out.

Some HTML elements do not have both opening and closing tags, and contain no text content. Take the image element, for example:

<img src="..." alt="...">

In this case the code above is still referred to as an element, but instead of calling this an opening or closing tag, it’s simply referred to as a tag.

This can lead to a bit of confusion. Most of the time an HTML element has both a start tag and an end tag, with neither tag representing the whole element, but rather being part of it. With some elements, however, that have no content, only a single tag is used, and that single tag represents the entire element.

Another exception applies to attributes. Most of the time an attribute consists of a name and a value, but some attributes have no value. The checked attribute is a good example of this:

<input type="checkbox" checked>

This input element contains two attributes. The first has a name (type) and value (checkbox), but the second attribute just has a name: checked. The mere presence of this attribute is enough to indicate the state of the checkbox, so no value is required.

Now you know the most common terms used in HTML!