CSS (Cascading Style Sheets) is a styling language used to add style to a webpage.
HTML provides structure and adds content to a webpage, while CSS enhances the visual presentation of that content through various styles. For example,
CSS Syntax
Here's the syntax to style an element on a webpage:
selector {
property1: value;
property2: value;
}
The basic syntax of CSS includes 3 main parts:
selector- specifies the HTML element that we want to apply the stylesproperty1/property2- specifies the attribute of HTML elements that we want to change (color, background, and so on)value- specifies the new value you want to assign to the property (color of the text to red, background to gray, and so on)
To learn more, visit the tutorial on CSS Syntax.
Example: Style a Document with CSS
Let us see an example of an HTML page without CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Example</title>
</head>
<body>
<p>This is a sample text.</p>
</body>
</html>
Browser Output
Now, let's add CSS to the above HTML code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Example</title>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a sample text.</p>
</body>
</html>
Browser Output
In the above example, notice the following code:
<style>
p {
color: blue;
}
</style>
<style>- an HTML tag used to define a section that contains CSSp- is a selector that specifies the styles to be applied to all<p>elements on the pagecolor: blue- changes the text color of<p>tag to blue
Adding CSS to HTML
In the last example, we used CSS code inside our HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Example</title>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a sample text.</p>
</body>
</html>
Here, as the CSS code is inside the HTML file itself, it is called internal CSS.
There are other ways to add CSS to HTML as well. To learn more visit Adding CSS to HTML.
Comments in CSS
Comments are notes written along with the code that is ignored by the browser. For example,
/* this is css comment */
The CSS comment starts with /* and ends with */. Let's see how we can use comments with CSS code.
/* Define text color for the div*/
div {
color: blue;
}
/* Define text color for headings */
h1{
color: green;
}
In the above example,
/* Define text color for the div*/
/* Define text color for headings */
is a single line comment. It can be seen while reading the code but gets ignored by the browser during the rendering of the page.
We can also add a multiline comment on CSS. Simply by ending the comment in a different line. for example,
/* This is
a multi-line
comment */
Why use comments in CSS ?
- Comments in code help the person reading the code understand what you were trying to do when you wrote it.
- This makes it easier for other developers to understand the code and make changes if necessary.
- Comments are also useful for anyone who needs to maintain the code in the future.
Why should you learn to use CSS?
We should learn CSS because of the following reasons:
1. Customizes and styles a website
CSS allows you to customize the appearance of your web page content in many different ways. For example,
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<title>Browser</title>
<style>
p {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>
Browser Output:
As you can see, we have used CSS to change the font and color of web page elements. CSS gives us the freedom to present our content in a way that best suits our design vision.
2. Responsive Design
Responsive web design is a web design approach to make web pages render well on all devices with different screen sizes and viewports.
With the increase of devices of various sizes, it is important to create webpages that can adapt to different device sizes.
CSS media queries and other techniques allow the creation of web pages that can automatically adjust to various changes in the screen size. For example,
Desktop View of Programiz Website
Mobile View of Programiz Website:
Here, you can see that the design fits both mobile and desktop design.
3. CSS Animations and Transitions
CSS provides tools to add animations and transitions to the webpage. Animations and Transitions can enhance the user experience of the webpage.