What is CSS ,Why Use Css in HTML ? How to Add Css in HTML

What is CSS ,Why Use Css in HTML ? How to Add Css in HTML

What is CSS ,Why Use Css in HTML ? How to Add Css in HTML
What is CSS ,Why Use Css in HTML ? How to Add Css in HTML

 

1)      CSS is an acronym for ‘Cascading Style Sheets

2)      CSS is a style sheet programming language

3)      CSS helps to render different elements in a website uniquely

4)      It keeps the power to attract users to the websites they visit.

5)      It helps to style different elements on the page using defined properties; which makes this a highly customizable language

6)      It offers easy syntax. (Let’s understand the syntax with an example)

7)      See below, an html paragraph element has been styled using CSS, it includes the selector, and the curly braces for the body of the declaration and inside it we have the required property ‘color’ here, which is separated using a colon from the value ‘blue’ here  and  finally ends with a semicolon

8)      It is used along with the Markup language Html, it involves 3 different types of methods to integrate it with the main html document.

Responsive Gym Website Using HTML ,CSS & JavaScript

9)      The 3 types are as follows => 1) Inline CSS 2) Internal or Embedded CSS 3) External CSS

Add Inline Css in Html

We understand by the name that it is the CSS to be written in a line, basically inside the opening tag of the element to be styled and then inside a style attribute as  style=”property: value;  secondProperty : value;  ”

Example =>

<h1 style="background-color: #008080; color: #f5f5f5;">Inline CSS</h1>

Below, is the Html syntax with inline Css styling

Now, let’s see its output

inline css add in html

 

Add Internal Css in Html

Here the CSS can be written properly without any confusion, it is implemented inside a style tag which lies particularly in the head tag of html

Example =>

<head>

<style>

body {background-color: linen;}

h1 {

   color: maroon;

   margin-left: 40px;

}

</style>

</head>

Below, is the part of html to be styled

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

Below, first is the styling part which adds on to different elements of html targeted and uniquely

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Here, goes the output

Add Internal Css in Html

Add Css as external .css File

In this type of CSS, the style sheet  is external, it is a totally separate document that is attached to the html document using  a link tag that lies particularly in the head tag of html

ADVERTISEMENT

<link rel =”stylesheet” href=”styleFileName.css” type=”text/css”>

ADVERTISEMENT

‘Rel’ attribute here stands for a relationship, as it is a stylesheet.

ADVERTISEMENT

‘Href’ attribute here specifies the location or url of the linked resource, here it is the file name that acts as the location of the document as it is in the same hierarchy in the folder as the html document.

ADVERTISEMENT

‘Type’ attribute here acts as a media type just to identify the resource, the document here.

ADVERTISEMENT

It is not always necessary to use this attribute due to the use of the ‘rel’ tag

.css is the extension of the css document or file.

Now, let’s learn about it through an example

Portfolio Website using HTML and CSS (Source Code)

Step 1 => Create a file named for instance ‘style.css’ in the current folder in which you are working

Step 2 => Write CSS, let’s see

Below, is the Html portion to be styled

index.html

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

Now, let’s come to the .css file

Style.css

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}

Let’s check the output now,

Add Css in Html

See it is still working

External CSS is the most used type of CSS

It helps to manage the other associated files easily, and effectively and keep things organized and clean

Hope you like this post and enjoy it. If we did any mistake please comment on it so this help full for also our users. Thank you for reading.

Written by IG: codezee_thecodrr | Vishnu
Team Codewith_Random              



Leave a Reply