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