Introduction to Cascading Style Sheets | CSS


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

{

    colorred ;

}


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 {

             colorgreen;

              }

           h1 {background-colorredcolor: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