CSS stands for Cascading Style Sheets which helps to style the layout of our website and its appearance.
CSS can define in 3 ways:
- External style sheets
- Internal style sheets &
- Inline style sheets
- External Style Sheets
In external style sheets, CSS defines as a separate file and saved on a .css extension like “filename.css”. This single .css file will change the look of the entire website. Each page of your website must link to external style sheets using the following code which must insert in the head section.
<head>
<link rel="stylesheet" type="text/css" href="filename.css">
</head>External style sheets can be written in any text editor. Here is an example of the external style sheets “filename.css” code.
body {
background-color: blue;
margin: 10px;
padding: 5px;
}
.header-title {
color: black;
text-align: center;
text-decoration: underline;
}2. Internal Style Sheets
Internal Style Sheets may be used to style each single page. It is defined with <style> element inside <head> section of your html page.
<head>
<style>
body {
background-color: blue;
margin: 10px;
padding: 5px;
}
.header-title {
color: black;
text-align: center;
text-decoration: underline;
}
</style>
</head>3. Inline Style Sheets
Inline style sheets are used to style a single element.
Suppose you have an Html page like home.html.
<!DOCTYPE html>
<html>
<head>
<title>Home Page</tilte>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>Now define your element using inline style sheets.
<html>
<head>
<title>Home Page</tilte>
</head>
<body>
<h1 style="color:red;margin:10px; text-align:center;">This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>The above code:
<h1 style="color:red;margin:10px; text-align:center;">This is a heading</h1>is used for the inline style sheets. “This is a heading” is defined with the color: red, the margin is equal to 10px and text is in the center. The inline style sheets used only in <h1> will not apply in <p>. The content inside the <p> remains the same without any style sheets.
In this way, we can style our webpage layout in 3 different ways. The professional and code managing way are external style sheets, which will be easy if want to change the layout of your whole website pages. Other style sheets are time-consuming.
I personally recommended using external style sheets.
Thank you for reading our tutorial.
Please Donate.