As an Affiliate Associate, I earn from qualifying purchases.
CSS stands for Cascading Style Sheets. It is the coding language that gives a website its look and layout. Along with HTML, CSS is fundamental to web design. Without it, websites would still be plain text on white backgrounds.
What is the 3 types
There are three types of CSS which are given below: Inline CSS. Internal or Embedded CSS. External CSS.
CSS vs HTML
HTML is a markup language used to create static web pages and web applications. CSS is a style sheet language responsible for the presentation of documents written in a markup language. background-color: green; HTML cannot be used in a CSS file.
Why CSS is important in HTML?
CSS makes the front-end of a website shine and it creates a great user experience. Without CSS, websites would be less pleasing to the eye and likely much harder to navigate. In addition to layout and format, CSS is responsible for font color and more.
CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language.
How do you apply CSS in HTML?
There are three ways to add CSS to HTML. You can add inline CSS in a style attribute to style a single HTML element on the page. You can embed an internal stylesheet by adding CSS to the head section of your HTML doc. Or you can link to an external stylesheet that will contain all your CSS separate from your HTML
Using CSS
CSS can be added to HTML documents in 3 ways:
Inline - by using the style attribute inside HTML elements Internal - by using a <style> element in the <head> </head> section External - by using a <link> element to link to an external CSS file
Example of Inline CSS:
<h4 style="color:Green;margin-left:26px;"> Inline CSS is applied on this heading. </h2> <p> This paragraph is not affected.</p>
Ouput:
Inline CSS is applied on this heading.
This paragraph is not affected.
Example of Internal CSS:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: maroon;}
h1 {color: green;}
p {color: black;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Ouput:
This is a heading
This is a paragraph.
Example of External CSS:
An external style sheet is used to define the style for many HTML pages.To use an external style sheet, add a link to it in thesection of each HTML page:The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.<!DOCTYPE html><html><head><link rel=”stylesheet” href=”styles.css”></head><body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The following example uses a full URL to link to a style sheet:
<link rel=”stylesheet” href=”https://www.canopyart.net/styles.css” >
“styles.css”=> In this file CSS Code will be as follows:
body {
background-color: maroon;
}
h1 {
color: green;
}
p {
color: black;
}