Using Simple CSS Styles for text
In this lesson we learn some styles we can apply with CSS to make text on our websites more visually attractive.
Let’s make some changes to the CSS in our sample website so we can learn some new CSS styles.
Use the buttons below to navigate through the lesson
(If you don’t have a sample website then return to our course on understanding basic HTML and work through those lessons)
Find the selector that applies to the <h1> tag. From the last lesson you should know that the selector for that is just “h1”.
Change the CSS for that line from this:
h1 { font-size: 1.8em; }
To this:
h1 { font-size: 1.8em; text-transform: uppercase; text-align: center; text-decoration: underline; color: white; background: black; padding: 10px 0px; }
So we have added a number of extra styles to our <h1> tag. Let’s look at what has changed.
Originally our <h1> element (which you hopefully remember is the main title of the page – the “heading 1”) on the page appeared like this:
Now with all the extra styles it appears like this:
Let’s look at why by looking at each style in turn:
Font-Size Style
The “font-size” style hasn’t changed. We originally set it to “1.8em” and that is still the same. Font-size determines how big the text appears on the screen. It can be in pixels or ems or points.
We are usually most familiar with expressing font sizes in points – these are the units we use in word processing programs when we change the font size. So we would express this as “font-size: 12pt” in CSS.
An em is an alternative way of expressing how large a font can be. They are scalable depending on how large the font size is set to in the users browser. So a font-size of 1.8em is saying “set it to 1.8x the size of the font”, or “set it to 180% of the normal font size”. In other words anything larger than 1.0em increases the font size, anything less than 1em shrinks it.
You can experiment with this yourself using the Browser Tools – practice setting the “font-size” element to 0.5em, then 1em, then 1.5em so you can see if for yourself!
Text-Transform Style
Text-transform allows us to change the case of the letters. For example, if we have a particular part of the page we want to appear in all uppercase or lowercase, we set text-transform to “uppercase” or “lowercase”. If we wanted to draw attention to all our links perhaps we would put all of our <a> tags in uppercase:
a { text-transform: uppercase; }
Text-Align Style
Text-align defines how the element is aligned on the page. You may be familiar with centering text, or aligning it to the left or the right. Text-align takes everything inside the element(s) defined by our selector and aligns it either left, right or center, e.g.:
text-align: center;
You can see the the text of our title is now centered since we applied this rule.
Text-Decoration Style
By now I’m sure you’re guessing what each of these styles does! Text-decoration allows us to apply effects to the text. In this case, we are adding an underline:
text-decoration: underline;
We could also set it to “overline”:
Or to “line-through”:
Color and Background Styles
color: white; background: black;
These are self-explanatory – you can choose a foreground and background color using the color and background styles. For example:
color: orangered; background: aliceblue;
As you can see, my browser supports complex colors like “aliceblue” and “orangered”.
However, we cannot rely on naming all of our colors: what if we want a very subtle shade? This is where hex color codes come in.
Usually we specify our colors using a hex code. This is a six digit number, written beginning with a “#” symbol, e.g. “#000000”.
Each digit can be 0-9, or A-F. This is a hexadecimal system, so A, B, C, D, E and F are all considered larger “numbers” than 0-9. Think of them like the Jack, Queen, King and Ace in a pack of cards: in many card games they have a value of Jack = 11, Queen = 12, King = 13, etc.
So in hexadecimal A = 10, B = 11, C = 12, D = 13, E = 14 and F = 15.
So the lowest possible value for a colour code is “#000000” and the highest is “#FFFFFF”.
The six digits are divided into three pairs, one for Red, one for Green and one for Blue – in that order.
So pure red would be “#FF0000”. In other words, the maximum amount of red, and no green and no blue.
Pure Green is then “#00FF00” – maximum green, but no red or blue.
Pure Blue is “#0000FF” – maximum blue, but no red or green.
Now you know this you might be able to guess what color “#000000” corresponds to. No red, no green, no blue… so it must be black!
Similarly, “#FFFFFF” is all red, all green and all blue – when we mix all the colors together we get white!
We can also mix colors. So
color: #EE5566; background: #99AADD;
translates to look like this:
Try experimenting with your own color codes by entering values in the “color” field using the Browser Tools. Start with the “#” symbol then enter six digits from 0-F and get a feel for how they are created!
Padding Style
The final style we have added is “padding”. Let’s see if we can see what difference our padding makes.
Let’s look again at our title:
This is with padding set to “10px 0px”. What if we set it to “0px 0px”?
Can you see the difference? Without the padding there is less space above and below the text. So padding adds extra space to the inside of an element.
Padding can get very complex so we will look at that in more detail later in the course.
So we have learned a number of CSS styles:
font-size, text-transform, text-align, text-decoration, color, background, padding
We can apply these to any element to transform the way our text appears.