Beginners Guide : Ways to Add CSS Files in HTML

CSS (Cascading Style Sheets), the style sheet language is most commonly added to website pages that are written in XHTML and HTML. This language can also be applied to all kinds of XML documents including XUL and SVG. This explains the importance of Cascading Style Sheets in a web page. The most common question is how to add css? There are several ways to complete this task, let us take a look at a few methods and also discuss their strengths and weaknesses.

Linking a Separate CSS file

This method is most commonly used to attach CSS to any HTML document. All the style rules are compressed within a particular text file that has to be saved along with the .CSS extension. This gets saved in your server from which you can directly link to each HTML document. The link is a simple line in HTML that has to be inserted within the section of the document. Including the correct path of the CSS file in href code is mandatory. If the CSS and HTML file are in the same folder, the path is not required. CSS rules have to be implemented in various parameters. “Screen” shows that you have to use it on the computer screen. The rule”print” will be applicable only when the document is printed. Multiple CSS files can be included when required.

The advantage in linking a separate CSS file is if you have to make style changes to the whole website, the change has to be made once in the CSS file. The complete look of your website can also be changed using the above method. This method increases the browsing speed in your website.

Embed CSS into HTML

CSS rules can be directly embedded in any HTML page. All the rules will have to be inserted between the style tags. The disadvantage with this style is that it has to be downloaded every time a visitor surfs your page. This slows down the browsing speed in your website.

The advantage is, since CSS is embedded into the HTML document the entire page acts as a single file. This will come handy when you like to send this page through email or to use as a blogger template. This style can be implemented in liquid- layout demos so that the visitor while viewing the source page can view the CSS and HTML code combined together. Another advantage is this style inserts colors for headings and others in the CSS rules in a particular page. This enables visitors to change colors from the admin page without editing the CSS rules in the blog template.

Import CSS file from CSS

The import rule is an interesting way to add CSS to an HTML document. A new CSS file can be attached within CSS. The name of your CSS file has to be changed to “newstyles” along with the correct path. The path is the important factor in this rule since the CSS file is within CSS. If the CSS file is embedded in an HTML page then the path has to be related to the HTML file. Imagine that you have a 1000 page website and you need to link every page to a CSS file. You also want to include another CSS file to all the 1000 pages. This work is simplified by importing the second file (CSS) within the first file. Hours of work can be simplified.


About Author
This is a guest post by Amber Gomez of xfinityonline, a site that offers savings and current information on comcast xfinity. Click here for more info.

Recently Published


4 flawless WordPress Plugins for Employee Management

Keeping your employee management in check is an important part of ...


Kubernetes: Why Today’s Programmers Need to Understand

Launched by three Google engineers, Kubernetes is a container ...


Do I Need Endpoint detection and response tools ?

Endpoint detection and response (EDR) tools are designed to add an ...


How to Build a Killer Marketing Strategy for your WordPress Blog?

Running a blog over WordPress is seemingly an easy thing to do. The ...


5 Signs You Need a New Hosting Company

Web hosting has become cheaper and easier to attain than ever before. ...


5 Things to Consider When Designing A Logo For Your Startup

Designing a Logo is essential because it communicates your business. ...


What Is Access Control?

Access Control, When running a business, there are dozens of things ...


Process Management Solution For a Business

In order to be successful, a company needs to be on the same page and ...


5 Metrics You Should Track on Every Blog Post

As a blogger, you may have developed your blog with a variety of blog ...