CSS is the portal to wonderful HTML design options. Knowing how to get those designs into your HTML code makes that magic happen. In this brief guide, you will learn the basics of using a CSS stylesheet in your own work.
The guide will cover the three options available to you for inserting a stylesheet. These include the CSS inline style, the CSS internal style, and finally the CSS external style. Sample code and images will provide you with a great visual aid to help you along the way.
What is A CSS Stylesheet?
Before you venture into the stylesheet options, you might wonder just what a CSS stylesheet is to begin with. When you load an HTML document into a browser, it only contains the most basic style options such as headings or paragraph tags.
The goal of CSS is to allow you to manipulate those HTML elements in various ways. This takes the form of changing font color, adding borders, hover effects when a mouse holds over the target element, and much more.
The stylesheet is a way to link that power to the HTML document. The browser can interpret the effects the CSS stylesheet wants to enact. These changes then appear on the final rendered page for the end-user. Essentially, A CSS stylesheet communicates your design needs to the browser so they can take effect.
How to Use A CSS Stylesheet
A CSS stylesheet can be used in three main ways. Each of these is listed below and will be explored in more detail.
- CSS Inline Style
- CSS InternalStyle
- CSS External Style
Each of these methods for adding CSS has its own method of use. In the next section, you will see how to implement them as well as why you might use them.
CSS Stylesheet: The CSS Inline Style
The CSS inline style is used directly on the HTML document. It targets an element on the page directly by being included in its tag. Quite literally, the style is added within the lines of the element itself, thus leading to the term inline style.
To demonstrate this, take a look at the sample HTML code below.
Currently, no CSS stylesheet of any sort is in use. This gives the following output on the HTML page.
To use the CSS inline style, you have to insert the style property into the HTML element tags. This is done within the opening tag of the target element. Directly after the tag name, place a space and type in the word style followed by an equals sign.
After the equals sign, place a set of quotation marks. Inside those quotations, you will provide the CSS design properties you wish to use. Remember to end each property with a semicolon You can see this in the example below.
In the sample HTML code below, you can see this has been done for the paragraph element.
The inline style inclusion will result in the following change on the HTML page.
The paragraph element now has purple coloring as well as being set to a font weight of bold.
Using the CSS inline style can be a quick and easy way to enact design changes to your work. However, it is not something well suited to heavy design work. Consider if you used this for all of your CSS needs. It would quickly create a bloated HTML document that would be hard to read.
Fortunately for you, there is another way to insert a CSS stylesheet into the HTML that does not keep it directly within each element on the page.
CSS Stylesheet: The CSS Internal Style
The CSS internal style method still includes the stylesheet on the HTML document as seen with the CSS inline style. However, a key difference is that the CSS stylesheet is localized within the head tags at the top of the document.
In the HTML example code below, you can see how the style tag was inserted directly after the title tag within the head section.
In the next example, sample CSS code has been inserted in between the style tag that will affect the way the paragraph element is displayed on the page.
Using the applied CSS will provide the following output on the page.
Using the internal CSS stylesheet leaves the main HTML document code much cleaner as opposed to the CSS inline stylesheet as it localizes all of the CSS in one space. Yet, as a site’s designs grow and other functionalities are added, it can become quite overloaded. This is where separating the HTML and CSS can be a great idea.
CSS Stylesheet: The CSS External Style
With a large site, the design aspects can quickly pile up. This can leave the main HTML document a cluttered mess. To avoid this issue you can use an external CSS stylesheet. This stylesheet method allows you to apply the CSS to the HTML in a separate space.
To use an external style sheet, the HTML document must know where to look for it. This is achieved by using the “link” tag inside the head of the file. The link tag will let the HTML file know what it is looking for and where it is.
The external stylesheet can be created in a text or code editor just like the HTML document. It is important to note that the CSS stylesheet needs to be saved with the “.css” file type extension so that it can be referenced properly. You can name the stylesheet whatever you would like, although be sure to also use the same name when referencing it for use on the HTML document.
In the HTML code example below, you can see how the link tag is placed within the document.
The CSS stylesheet itself does not require any specific headers. It simply needs to know what HTML element you want to target and the properties you are working with for it. In the CSS stylesheet sample below, you can see that the paragraph element is set up for styling.
The paragraph (p) element has five separate CSS properties applied to it. Imagine if you needed to work with over 10 various HTML elements on a page. That alone would bloat the HTML code quite a bit. However, with the use of the external stylesheet, you don’t have to worry about that.
With the HTML document linked to the stylesheet, the page will have the following output on the paragraph element.
Just like that, the styles are brought over and applied to the target element without any extra steps. Knowing how to link those styles over is just the tip of the spear in terms of CSS power.
Consider reading our blog post on Creating HTML Forms and Building A CSS Dropdown Menu to learn how to enhance your page functionality. Adding in an extra punch through the use of Javascript can take that to another level. Check out How to Add Javascript to HTML and Creating Javascript Popup Windows for great guides on those topics.
Whichever path you choose to focus on, know that it all helps. Building your CSS toolbox can be a fun and rewarding experience. Just remember to have fun along the way with all the wonderful skills you pick up.
_________________________________________________________________
Why stop at just CSS? The creative ability in programming is allowing people to do even more with their ideas. If you want to advance your career, take the first steps by learning to code. Having these skills can help you open doors to those new professional possibilities. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.
