Embedded Files
One of the most common uses for CSS is to style text. Most webpages include text, after all, and changing the look of it can go a long way toward giving a webpage a more unique appearance. Without changing the HTML underneath, CSS can be used to alter the size of text, the font, the boldness, the alignment within a paragraph, and more.
Size
When you add text to a webpage—a <p> element, for example—there is a default size at which your browser will display it. For most browsers, that size is about 16px, which is short for 16 pixels. If you want your text to be bigger or smaller, though, you can use the CSS font-size declaration to set the size to whatever you want.
For example, you already have one font-size declaration in your styles.css file:
font-size: 18px;
You probably won't have any frame of reference for how big or small 18px is just by reading the number. However, knowing that the browser's default is about 16px means that you can make some assumptions, like that adding a font-size: 18px; declaration will make your text a little bit bigger, as you saw.
You can also use a number of other measurements in the font-size declaration to change your text size, such as percentages and relative measurements. For simplicity's sake, though, we'll mostly be sticking to pixels (px) for these tutorials.
It's also important to note that 1px in CSS does not necessarily correspond to 1 physical pixel on your device screen. A pixel in CSS is an abstract unit of measurement that should look about the same size on any device, while the physical pixels on a screen can vary widely between devices.
Font
One of the simplest ways to make a major change to the look of the text on a webpage is to change the font. When no font is specified, most browsers display text in the Times New Roman font. You've probably seen that font many times in many different contexts, but most webpages will make an effort to move away from Times New Roman, even if only to make themselves look more unique than the default.
To change your webpage's font, you can use the CSS font-family declaration to specify what font you want to use instead. For example:
font-family: 'georgia';
You can also give the font-family declaration a value that specifics only a generic type of font, such as sans-serif or monospace, and your browser will change it to a fitting default.
Not every browser will recognize every font, and you can even add new fonts to a webpage that your browser doesn't recognize by default. For now, though, stick with the built-in fonts that we suggest, because most browsers will recognize them. Below are some of the most common web safe fonts that you can use on any website:
Arial
Courier
Garamond
Georgia
Helvetica
Tahoma
Times New Roman
Trebuchet MS
Verdana
Weight
You used the <i> and <b> HTML elements to mark certain sections of text as being italic or bold. However, you can also use CSS to accomplish the same things. For example, the CSS font-weight declaration can be used not only to make your selected text bold, but also to specify how bold it should be.
There are a few different ways to specify the boldness of your chosen font, but the simplest is just a single-word value:
font-weight: bold;
Alignment
Finally, you may also want to change the alignment of your text. By default, your browser will display any text you add to your page as left-aligned, just like you would read it in a book:
However, you may occasionally have reason to align it to the right, or to justify it (where each line has equal width, like in a newspaper or magazine). Most commonly, though, you might want to center it:
You can use the CSS text-align declaration to change the alignment of your selected text, and the values are predictable: left, right, justify, or center. For example:
text-align: center;
Multiple Declarations
Now that you've see a few different CSS declarations, it's also important to note that a ruleset can include more than one declaration at once. For example, let's say you wanted to make some changes to the main header to which you attached the #header id. You can add just one ruleset to your stylesheet:
#header {
}
And then add multiple declarations all in a stack:
#header {
font-size: 18px;
font-family: 'georgia';
font-weight: bold;
text-align: center;
}
As with HTML, your browser is not particularly concerned with formatting, and it's mostly for your own sake that you should try to keep your CSS neat and orderly. For example, your browser wouldn't care if the ruleset above looked more like this:
#header{font-size:18px;font-family:'georgia';font-weight:bold;text-align:center;}
However, keep in mind that your browser will definitely get confused if you leave out the semi-colons that end each declaration. They are the only way your browser can know when one declaration ends and the next begins.
Try this!
Try adding each of these declarations to the input below:
font-size: 18px;
font-family: 'georgia';
font-weight: bold;
text-align: center;
The selector for the ruleset is already defined for you, and targets the paragraph to its right. Once you've tried those declarations, try changing some of the values yourself. For example, set the font-size to a different number (don't forget to include "px") and see what happens, or try another font-family, like "courier" or "arial."
Try this in your codepen editor.
Do it yourself!
Open the styles.css file in your Programming Tutorials project in your text editor, and let's add some new text styling declarations. For the best understanding, be sure to actually type this code in, rather than copying and pasting it.
First, find the #header ruleset you added in the last lesson. You don't need to do anything here; just notice that you've already added a text-align declaration, which centered your header on the page.
Next, move down a couple of lines and add a new ruleset. The selector for this one should be body, which will target the <body> HTML element—in other words, everything on the page—and the declaration will be font-family. You could choose whatever font you wanted (as long as your browser recognized it), but let's just choose 'georgia,' like we did earlier: body {
font-family: 'georgia';
}
Move down another couple of lines and add another new ruleset. This time, the selector will be button, which will target every <button> HTML element on the page. Given that there's only one button on the page, there isn't any particular need to add a class or id to it, because you don't have to specify which button you mean: button {
}
Let's add two declarations to this ruleset. First, a font-weight declaration to help the button text stand out a little more: button {
font-weight: bold;
}
Next, let's add a font-size declaration as well. While the browser defaults for most text HTML elements are a size of about 16px, <button> elements tend to have a smaller default. Let's increase the size a bit: button {
font-weight: bold;
font-size: 16px;
}
Your full styles.css file should now look like this:
p {
font-size: 18px;
}
#header {
text-align: center;
}
body {
font-family: 'georgia';
}
button {
font-weight: bold;
font-size: 16px;
}
Congratulations, you've styled your text with CSS!
Final Code index.html
Final Code index.html
<!DOCTYPE html>
<html>
<head>
<title>Cinema Classics Movie Reviews</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="header">Cinema Classics Movie Reviews</h1>
<div class="review">
<h2 id="myFirstId">Review: Basketball Dog (2018)</h2>
<img src="https://media.yourWebSite.org/global/coding/basketballdog.png">
<p><i>4 out of 5 stars</i></p>
<p class="myFirstClass">From director <b>Vicki Fleming</b> comes the heartwarming tale of a boy named Pete (Trent Dugson) and his dog Rover (voiced by Brinson Lumblebrunt). You may think a boy and his dog learning the true value of friendship sounds familiar, but a big twist sets this flick apart: Rover plays basketball, and he's doggone good at it.</p>
<p>This movie has everything you could ask for:</p>
<ul>
<li>Basketball</li>
<li>A dog</li>
<li>Nail-biting suspense</li>
</ul>
<p>While it may not have been necessary to include all 150 minutes of Rover's championship game in real time, Basketball Dog will keep your interest for the entirety of its 4-hour runtime, and the end will have any dog lover in tears. If you love basketball or sports pets, this is the movie for you.</p>;
<p>Find the full cast listing at the <a href="https://edu.yourWebSite.org">Basketball Dog</a> website.</p>
<button>Show Next Review</button>
</div>
</body>
</html>
Final Code styles.css
Final Code styles.css
p, li {
font-size: 18px;
}
#header {
text-align: center;
font-size: 100px;
font-family: 'Garamond';
font-weight: bold;
}
#myFirstId {
color: red;
}
.myFirstClass {
color: red;
}
button {
font-weight: bold;
font-size: 16px;
}
Page updated
Report abuse