Advanced Java and Web Technologies for JNTUK
Blog providing beginner tutorials on different web technologies like HTML, CSS, Javascript, PHP, MYSQL, XML, Java Beans, Servlets, JSP and AJAX

28/01/2014 Categories: CSS. No Comments on Adding CSS to a webpage

Note for students: Adding CSS in a webpage or Specifying CSS in a webpage or Types of CSS, all of them refer to this article and means the same.

There are different ways to specify style information for the HTML elements in a web page. Each method has its own advantages and disadvantages over the other methods. The different ways in which we can specify the style information are:

  • Inline CSS
  • Embedded CSS (Document Level CSS)
  • Imported CSS
  • External CSS

Inline CSS

In Inline CSS, the style information is specified inline i.e., within the HTML tag. We will use the style attribute of a HTML tag to specify the style information using Inline CSS. The syntax for Inline CSS is as shown below:

<tagname  style=“property-name:value[;]”>Content</tagname>

An example for specifying style information Inline CSS is given below:

<p  style=”color:red;font-weight:bold”>Content</p>

The advantage of Inline CSS is, for a single web page with minimal content, it is easy to change the style information. The disadvantage is, for a website containing multiple web pages, it becomes difficult to change the style information as we have to parse through each tag and change the style information.In the above example, the content of all the <p> tags in the web page are affected by the above style information. The color of the paragraph’s content turns red and displayed in bold font.

Embedded CSS

Using Embedded CSS, the style information is specified in the head section of the web page. In this method, the style information is enclosed within the <style> and </style> tags which are placed in the head section. The syntax for Embedded CSS is as shown below:

An example for specifying style information Embedded CSS is given below:

The advantage of Embedded CSS is, the style information of the HTML elements is separated and is placed in the head section. This will make it easy to find and change the style information when needed. The disadvantage is, in a website with multiple web pages, it is still difficult to change the style information using Embedded CSS as we have to open each web page and change the style information.

Imported CSS

Imported CSS is similar to External CSS. In Imported CSS, the style information is specified in another file apart from the web page and linked to the web page using the import statement which will be placed inside the <style> and </style> tags in the head section. While using the import statement, we must remember to declare the import statement as the first line inside the <style> and </style> tags. The syntax for specifying the style information using Imported CSS is as shown below:

We can specify multiple import statements in the head section. The style sheets (.css files) which are specified later will have higher preference (priority) over the previous style sheets. An example for specifying style information using Imported CSS is as shown below:

The advantage of Imported CSS is, the style information is specified in another file which makes it easy to change the style information when needed. It also makes it easy to apply different look and feels to a single page with less effort. The disadvantage is, the import statement is not supported in older versions of the browsers.

External CSS

In External CSS, the style information is specified in an external file. This file is linked with the web page using a <link> tag. The syntax for the <link> tag is as shown below:

<link  rel=”stylesheet”  type=”text/css”  href=”style.css”/>

According to W3C, there are three types of external style sheets: persistent, alternate and preferred. The <link> tag supports an attribute, title which specifies the name for a style sheet. The three types of external style sheets are declared as shown below:

Persistent style sheet

<link  rel=”stylesheet”  type=”text/css”  href=”style.css”/>

Alternate style sheet

<link  rel=”alternate stylesheet”  type=”text/css”  href=”style.css”  title=”large” />

Preferred style sheet (default style sheet when none is selected)

<link rel=”stylesheet” type=”text/css” href=”style.css” title=”normal” />

In the above examples, type specifies the MIME type, href specifies the address (URL) of the style sheet to be linked and rel specifies the relationship of the target document with the current document.

The advantage of External CSS is, the style information is specified in a separate file which makes it easier to modify in future. Different look and feels can be provided by simply changing the value of the href attribute in the <link> tag. The disadvantage is, for web pages with less content, maintaining style information in separate files tend to be overhead.

Note: In favour of separating style information from HTML markup, inline CSS has been deprecated in XHTML 1.1.

Note: A semicolon is optional when there is only one declaration. A semicolon is used to separate multiple declarations from one another. Also a rule can be written in a single line if needed as shown below:

p{ color:green }

Suryateja Pericherla

Suryateja Pericherla

Hello, I am Suryateja Pericherla working as an Asst. Professor in CSE department at Vishnu Institute of Technology. I write articles to share my knowledge and make people knowledgeable regarding certain topics.
Suryateja Pericherla

Latest posts by Suryateja Pericherla (see all)

Related Links:

Note: Do you have a question on this article or have a suggestion to make this article better? You can ask or suggest us by filling in the below form. After commenting, your comment will be held for moderation and will be published in 24-48 hrs.

Leave a Reply

Scroll Up