So we have a way of inserting a CSS into our HTML. Now, we start designing starting with headings and paragraphs.
In the previous part of our guide, we looked at how we can actually insert CSS into our HTML. Now, for those who read part 10 of our HTML guide, a few things will be repeated here, but we’ll build on that knowledge as well.
Before we continue, you’ll need a blank CSS file and an appropriate HTML file to begin (we covered this in the previous part of our CSS guide). Also note that if you want to see your changes, you’ll need to save the file and refresh the page to see those changes take effect. We’ll be working with two files: the CSS file and HTML file. If a change is made in both, you need to save both files to see the changes. I recommend having both open at the same time as well as the browser you are testing your page with.
Making Our First CSS Rule With a Heading Tag
Well, first we need an HTML tag before we can make a rule. So, I’m going to create heading using the <h1> tag like so:
Now, if I look at this file right now, all I’ll get is something like this:
Kind of boring, right? It has a very HTML feel to it. It’s aligned to the left for some reason. Yeah, the text size is larger which is a start, but that’s about it. Well, there are a few things we can do with it through HTML, but why? We have the power of CSS in our hands now. Let’s use it!
Let’s open up our blank CSS file.
Now, the rule that we want to add revolves around the <h1> tag, right? Well, let’s type in h1.
Now, CSS relies on curly brackets to read rules. On most standard keyboards, these brackets are to the right of the “P” key. We need to hold down shift for these. So, let’s add a space after our <h1> tag and insert an open curly bracket. Now, the CSS is going to say that we are changing the rule of the H1 tag and the rule we’re changing will start here.
Now, hit enter to go to the next line. A traditional way of spacing out our CSS rules is to now add a tab space. This helps make our CSS rules easier to read, so hit tab for now. Remember that CSS doesn’t really recognize these types of spaces, but for our human eyeballs, it helps a lot!
Next, we are going to insert our rule. Well, how do we want our heading to look? Well, headings are typically aligned to the centre, right? So, let’s change the text alignment. So, type in text-align:. This tells the CSS file that the rule has to do with the alignment of the text in question. The colon after will tell the CSS file that what follows is how we want to align the text. Now, add a space.
Since we want to centre the text, we’ll type in the word center. (Note: right is also available. You can also use left, but that is the default alignment. Under these circumstances, it’s kind of pointless to use).
Now, the CSS will keep reading for other ways in aligning the text. For us, however, we want CSS to stop reading anything more into the rule. So, we need to add a semicolon. This tells the CSS that all we want to do is centre the text and that’s it. Think of the semicolon as a period for a sentence. Now, hit enter.
There is one last loose end we want to tie up. At this stage, the CSS is asking us how else we want to modify the heading. For now, we can be happy that we’ve centred the text. To end the rule, we are going to use a closed curly bracket. Type that in. Your CSS rule should look like this after all of that:
The same code with annotations if it still looks confusing:
Now, let’s save our CSS file and refresh our page in our web browser. It should align to the centre like this:
Congratulations! You’ve just made your first CSS rule!
Adding Additional Rules to Your Heading Tag
So, the question is, is there anything else we can do with the heading tag? The answer is, absolutely. You might think that you need to re-type the h1 rule along with the curly brackets and other stuff. Well, you actually don’t. This is because multiple rules can be applied to the same CSS tag.
First, let’s think of another rule we can apply to our heading. Let’s say that we aren’t exactly happy with the font size. This, of course, can easily be changed.
So, going back to our CSS rule we made in our style sheet, let’s add a line after the semicolon. After that, we are going to hit the tab button again so our next CSS rule lines up with the first.
From there, let’s type in font-size:. After that, let’s add a space. Now, with font sizes, CSS measures in a few ways, but let’s stick with pixels for now. You can use any number you like, but I’m going to use 25 pixels. So, I’ll type in 25px;. When you are done, your CSS file should look like this:
Save the CSS file and refresh your page. You’ll immediately see the font size change to something slightly smaller. It’ll look something like this:
Heh, this CSS stuff is easier then you thought, right?
OK, so what else can we do? Oh, I know! Let’s change the font colour! First, add a line just like last time in our CSS rules and type in color: blue; like so:
Save and refresh the page. You’ll get something like this:
Wow! Three measly rules and it already looks so much better! Of course, things like “blue”, “red”, “yellow”, and “green” are pretty limited, right? The more complete your design, the more you’ll want much more control over your colour choices. Well, there is another way you can pick colours: hex values.
Hex is short for hexadecimal. Think of it as a slightly different numbering system. Normal numbers are numbers 0, 1, 2, 3, 4, 5, 6, 7, 8, 9. Well, hexadecimal actually adds to this. In hexadecimal, you have 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, and f. So, 16 “numbers” to choose from instead of the standard 10 per digit.
Now, in CSS, each colour is denoted by a 6 digit hexadecimal number. For those who have a bit of a math mind, you’re looking at more than 16 million different possible colours to choose from. There is, of course, logic behind the numbers. 0 means that this digit has no intensity. F, meanwhile, indicates maximum intensity. The first two digits represent red. The second two digits indicates green. Finally, the last two digits indicates blue.
For the sake of demonstration, let’s turn our heading red using hexadecimal. So, next to the “color:” rule, we are going to delete “blue”. In it’s place, we are going to type in a number sign followed up by ff0000; like so:
Remember, the number sign is important because it tells the browser that the CSS is indicating a specific numeric value. Save the CSS file and you get this:
That looks OK, but what about colours besides red, green, and blue? Well, in that case, we need to turn up the tensity of more than one colour to get that. So, think back to your art classes. What happens when you mix blue and red? You get purple. OK, so lets try the value ff00ff instead:
Pretty nifty, right? Well, it’s a little light. In fact, it almost looks pink in a way. Well, we can darken this. If you use the value 000000, you’ll create black. ffffff, meanwhile, gives you white. So, let’s bump back the values of red and blue a little. So, let’s try 990099 instead.
There we go, that’s a nice deep purple there. For those of you wondering about yellow, you’ll need to drop all blue and turn up the intensity of both red and green to get that. Bright yellow is ffff00.
Now, some of you might be thinking that there’s got to be better and less clunky ways to pick a colour. There is. A lot of art programs out there feature colour pickers. There’s Photoshop, GIMP (free), and even LibreOffice (MSPaint does not feature hex values). All of these options feature a colour picker that can tell you all about the hex value you’ve selected in a much more user friendly manner.
Alternatively, you can always check out this page for a host of alternative ways you can pick your colours. Remember, though, you’ll ideally want to stick with web safe colours. Not all colours are created equal. This site features a list of web safe colours which may help you narrow down your choices.
Another way we can change the font in our heading is changing the font altogether. For that, we are going to use the font family. You might come across a font that looks great. The only problem is that it’s entirely possible that not everyone has that particular font installed on their computer. This may make your site give errors. That’s where a font family comes in. If one font doesn’t work, then the CSS will tell the browser to fall back onto another font. It’ll keep going down the list you provide until a font becomes available. It’s a very safe method of changing the font. Just make sure the fonts are at least similar to each other so your design won’t deviate that much from what you’d expect.
One good example of a font family is Arial, Helvetica, sans-serif. So, let’s go ahead and try that out. First, we’re going to add a new CSS rule. Then, we’re going to insert font-family: Arial, Helvetica, sans-serif;. After saving, you should have something like this:
The question is, what other fonts are available. Technically, you could plug in any font you have on your system by browsing any text editor font selection. However, you might want to stick with more web safe fonts. this website lists 15 web safe fonts you can try. For all those font experts out there, yes, Comic Sans is listed as one example of a web safe font. You can stop yelling at the screen now.
While there are many ways you can change the headings, that’s just a few examples to get you started.
Paragraphs
So, having gone through headings, let’s next take a look at some body text. More specifically, paragraphs. If you’ll remember right from HTML, the paragraph tag is <p>. So, let’s go back to our HTML file and insert some paragraphs using that tag. I came up with this:
… and the resulting page looks like this:
Ehh, those paragraphs could use some work – and I’m not talking about what the text is saying.
What would happen if we wanted to add indentations? That is actually very doable. First, we need to create a new CSS rule. We are changing the <p> tag, so in a new rule below our H1 rule, we’re going to type in the letter p.
Next, in the curly brackets, we are going to type in text-intend: 2em;. From there, we are going to close the rule with a closed curly bracket. This is what the sheet should look like:
… and the results?
Just like that, the first line in each paragraph is nicely indented. Obviously, text indentation is strictly a personal preference to the designer, but it’s good to know that you have that option available to you.
Now, you might be wondering what em is. This is a different unit of measure that you can use. In this case, this unit of measure is basically relative to size of the font. If you are wondering what other units of measure are available, you can check out this site for a more complete list. For me, it’s the only time I really use anything other than pixels to measure something out.
The next question is, what other options are available to adjust the paragraphs? One thing someone other than a designer might not consider is the height of each line. The default is generally fine, but it would be nice to know how to control it if need be.
So, to adjust the line height, let’s add the CSS rule line-height: 17px; to our paragraph tags. It should look like this:
It may be hard to see the difference in the screen shot, but when you refresh the page, you’ll see the difference more easily. Here’s a screenshot anyway if you are curious:
Another way we can affect paragraphs is adjusting margin between paragraphs. We can adjust the margin to the top, left, right, and bottom. Since we don’t want space at the top of our paragraphs, the logical choice is to add a margin to the bottom. This will separate the paragraphs without separating the top of the text with the title.
So, let’s add a new rule: margin-bottom: 20px;. This should make your CSS sheet look something like this:
Again, it may be a bit difficult to tell from the screen shots, but you’ll notice a difference once you save and refresh. Here’s a screenshot of the results I got anyway:
Now, some of you might be wondering if it’s possible to create a hanging paragraph. While it’s unlikely this is going to be used in most designs, a hanging paragraph is the perfect opportunity to show you how to use negative values in CSS measurements.
First, let’s adjust our text-indent rule to show -2em.
After that, let’s add a margin-left: 2em; rule. Your CSS sheet should look like this after:
… and the results:
Indeed, negative values can increase the flexibility afforded to you in your design with minimal code.
So, what else can we do with paragraphs? Well, you know how some documents increase the size of just the first letter? CSS can do that with the addition of a simple rule.
First, go ahead and delete the margin-left rule and the text-indent rule.
After that, let’s add an entirely new rule outside of the paragraph rules. Below everything else, type in p::first-letter.
Now, within the curly brackets, lets increase the font size by 200% and then give it the same purple colour as the heading. After all of that, your CSS file should look like this:
After saving and refreshing, I wound up with this on my page:
You can mix and match a lot of these rules around. Everything revolves around text, so alignments, margins, size, family, and colours will all work the same.
Yes, there is significantly more you can do with those paragraphs and headings, but this should provide you with a nice starting point to customizing the look of your page.
Congratulations! You now know some basic CSS rules that customize headings and paragraphs!
< Creating and Attaching CSS | CSS Index | Images and Backgrounds >