How to Add a CSS File to HTML
What Does it Mean to Add a CSS file to HTML?
CSS stands for cascading style sheet. CSS can be either an external file, in-line or internal code that is read by the browser which in turn displays the HTML document as indicated in the CSS file. An HTML code will contain a reference in it telling the browser what CSS file to access for the display.
In this tutorial it is assumed that you have basic knowledge of CSS coding (cascading style sheet) and HTML (hypertext markup language). This tutorial will demonstrate how to add CSS code to an HTML document.
A website is a document written in HTML. CSS is a style sheet language that works together with the HTML document adding fonts, colors, background, text, link effects, etc.
Three Options to Add CSS to HTML
There are three options that can be used simultaneously or separately to add CSS to an HTML document. They are:
- Internally - Internally is when the CSS code is placed between the opening <head> and the closing </head> tags.
- In-line - You code CSS in-line by placing the CSS style in-line with the element you want it to affect.
- Externally - External CSS is a file saves as a .css that contains all the codes for the website. Each HTML document you will place a reference with either the <link> or import tag.
INTERNAL
TRY IT!
To see how adding CSS to your HTML will look on a browser just follow along:
- Open a text editor such as Wordpad or Notepad.Dreamweaver and the like can also be used.
- Enter or copy and paste the HTML pictured below.
- Save the document as “css to html.html”.Make note of where you save the document so you can find it in the next step.
Now open your web browser.If you use Internet Explorer, at the top left click on the word File then Open.In the box, either type the location of the document you saved in step three or you can click on browse and navigate to the saved file and select it.Then click OK. If you’re using Google Chrome or Firefox, in the address bar, type the location of the saved file starting with the drive letter (c:/) and then the location and hit enter and your web page will appear.
Below is a picture of the code and below that is the resulting browser display.
Advantages and Disadvantages
The internal style sheet is good for when you have an HTML that is only one page. If you have more than one page it's not a good choice, the external stye sheet would be a better choice.
Inline is good for when you want certain parts of each page to have a unique display. Each page must be edited individually like the internal CSS.
Saving your CSS external is good for a multi page website, which most are, because you only edit the one .css file to affect the entire webpage you have linked to it.
If you choose to use several methods on you HTML they will cascade in this order:
- Inline
- Internal
- External
This means that the browser will display what the inline text says before it will display the internal or external text option. The internal will be displayed before the external will be displayed.
Play around with your CSS coding like the example above. With a little practice you'll be entering code into your own HTML in no time!
<html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Enter Your Title Here<title> </head> <body> <h1 style="color: rgb(51, 51, 255):">This is Where You Put the Heading </h1> <span style="color: rgb(51, 255, 51);><span style="color: rgb(51, 51, 255);"<Enter text here. This is fun! </span>.</span> </body> </html>
INLINE
When a style is added in-line it is placed alongside of the element you want to style. See the sample code below.
- <P tells the browser this is the beginning of the paragraph.
- Style tells the browser it's going to be styled.
- The rgb (51, 51, 255) tells the browser to make the letters blue.
- </P> tells the browser this is the end of the paragraph.
Styling an HTML document inline will only affect the element it is placed inline with on that page. Each element you want styled must be edited individually.
Inline Code
<p style="color: rgb(51, 51, 255);>Your Styling is Here in Blue</p>
EXTERNAL
Where the internal CSS is saved as an .html the external CSS file is saved as .css. A CSS file contains no HTML. It contains the CSS styles that are to be applied to the HTML document(s).
To apply an external style sheet to an HTML document a link or import tag must be included in the HTML document between the <head> and </head> . This link or import tag points to the CSS file to be applied to the HTML document.
<head> <title><title> <link re="stylesheet" type="text/css"href="style.css"/> </head> <body> ~OR~ <head> <title><title> <style type="text/css">@import url(enter the path to your stylesheet.css)</style> </head> <body>
CSS External Style Sheet Example
The external style sheet that your HTML links to or imports will look something like the code below.
External Stylesheet
<!DOCTYPE html> <html> <head> <style> body h1 {color: #51, 51, 255} </style> </head> <body> <h1>This is where you put the heading<h1> <p>Enter text here. This is fun!</p> </body> </html>