Arrow

Introduction to Cascading Style Sheets

AuthorHariom Prajapati

Pubish Date23 Jul 2022

categoryCSS

What 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

css introduction

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

css introduction

 

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

css introduction