Web Page Design using CSS
by Vincy. Last modified on September 27th, 2022.
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.
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">
<td>
<div id="userName">Guest</div>
</td>
</tr>
</table>
</body>
</html>
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;
}
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.