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

»

Importance and actions of cloud computing in e-commerce business

The e-commerce industry is growing in leaps and bounds, and, ...

»

How to remove Options from One Select Box and retain One Option?

One can easily remove  options of a select box from HTML and append ...

»

How to Ensure that Users Do Not Deactivate The Critical WordPress Plugins

It’s no secret that among all the remarkably useful features of ...

»

How to scroll to the top of a webpage using jQuery ?

If you are looking for an extraordinary method of smoothly scrolling ...

»

11 sources to gain perfect knowledge of html5 semantic tags

1. Html5tuts Html5tuts is a site dedicated to HTML5. Feel free to ...

»

How to move an element into another parent element using jQuery?

An important piece to the puzzle when coding with jQuery is that how ...

»

10 optionally Good WordPress Typography Plugins You could Opt For

It is not necessary that the person will follow the standard guide ...

»

8 creative 3d slider wordpress themes to keep your blog active

1. Display Display is a WordPress Theme best used for Portfolio and ...

»

11 quick remote screen sharing apps worth trying

1. Join Me Easy to start, easy to join, easy to manage, join.me takes ...