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

»

Get Content Marketing Into Your System

The days of marketers hoisting up a brand campaign once every few ...

»

Combine HTML5 & Bootstrap As Key Ingredients For Rebooting Your Business

HTML5 has achieved the tremendous heights in the recent years owing ...

»

10 Tips On Social Media That Will Land Your Dream Job

A job search trends survey conducted by Jobvite showed that 48% of ...

»

10 Best Node.js Frameworks For Web And Apps Development

Node.js is counted among one of the most renowned JavaScript runtime ...

»

Fetch Your Customers : Retail Commerce

As listening the word commerce it comes in our mind that it is ...

»

Best App Design Practices for 2016

The year 2015 witnessed some groundbreaking revolution regarding app ...

»

9 Websites To Visit For Exemplary Footer Design Inspiration

When we set out to design a website, our primary focus is on the ...

»

What are the Cloud Computing trends to dominate in 2016

With Cloud computing, it has developed cell phones into a remote ...

»

How to Show Related Posts in WordPress Without a Plugin?

Making your visitors go through each post increases the browsing time ...