HTML Style - CSS

What is CSS?

CSS stands for Cascading Style Sheets. You can control the style of a webpage using CSS. Even you can control the style of multiple web pages all at once.

HTML css

Why do we use CSS?

Basically with css you can change the color of text, font of an element(e.g. heading, paragraph, list etc. ), element's size ( height, width ), element's position, and make animation too.

Example of HTML without using CSS

Example of HTML without using CSS
Fig.1 - Example of HTML without using CSS

Normal HTML is just nothing but a text. you can't change the color of the text. It'll be black always. Moreover nither you can change element's position nor you can change element's size. Simply you can't give any style.

Example of HTML using CSS

Example of HTML using CSS
Fig.2 - Example of HTML using CSS

Here you can see the power of CSS. Almost you can do everything using CSS. you can change the color of text, element's size ( height, width ), element's position and not just that you can make animation too.

How to add or link css in html?

There are three ways you can add or link css in html.

  • Inline CSS - You can use the style attribute inside HTML elements
  • Internal CSS - You can use a <style> element in the <head> section
  • External CSS - You can use a <link> element to link to an external CSS file

Inline CSS Example-

We use Inline CSS for a single particular element. So in Inline CSS whenever you want to give a style to an element you have to use style attribute.

<!DOCTYPE html>
<html>
 <head>
   <meta charset=”UTF-8”>
   <title>Inline CSS Example</title>
 </head>
 <body>
  <p style="margin:30px; font-family:Times New Roman; font-size:40px;"> I am first paragraph  </p>
 </body>
</html>

Result

Example of Inline CSS
Fig.3 - Example of Inline CSS

Here you can notice there are three property-value pairs inside of the style attribute and all are separated by semicolon. Also notice that spaces at all sides of paragraph because of margin property and fontSize of paragraph is 40px.

Internal CSS Example-

We use Internal css for a single HTML document.

For example if you have multiple p elements inside <body> and you want all the p elements' color to be color red then you just need to declare one time inside <style> element.

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>Internal CSS Example</title>
<style>
p{color:red}
</style>
</head>
<body>

<p>I am first paragraph</p>

</body>
</html>

Result

Internal CSS Example
Fig.4 - Example of Internal CSS

You can see here we used <style> element inside head section to declare Internal CSS. Also notice it doesn't change the size of text as we didn't use font-size.

External CSS Example-

A .html file is called a single HTML document. We use External css for multiple HTML documents.

For instance if you have multiple .html pages and inside of every pages you have h1 elements and you want all the h1 elements' color to be yellow then you just need to declare one time inside of the .css file.

To understand this you just need a .css file. See the example below -

Here we have four files first, second and third one is .html files called myfirstpage.html , mysecondpage.html and mythirdpage.html respectively and the last one is .css file called style.css.

Note: All the files should have inside one folder.

myfirstpage.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset=”UTF-8”>
  <title>Inline CSS Example</title>
 </head>
 <body>
  <h1> This is my first heading.  </h1>
 </body>
</html>

mysecondpage.html

<!DOCTYPE html>
  <html>
   <head>
   <meta charset=”UTF-8”>
   <title>Inline CSS Example</title>
  </head>
 <body>
  <h1> This is my second heading.  </h1>
 </body>
</html>

mythirdpage.html

<!DOCTYPE html>
  <html>
    <head>
     <meta charset=”UTF-8”>
     <title>Inline CSS Example</title>
   </head>
   <body>
    <h1> This is my third heading.  </h1>
    </body>
  </html>

style.css

h1 {
color:yellow;
}

Now question is how to link .css file to all the .html pages. To do so you need to add a <link> element inside of head section. See the example below -

myfirstpage.html

<!DOCTYPE html>
   <html>
    <head>
    <link rel="stylesheet" href="style.css"> // "style" is the name of the css file.
     <meta charset=”UTF-8”>
     <title>Inline CSS Example</title>
    </head>
    <body>
     <h1> This is my first heading.  </h1>
    </body>
   </html>

Now add the link element for the last two pages ( mysecondpage.html and mythirdpage.html ) .

Result

myfirstpage.html

Internal CSS Example

mysecondpage.html

Internal CSS Example

mythirdpage.html

Internal CSS Example

Now you can see it does change the color of h1 element of every pages. Now what if you want to change the background color of every pages ?

you don't need to do correct every single files. You just need to correct .css file. see the example below -

style.css

h1 {
color:yellow;
}
body{
    background-color:red;
}

Now you know the power of external CSS .