Hariom Prajapati
23 Jul 2022
CSSWhat is CSS?
CSS is a cascading style sheets, which is use to design the web pages.
Cascading Style Sheets
- Cascading Style Sheets (CSS) is a markup language which is responsible for how your each web pages will look like. using it we controls the colors, fonts, layouts of your website elements and many more .
- style sheet language also allows you to add effects or animations to your website.
- you can design Multiple web pages by one css file.
- CSS is supported by all the browsers .
- Extension used to save CSS files is ".css".
There are three ways of inserting a style sheet
1) External style sheet
- With external CSS, you can link web pages to an external .css file, which created by text editor on your device (e.g., Notepad++, visual studio, sublime text3).
- This CSS type is best for styling a large website because one .css file can change your entire site at once.
Follow these steps to use external CSS:-
Step 1
- Create a new .css file.
- Don’t forget to change CSS with the name of your .css file.
Step 2
- In the <head>section of your HTML sheet, add a reference of your external .css file after <title>
- Reference use :- <link rel="stylesheet" type="text/css" href="enter css file location with file name.css" >
For example
<html>
<head>
<title>Teknowize</title>
<link rel="stylesheet" type="text/css" href="E:/style.css">
</head>
<body>
<h2> welcome to teknowize</h>
</body>
</html>
Step 3
- Now start coding in .css file.
- We need to write css code after the html tag in which we apply css.
- we have to write only tag without ‘< >’
- Write HTML tag and then write CSS code inside the ‘{ }’ in CSS file.
For example
h2
{
color: red ;
}
Output
2) Internal style sheet
- Internal or embedded CSS requires you to add <style>tag inside the <head> tag of your HTML document but after title tag.
- Inserting CSS internally is a very good and effective method of styling a single page. but if you using the internal style sheet method for multiple pages then it is not good because of time-consuming and you need to write code on every page.
Syntax -
<style> </style>
For example
<html>
<head>
<style>
p {
color: green;
}
h1 {
background-color: red;
color: black;
}
</style>
</head>
<body>
<h1>TEKNOWIZE</h1>
<p>This is our website
<p>
</body>
</html>Output
3) Inline style sheet
- In this, we need to use CSS attribute inside the particular HTML tag
- You can style a specific HTML element using the inline CSS method.
- Always try to avoid this method because it make your code complicated and difficult to manage.
- The inline style sheet method is useful in some situations. For example, if you need to add style in a single HTML element.
Syntax -
style=" css properties here"
For example
<html>
<head>
<title>Teknowize</title>
</head>
<body>
<h1 style="color:red;background-color:blue;"> Teknowize </h1>
<p>This is our website
<p>
</body>
</html>
Output
