CSS stands for Cascading Style Sheets. It is a stylesheet language used to style and enhance website presentation.
HTML adds Structure to a Webpage, JavaScript adds logic to it and CSS makes it visually visually appealing or stylish. It controls the layout of a web page i.e. how HTML elements will be displayed on a webpage.
How to Add CSS to HTML?
There are three different ways to add CSS styles to an HTML document, these are –
Inline CSS
Use the style attribute on the HTML element to add styles to the web page. It is used for small projects.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Internal CSS
Place the CSS styles within a <style> tag inside the HTML file, usually inside the <head> section.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
Create a separate CSS file with a .css extension and link this file to your HTML file using the <link> tag.
<!-- File name: index.html --><html>
<head>
<!– Importing External CSS –>
<link rel=”stylesheet” href=”style.css” />
</head>
<body>
<p>CSS Tutorial</p>
</body>
</html>
CSS Selectors
Selectors are used to find the HTML elements to be styled. They can be of three types
Element Selector
The element selector selects HTML elements based on the element name.
p {
text-align: center;
Color: red;
}
Class Selector –
To select elements with a specific class, write a period (.) character, followed by the name of the class.
.class {
css declarations;
}
.intro {
background-color: yellow;
}
The background color of all elements belonging to intro class turns yellow.
ID Selector
The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element.
The CSS rule below will be applied to the HTML element with id=”para1″.
#para1 {
text-align: center;
color: red;
}