CSS stand for cascading style sheets. By using CSS we can apply style to the html document. It provides an additional feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces. It can also be used with any kind of XML documents including plain XML, SVG and XUL.
In CSS they are three way to write CSS.
- Inline
- Internal
- External
Inline CSS :
By using Inline CSS we can apply the style to the element by using style attribute inside the opening tag.
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="color: red; text-align: center;">This is a heading</h1>
<p style="color: black;">This is a paragraph.</p>
</body>
</html>Internal CSS :
By using Internal CSS we can apply the style to the element by using style tag, Inside the head tag of html documents.
Syntax:
<style>
tag name {
property : value
}
</style>Example:
<html>
<head>
<title>Documents</title>
<style>
h1{
color: red;
}
p{
background color: yellow;
text-align : center;
}
</style>
</head>
<body>
<h1>Good After Noon</h1>
<p>Hello World</p>
</body>
</html>External CSS :
By using External CSS we can apply the styles and formatting of a web page separate file, his separate file, typically named with a .css extension, is then linked to the HTML document using the <link> tag.
Example:-
External styles are defined within the <link> element, inside the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<link rel="stylesheet" href="Mystyles.css">
</head>
<body>
<!-- content of the webpage -->
</body>
</html>
CSS Comments:
CSS Comments are used to explain or clarify the purpose of code to other developers or to remind yourself of the code’s purpose later on. Comments are single or multiple lines statement and CSS comments start with /* and end with */, And it will be ignored by the browser.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
/* This is a single-line comment */
text-align: center;
}
/* This is a
multi-line comment */
</style>
</head>
<body>
<p>Hi Welcome to Cotocus</p>
<p>This statement is styled with CSS.</p>
<p>CSS comments are ignored by the browsers and not shown in the output.</p>
</body>
</html>