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:
TYPOGRAPHY
section of your stylesheet, add the following:/* Text meant only for screen readers */ .screen-text{ position: absolute; left: -5000em; }
style.css
file.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: