Hi, I'm Dr. B and welcome to my digital composing instructional video series.
In this tutorial, I describe how to build a list of CSS formatting rules by building style declaration blocks.
CSS formatting rules are created by grouping individual declarations into a list or declaration block.
Each list, or declaration block, can have an unlimited amount of individual declarations included inside of it.
Please note, however, that when formatting HTML elements with CSS, you want to make sure you put all formatting rules for each element in an individual block.
As I discussed in a previous tutorial, all CSS definitions begin with a selector and then include a list of style declarations.
It is important to remember that all style definition lists, or declaration blocks, need to be surrounded by curly brackets.
All individual declarations contain the property we want to add to our HTML element and the value separated by a colon.
At the end of each declaration, we then add a semicolon to separate out each of the individual declarations in our declaration block.
So let's take a look at how this process works.
As you can see in my example here, the first thing we need to do is figure out what HTML element we want to format.
In this case, I'm going to be formatting my paragraph text, so I first add the tag name p and then I include my curly brackets so I don't forget later.
Next we need to add our individual declarations.
As you can see here, I like to stack my declarations so that I can read them easier.
In this case, I wanna change the text color to red, so I Simply put color, colon, red, and then add a semicolon at the end.
It is important to point out here that when I use the paragraph tag as my selector, the CSS rule that I create will affect every p tag inside my HTML document as shown in the example.
To continue building our list, we first add the next property we want to define, add a colon, and then add our value.
In this case, I want to change the font weight to bold.
We then end our declaration by once again adding our semicolon.
As you can see in this example, CSS contains a number of different properties that we can define individually within our HTML elements.
The key to working with CSS is to know what you want to do formatting wise then find the correct property to make that formatting happen.
The last thing to keep in mind, as I said earlier, is that when adding a list of CSS declarations we want to make sure we add each individual declarations to the same list.
In this case, the p. If we decided at a later time to add more formatting rules to our paragraph tags we would then return to this list and add them here.
We would not create a new list
In the next tutorial, I will show you how to add your style definitions to an HTML document. For now just remember that when building your list of declarations colons, semicolons, curly brackets, and their proper placements are very important.
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.