Hi, I'm Dr. B and welcome to my digital composing instructional video series.
In this tutorial, I will demonstrate how to add some very common CSS text formatting rules to an HTML document.
Before starting today's tutorial, make sure you have your HTML editor open and have created a new HTML document.
Then, look for and click the link that reads "click this link to access the text used in the tutorials."
Once you've located the text that we are going to be using in the tutorial, highlight it, copy it, go into your HTML editor and paste it between the open and closed body tag of your HTML document. Once you have the tutorial text pasted into your HTML editor the next step in the process is to go up into the head section of the document and add an open and closed style tag.
make sure to save your document and let's take a look at what we have.
As you can see we have some basic formatting here, but it's kind of boring, there's not much going on here.
So, let's go ahead and add some CSS formatting rules to our document.
So, let's go back to our HTML editor and the first thing we're going to do is we're going to format our headings.
What I want to do is I want to change the color to red and I want them to be centered on the page
To do so, we type in h1 as our selector, add or curly brackets, we then add the property color, add the value red making sure to add our colon between the two, drop our semicolon in,
And the next property I want to add is text-align, drop my colon, and my value is gonna be center.
So let's save it and let's take a look.
As you can see, my headings are now red and they're now centered on the page.
Now let's go back to our HTML editor.
The next thing I want to do is format my paragraphs.
What I want to do is I want to change the line spacing to double space, I want to indent the first line of each paragraph, I'm gonna change the font size, and then I'm going to change the font.
So to do so, we're going to put our p in as our selector, make sure to add our curly brackets.
The first property I'm going to put in is line-height, so h e i g h t, and what I'm going to do is I'm going to put in a value of 2em.
Now em is a measurement, it basically reads how big the font size is and then bases all of its measurements off of that.
So, 1em would be the standard font size, 2em would be twice the standard font size. If your font was 12, that would be 24. Next, I'm going to do text-indent, which is how you control the indent of the first line of a paragraph.
In this case I'm going to add the value of 20px. Px is also a measurement. It stands for pixels and what it does then is it will basically move the first line of my paragraph 20 pixels in.
Next, I'm going to change the font-size to 18px, a little bit big, but that's OK. I'm just basically trying to show you how it works.
And the last thing I'm going to do, then, is change the font-family to impact.
So, what I've done is I've told my Internet browser that I want my text to be double spaced, I want the first line to be indented 20 pixels, I want the font size to be bigger, in this case 18, and I want to change the font and I want the font family to be impact.
So, I'll save this, I go back to my Internet browser, I'll reload my page and, as you can see, all of those formatting rules have been picked up.
Notice that by using em for the line height, I don't have to go back and readjust how much space I want between my lines. It's automatically going to add two times whatever the font size is that I selected. In this case 36.
Now, let's go back to our HTML editor, let's do some additional formatting.
The next thing I want to do, is I want to make sure that my headers, at least the first one, will always show up in capital letters.
To do so, I'm going to create a class. Remember when we use classes we start with the period.
And I am going to type in .uppercase to remind myself that this is going to be a class that makes everything in it uppercase.
Now inside my curly brackets, then, I'm going to add the property text-transform and the value is going to be uppercase.
I can do lowercase if I wanted to, which would make everything lowercase. I could even put capitalize which would capitalize the first letter of each word.
Now, to use this, I'm going to go into my first h1 tag, I'm going to add the class attribute, equals, put my double quotes in, and between my double quotes I'm going to add the class name uppercase.
If you save that, go back to your browser, refresh our page, we'll see that my first heading is now formatted in all capital letters.
Once again, not awesome, but it shows you what's CSS can do.
Now let's go back to our HTML editor.
The last thing I'm going to do is show you something kind of fun.
What I'm going to do is show you how to build a shadow around your text and am going to do it by using the class shadow.
I am going to put my curly brackets in.
And the property name that I am going to use is text-shadow
This property requires a few different values.
First, you have to put in both the horizontal and the vertical shadow. In this case I'm using 2px, which is pretty standard.
To use it, I am then going to add the class name shadow to my class attribute of my first heading.
I am going to save this document.
Go back to my browser, and as you can see, we now have a shadow, although you can't really tell what it is because we haven't changed the color yet.
So, if we go back to your HTML editor.
We're gonna add green directly after the two values is included for the horizontal and vertical spacing or my shadow.
I'm going to save it, go back to our browser and refresh it, now you can see there's a nice shadow there.
Now, if I wanted to, I could then blur it so it looks more like a shadow.
To do so, I would add one additional value here. In this case I'm going to use 5px.
We're gonna go back, take a look, and as you can see it's now blurred.
It looks kind of interesting.
Now if we wanted our shadow to completely surround our text, make it look more like a highlighter, what we do is we change the first and second value here to 0 and we'll save it, and we'll take a look.
Now, as you can see, I have some highlighted text.
This is, of course, not the most awesomely formatted document in the world, but it does illustrate what can be done with some CSS formatting.
There is of course a lot more you can do, but those are the common properties that are used for formatting text with CSS.
That's it that brings us to the end of today's tutorial.
I hope you enjoyed today's tutorial and that you are enjoying building your own digital compositions.
As I always say, thank you for playing along and for trusting in the process.
Dr. B’s instructional video series is brought to you in cooperation with the Bacha Design Group.
For more information about the Bacha Design Group, or to view more tutorials, please visit us online at jeffbacha.com.