Download ArticleDownload Article

HyperText Markup Language (HTML) defines what the different pieces of a web page are. The Cascading Style Sheets (CSS) coding language describes what those pieces should look like. A CSS file can be added to HTML as an external style sheet, CSS included in a separate file from the HTML, or an internal style sheet, CSS included within the HTML file. Learn how to add a CSS file to HTML in order to customize your website design.

Method 1
Method 1 of 2:

Add an External Style Sheet to HTML

Download Article
  1. How.com.vn English: Step 1 Create the CSS file.
    Prepare and save your CSS file with the ".css" file type.
  2. How.com.vn English: Step 2 Upload your CSS file to your website.
    Advertisement
  3. How.com.vn English: Step 3 Copy the URL of your CSS file.
    The URL might look like www.yoursite.com/stylesheet.css.
    • It's good form to remove the main domain name from the link (URL). Therefore a URL of "http://mysite.com/css/default.css" would be shortened to "/css/default.css". You must include that leading slash ("/"). This is called a relative path.
  4. How.com.vn English: Step 4 Add a link to the file.
    Find the </head> tag in your HTML file, and create an empty line just above the tag. Add <LINK rel=stylesheet type="text/css" href="www.yoursite.com/stylesheet.css"> to that empty line, changing "www.your..." to the link to your CSS file.
  5. How.com.vn English: Step 5 Save your HTML file, and upload it to your website.
  6. How.com.vn English: Step 6 Verify that everything on your site looks how it is supposed to look.
    If it doesn't, you may need to go back and look for any corrections or adjustments you need to make.
  7. Advertisement
Method 2
Method 2 of 2:

Add an Internal Style Sheet to HTML

Download Article
  1. 1
    Create the <style> tag. In your HTML file, find the </head> tag. Add a few extra lines above it and type the following:
<STYLE type="text/css"></STYLE>
How.com.vn English: Add a CSS File to HTML Step 7
  1. How.com.vn English: Step 1 Add all your CSS between those two tags you just added.
  2. How.com.vn English: Step 2 Save your HTML file (as HTML).
  3. How.com.vn English: Step 3 Verify that your web page looks like it is supposed to look.
    Make changes as necessary if it doesn't.
  4. Advertisement


Community Q&A

Search
Add New Question
  • Question
    How do I link CSS with HTML in mobile?
    How.com.vn English: The coding cat
    The coding cat
    Community Answer
    You link CSS the same way for all operating systems (mobile, desktop, etc.).
  • Question
    What about the browser?
    How.com.vn English: CageyCat
    CageyCat
    Top Answerer
    The CSS file is written on your computer, in the folder with your website files, and with a css file extension. This css file is linked into each webpage file you create. Each browser reads the HTML of your page(s) and 'renders' the page to your specifications, to the best of the browser's ability. Browsers can render differently sometimes, so do check your pages in the top browsers.
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Tips

      • Always check your website's appearance in different web browsers and on different computer systems. Some browsers internet CSS a bit differently, even between the same browser's Mac and Windows editions. If your website looks different in different browsers, particularly in how certain objects like lists are spaced, the issue is the browser defaults. Find a master style sheet to add to the beginning of your CSS to override all browser defaults, so your settings aren't adding to anything that the browser already sets up.
      • If you have the option, use an external style sheet. Doing so will let you adjust the site appearance by changing the code in the one named file, rather than having to change the CSS on every page in your site.
      • If your website isn't responding to your CSS like expected, double-check all your code to make sure you didn't forget details. Particularly pay attention to the semicolons (";") and closing arrow brackets ("}"). It's not unusual to miss one in your CSS.
      Show More Tips
      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Thanks for submitting a tip for review!
      Advertisement

      Warnings

      • Don't use "inline" CSS, CSS that's included in the HTML tag. (For example: the "align='center'" is inline CSS.) It's outdated, bad syntax, and difficult to adjust when you need to update the website later.
      Advertisement

      About This Article

      How.com.vn is a “wiki,” similar to Wikipedia, which means that many of our articles are co-written by multiple authors. To create this article, 15 people, some anonymous, worked to edit and improve it over time. This article has been viewed 118,445 times.
      How helpful is this?
      Co-authors: 15
      Updated: October 21, 2021
      Views: 118,445
      Categories: Markup Languages
      Thanks to all authors for creating a page that has been read 118,445 times.

      Is this article up to date?

      ⚠️ Disclaimer:

      Content from Wiki How English language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
      Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.

      Notices:
      • - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
      • - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
      • - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
      • - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.

      Advertisement