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


Modern Changes That You Should Consider for Your Web Site

Websites need to modernize and get updated periodically otherwise ...


Super Tips For A Flawless Website

A website has a specific purpose. And your job is to design a website ...


Wix Offers Best Free Web Apps for Artists and Photographers

The famous online website builder Wix is known for providing the ...


What You Should Know Before Setting Up a Digital Marketing and Web Design Company

Running a digital marketing and web designing company can be a ...


Important Factors to Think About When Starting a Mailing List

Many bloggers and business owners don’t have a mailing list, ...


Tried and Tested Strategies for Boosting eBook Sales

As you have by now realized, writing your ebook was just the first ...


What Really Makes a Website User-Friendly

Whether it’s for business or personal use, having a website online ...


5 Features of Virtual Private Server that put you in complete Control of Your Website

For a decade now, virtual private server has been a preferred hosting ...


8 Ways the Right Ecommerce Platform Makes Your Business Perform Better

Starting your own ecommerce store is an exciting experience, but ...