ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How to Add a CSS File to HTML

Updated on October 28, 2012

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.

Path to a css code file
Path to a css code file | Source

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:

  1. Open a text editor such as Wordpad or Notepad.Dreamweaver and the like can also be used.
  2. Enter or copy and paste the HTML pictured below.
  3. 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:

  1. Inline
  2. Internal
  3. 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>
HTML
HTML | Source

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>
Inline Code
Inline Code | Source

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>
The internal CSS will have a link or import address to the .css
The internal CSS will have a link or import address to the .css | Source

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>
working

This website uses cookies

As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://corp.maven.io/privacy-policy

Show Details
Necessary
HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
LoginThis is necessary to sign in to the HubPages Service.
Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
AkismetThis is used to detect comment spam. (Privacy Policy)
HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
Features
Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
MavenThis supports the Maven widget and search functionality. (Privacy Policy)
Marketing
Google AdSenseThis is an ad network. (Privacy Policy)
Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
Index ExchangeThis is an ad network. (Privacy Policy)
SovrnThis is an ad network. (Privacy Policy)
Facebook AdsThis is an ad network. (Privacy Policy)
Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
AppNexusThis is an ad network. (Privacy Policy)
OpenxThis is an ad network. (Privacy Policy)
Rubicon ProjectThis is an ad network. (Privacy Policy)
TripleLiftThis is an ad network. (Privacy Policy)
Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
Statistics
Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
ClickscoThis is a data management platform studying reader behavior (Privacy Policy)