what is css used for | what is css in html

what is css used for | what is css in html

what is css used for | what is css in html


1)      CSS is an acronym to ‘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, a html paragraph element has been styled using CSS, it includes the selector, 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 semicolonwhat is css used for | what is css in html

 

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

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

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 => 

Below, is the html syntax with inline css styling

Now, let’s see its output

what is css used for | what is css in html


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 =>

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

<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>

Here, goes the output

what is css used for | what is css in html

 linking external css

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

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

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

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

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

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

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

<body>

<h1>This is a heading</h1>

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

</body>







Now, let’s come to the .css file

body {

  background-color: lightblue;

}

h1 { 

   color: navy;

  margin-left: 20px;

}

Let’s check the output now,

what is css used for | what is 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, effectively and keep things organized and clean

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

Written by IG: codezee_thecodrr | Vishnu

Team Codewith_Random                                                                                                        

 

 


Post a Comment

Previous Post Next Post