CSS
CSS
CSS stands for Cascading Style Sheet. We use CSS to design the web pages. CSS controls the UI (User Interface) of a web page. Using CSS, you can set your paragraph font-size big or small, add color for paragraph text, set the position (Left, Right, Center), you can add top and bottom space in the paragraph, you can add background-color, etc.
Syntax:
you can change the font-color of two paragraphs by CSS.
<p style="background-color:yellow;"> This is a yellow paragraph </p> <p style="background-color:red;"> This is a red paragraph. </p>
Output:
Add CSS in HTML
CSS can be added in HTML by three types:
- Inline CSS
- Internal CSS
- External CSS
Inline CSS:
CSS can be added inline to your HTML element. Add style attribute inside the HTML element and write CSS properties inside the quotes (“color: red; font-size: 30px;”) called Inline CSS.
In the given syntax, paragraph has inline CSS.
Synatx:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p style="background-color:red; color:yellow; font-size:20px;">
This is a paragraph.
</p>
</body>
</html>
Internal CSS:
Add style for single webpage on the same HTML file using tag <style>. This tag would be add in the <head> section on the same HTML page where you are writing your HTML.
In the given syntax, you can see the internal CSS using <style> tag.
Syntax:
<html>
<head>
<title>Page Title</title>
<style>
p {
background-color:red;
}
</style>
</head>
<body>
<p>
This is a paragraph.
</p>
</body>
</html>
External CSS:
When you have multiple HTML pages for your website, you will need a separate file named style.css where your all CSS would written for your all webpages. The external stylesheet would be added via link element on each HTML file inside the <head> element.
In the given syntax, you can see the a <link…> tag, where I linked my external style.css file using href attribute.
Syntax:
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>
This is a paragraph.
</p>
</body>
</html>