Web Page Design using CSS

Last modified on January 29th, 2018 by Vincy.

CSS stands for Cascading Style Sheets. It is used to have the group of styles together. It adds beauty to our webpage elements structured by using markup languages. As the styles are the essential attributes for the webpage, CSS facilitates the web designer to design good looking page easily.

design-with-style

In website design, the CSS increases maintainability of website styles that adds comfort to the web designers.  Also, it provides easy modifiability of the web element styles while using CSS. There are various ways for adding CSS to a web page document. Let us have a glance through the various ways of adding styles to the web page with examples.

What are those ways to add CSS to a webpage?

  • By specifying inline styles
  • By adding internal/embedded style sheet
  • By linking external .css file

Adding Inline Style to HTML Element

The inline styles are added by using the style attribute of an HTML element. The following code shows how to apply the inline style to a div element. I have added a background color to the table row element.

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

Using this method, we can add multiple styles for the same element by separating the styles by using the semicolon. For example,

<div style="background-color:#CCCCCC";border:#CCCCCC 1px solid">

Adding Internal or Embedded Style Sheet

The internal style sheet can be added for a HTML document by using <style>…</style> container. This container will contain blocks of styles with the reference of the selector strings used in the HTML document. 

I have given an example program below for embedding style sheet to web page document. This embedded style sheet includes styles for the class selector “.tablerow”. Adding styles with the selector string reference will make designing easier in many aspects like reusability, quicker modifiability.

For example,

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

Adding external .css file

Instead of embedding with the <style></style> tags, the styles are moved to an external file. This external file will be saved with the .css extension and linked to the HTML document. The HTML <link> tag is used to import the external style sheet in a web page document.

Below shows styles saved in an external style.css file. This external file is imported into an HTML document by referring the style sheet file name in the link tag.

styles.css

.tablerow {
background-color: #CCCCCC;
}
#userName {
font-weight: bold;
}
table {
border: #000000 1px solid;
}
<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>
</body>
</html>

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

↑ Back to Top

Share this Article