CSS (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. The reason for using CSS is to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page.
There are three types of CSS which are given below:
- Inline CSS
- Internal or Embedded CSS
- External CSS
Why do we learn CSS?
Styling has been an essential property for any website for many decades. It increases the standards and overall look of the website which makes it easier for the user to interact with it. A website cannot be made without CSS, as styling is MUST since no user would want to interact with a dull and shabby website. So for knowing Web Development, learning CSS is a must.
- The base for web development: HTML and CSS is the basic skill that every web developer should know. It is the basic skill that is required for building a website.
- Makes your website look attractive: A website that’s dull and plain will not attract the user most probably, so adding some style would surely make your website presentable to the user.
- Makes the design come alive: A web developer is responsible for making the design given to him as a live product. CSS is used for styling to develop the design of the website.
- The increased user experience of the website: A website with a simple yet beautiful UI would help the users to go through the website easily. CSS is used to make the user interface better.
- More career opportunities: Since CSS is a basic requirement while learning Web Development, therefor there are abundant career opportunities for it. As a freelancer to you can land up to many projects.
Basic Format: It is the basic structure of HTML webpage and we use CSS style inside webpage. In a web page, we use internal CSS (i.e. adding CSS code inside <head> tag of HTML code).
<!DOCTYPE html> <html> <head> <!-- Head section of web page --> <title></title> <!-- Stylesheet of web page --> <style></style> </head> <body> <!-- Body section of web page --> </body>
Example: Let’s see a small example of an HTML webpage with CSS styles. Here, we use CSS styles to set the alignment and text colour in a webpage.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
Approved by experts
