Time for action – handling search engine bots/screen reader text

You'll note in the HTML5 markup, we have several headers and hgroups assigned a class called .screen-text. This is the text that users viewing the styled site in a browser won't see, but makes things clear for text screen readers and may have some SEO benefits. Let's add the styling for it:

  1. In the TYPOGRAPHY section of your stylesheet, add the following:
    /* Text meant only for screen readers */
.screen-text{
  position: absolute;
  left: -5000em;
}
  2. Save your style.css file.

What just happened?

We added some property settings to move any text that has the .screen-text class assigned to it, 5000em units to the left. Assuming most people have a screen that's smaller than 5000ems, this will be hidden from view.

Let's take a look at our basic text styling so far. The following image shows our mockup starting to take shape:

What just happened?

Tip

If you don't like how your text looks here, then a bunch of graphics, columns, and layout adjustments won't help! Take your time getting the text to look nice and read well now. You'll have less edits and tweaks to make later.

Setting up our layout with CSS

Now that we've got our initial typography set up, let's start making this stuff look like our sketch! First up, we'll add a call to the layout-core stylesheet to give our theme some basic layout styling.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset