Chapter 5: Make the Web Look Stylish
The design of a website plays a major role in making it attractive. While the
content of webpages is created using HTML, Cascading Style Sheets (CSS)
is the technology used to add color, beauty, and style to them. Using CSS
allows for the separation of a webpage's content (HTML) from its presentation
and style.
Structure of Styles
A CSS style rule primarily consists of two parts: a Property and a Value.
• Property: This indicates which style feature you want to change. For
example, color is used to change the text color, and background-color is
used to change the background color.
• Value: This indicates what change should be applied to the property. For
example, to make the color blue, you can provide the value #0000FF or
blue.
A colon (:) must follow each property, and a semicolon (;) must follow the
value.
Structure: property: value;
Example: text-align: center;
• Property: text-align
• Value: center
Methods of Adding CSS
There are three main ways to add CSS styles to webpages.
1. Inline CSS
This method involves using the style attribute directly inside an HTML tag to
apply a style to only that specific element.
Example:
In the code below, the required styles for each tag are provided alongside the
respective tag using style="...".
HTML
<h2 style="color: #0000FF;">Featured Products</h2>
1 SREERAJ S , HST , GGHSS MITHIRMALA
www.apluseducare.blogspot.com Whatsapp 9746544422
<div style="background-color: #9FE2BF;">
<h3 style="text-align: center; color: #A569BD;">Hand-made Soaps</h3>
<p style="text-align: center; background-color: #FFD700; font-weight: bold;">
Beautiful hand-made soaps made by our students.
</p>
</div>
Disadvantages:
• Increases the size of the HTML file due to code repetition.
• If the same change needs to be applied across all pages of a website, it is
difficult as you have to make changes in every single tag.
2. Internal CSS
In this method, all the CSS rules for a single webpage are placed together
within a <style> tag inside the <head> section of the page. This helps to avoid
code repetition on that specific page.
Example:
In the code below, the styles for tags like h3, p, and div are provided together
in the <head> section. Therefore, whenever these tags are used in the
<body> section, these styles are automatically applied.
HTML
<html>
<head>
<title>School Shopping Website</title>
<style>
h3
{
text-align: center;
color: #A569BD;
}
p
{
text-align: center;
background-color: #FFD700;
color: #333333;
font-weight: bold;
}
div
{
background-color: #9FE2BF;
}
</style>
</head>
2 SREERAJ S , HST , GGHSS MITHIRMALA
www.apluseducare.blogspot.com Whatsapp 9746544422
<body>
...
<div>
<h3>Hand-made Soaps</h3>
<p>Beautiful hand-made soaps...</p>
</div>
<div>
<h3>Hand-made Notebooks</h3>
<p>Personalized notebooks...</p>
</div>
...
</body>
</html>
3. External CSS
This is the most efficient method, where styles are defined in a separate file
(with a .css extension) and then linked to any HTML page that needs them. This
is ideal for giving a consistent look to all pages on a website.
Example:
Step 1: Create the CSS file
First, write only the style rules in a text file and save it with a name like
style.css.
Code in style.css file:
CSS
h3
{
text-align: center;
color: #A569BD;
}
p
{
text-align: center;
background-color: #FFD700;
color: #333333;
font-weight: bold;
}
div
{
background-color: #9FE2BF;
}
Step 2: Link it to the HTML file
Next, link this style.css file to our HTML page using the <link> tag in the
<head> section, as shown below.
Code in HTML file:
3 SREERAJ S , HST , GGHSS MITHIRMALA
www.apluseducare.blogspot.com Whatsapp 9746544422
HTML
<html>
<head>
<title>School Shopping Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
...
</body>
</html>
Cascade Order
If more than one style (inline, internal, external) is specified for the same HTML
element, the browser follows a priority order to decide which style to apply.
The priority from highest to lowest is:
1. Inline style (Highest priority)
2. Internal style
3. External style (Lowest priority)
This means that if a paragraph (<p> tag) is styled with a green color in an
external file and a yellow color using an internal style, the paragraph will
appear yellow on the page. However, if an inline style with blue color is applied
to that same paragraph, it will appear blue, because inline styles have the
highest priority.
4 SREERAJ S , HST , GGHSS MITHIRMALA
www.apluseducare.blogspot.com Whatsapp 9746544422
