Hi, I'm Dr. B and welcome to my digital composing instructional video series.
In this tutorial, I described three different ways you can add CSS to an HTML document.
When working with CSS, there are three different methods you can use to add your formatting rules to an HTML document.
First, you can add a style attribute to your HTML elements and do what is known as inline styling.
However, when using this approach, the only HTML elements that will be impacted by your formatting rules are the ones which you add the style attribute to.
Second you can add a style tag to the head section of your HTML documents and build what is known as an internal style sheet.
In this case, your formatting rules will impact the entire document.
However, they will only work on the document that you add the internal style sheet to.
The last method is to build an external style sheet and then add a link to it inside the head section of your HTML documents.
Like an internal style sheet, the formatting rules you add to an external style sheet are capable of impacting the entire HTML document that you provide a link to the style sheet of.
Each of the three methods have their advantages and each can be used in different contexts.
However, building an external style sheet is the preferred method because you only have to write your rules once and then include a link to the style sheet on each page you want to include it on.
You don't have to repeat your styles in the head of each document and you don't have to repeat your rules in every HTML element you want to format.
So, let's take a closer look at each of the three different methods.
As you can see here, I've added some inline styling rules to my p tag by using the style attribute.
Notice that each CSS declaration is formatted the same. We start with the property, we add a colon, we add a value, and then we add a semicolon to separate our different declarations.
As you can see in this example, however, those formatting rules I added only impact the p tag that I specifically applied those rules to using the style attribute.
Every other paragraph tag in the document will not be formatted according to those style definitions.
In this example, I have started building an internal style sheet. Notice that to do so, I add a style tag inside the open and closed head tag of the HTML document.
Notice that when I add my style declaration block between my open closed style tag, in this case I'm formatting the p tag, each paragraph tag in the document, then, is formatted the same as shown here.
In this example, I've started building what is known as an external style sheet, which is just that. It's a new file saved as .css and only includes my CSS formatting rules.
To include my external style sheet in an HTML document, I would then add a link to it inside the head tag of the HTML document I want to attach it to.
As you can see in the highlighted portion of the code box, what we do is we add a link tag. We include a rel attribute and name it style sheet. We include a type attribute, we call it "text/css". We then add a link using the href attribute.
Once you've included your link and saved your HTML document, when you render the page in an Internet browser, the document, then, picks up those formatting rules included in your external style sheet as shown here.
Notice also, that, like an internal style sheet, an external style sheet will impact each HTML element that the style sheet targets.
So each paragraph tag in the HTML document will pick up the same formatting rules that I included in the external style sheet that I created.
As I said, each method has its advantages and drawbacks.
You can also include all three methods in the same HTML document if you would like to, however, there is an order in which an Internet browser will render those CSS formatting rules.
First, the Internet browser will read the external style sheet and format the document accordingly.
Second, if you've included an internal style sheet, the Internet browser will then read those rules and add those to the document. Thus overriding and replacing anything in the external style sheet that is in conflict with the internal style sheet.
Lastly the Internet browser will then look for inline style formatting rules and format your HTML elements accordingly.
In later tutorials, I will show you how to incorporate all three of these methods in an actual live HTML document.
For now, it is important to note that internal style sheets override external style sheets, inline styling overrides internal style sheets and external style sheets.
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.