Web Page Design using CSS

The main purpose of Cascading style sheets in website design is to make our web page to have good look and feel and also have capability to modify those style properties easily whenever needed. Styles are essential attributes, which provide comfort to the readers who visits our websites. We are going to learn about possible ways to apply styles while designing webpages.

What are those ways to add CSS into webpage?

  1. By specifying Inline styles
  2. By adding Internal or embedded style sheet
  3. By linking external .css file

css_web_design

By specifying Inline styles

In this type of method, styles will be added to the HTML element of our web page, by using style attribute. For example, the background color for an table row element can be specified using inline method as shown below.

<tr style="background-color:#CCCCCC">

We can cut and paste this style to other table rows if needed. But, if we are required to change the color of the table rows, we need to search for this style wherever it is applied. It will obviously take much time. Due to this reason, other two methods are having styles which is completely separated from the HTML body content.

By adding Internal or embedded style sheet

This method deals with specifying styles using HTML compound tag, <style>…</style> which will be used inside head tags. Inside style tags, it contains set of blocks. Each block has the list of styles for the selector strings corresponding to the specified HTML tags and for some particular attributes of HTML elements like classes and ids.

For example,

<html>
<head>
<title>Internal Style Sheet</title>
<style>
.tablerow {
background-color: #CCCCCC;
}
</style>
</head>
<body>
<table>
<tr class="tablerow">...</tr>
</table>

If we need to use this style for more than one HTML file, then the same content for style tags are required to be repeated again and again. Third method will rectify this problem. Let us discuss about it further.

By linking external .css file

In this third option, we need to cut and paste the content of the style tag into separate file with .css extension. Let us save the following code as styles.css.

styles.css

.tablerow {
background-color: #CCCCCC;
}
#userName {
font-weight: bold;
}
table {
border: #000000 1px solid;
}

In above code, the selector strings, that start with (.) and (#) represents the styles of classes and ids, respectively. And, the selector starts without any special characters, represents styles for HTML tags.

This .css file can be referred from any web page by using HTML stand-alone tag named <link…/>

For example,

<html>
<head>
<title>Internal Style Sheet</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<table>
<tr class="tablerow">
<td>
<div id="userName">Guest</div>
</td>
</tr>
</table>

This HTML code tutorial was published on May 6, 2013.

↑ Back to Top