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 this? 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


8 Search Form Tutorials Built With CSS3, jQuery & HTML5

Elevate the power of search by adding search functionality or search ...


10 Best HTML5 Frameworks For Hybrid App Development

Hybrid apps are generally built around native web view container or ...


A Look at The Evolution Of WordPress and What Future Holds For It

When it comes to developing a website, WordPress is the first name ...


7 WordPress Plugins That Make Your Site Mobile Responsive

Not much in the recent past, having a responsive website that works ...


Things you should Consider When You Are Designing an E-commerce Website

The people of today’s generation have discovered the various ...


Developing a Mobile App Using Open Source Software? Consider These Tips For Security

Today, almost every IT organization (including the Fortune 500 ...


5 CSS Tools You Shouldn’t Miss As a Web Designer and Developer

It’s no secret that CSS (Cascading Style Sheets) is the key to ...


10 Awesome Live Chat Plugins for WordPress

Patronage by loyal customers yields 65 percent of a typical ...


10 High-Grade Premium Drupal Themes Worth A Quick Install

Serving as the perfect tools for enhancing your Drupal ...