CSS is an acronym for Cascading Style Sheets, which provides instructions to define the visual presentation of HTML elements on a webpage. It serves as the tool for formatting HTML content. In essence, CSS simplifies the task of designing a website.
CSS plays a crucial role in managing various aspects of a webpage. Through CSS, we have the ability to regulate text colors, font styles, paragraph spacing, and numerous other elements on a webpage. While CSS is relatively straightforward to grasp, it offers a robust level of control over HTML documents. CSS is typically integrated with HTML to enhance the visual presentation of web content.
Advantages of CSS
Here are the following advantages of CSS, such as:
- Faster page speed: It has a faster page speed than other code's page speeds. With the help of the CSS rule, we can apply it to all occurrences of certain tags in HTML documents.
- Better user experience: CSS makes a webpage very attractive to the eyes. Also, CSS makes it user-friendly. When the button or text is in a proper format, it improves the user experience.
- Quicker Development time: With the help of CSS, we can specify the format and style the multiple pages into one code string. In cascading style sheet, we can make a duplicate copy of several website pages. If we make a webpage, it has the same formatting, looks, and feel, so with the help of the CSS rule for one page, and it is sufficient for all the pages.
- Easy Formatting changes: In CSS, if we need to make changes in the format, it is very easy; we only need to change the one-page format it will automatically apply to the other pages of CSS. There is no need to correct individual pages in a CSS style sheet. If we fix a CSS style sheet, it will automatically update the other CSS style sheet.
- Compatibility: Compatibility is very important in today's age. If we create any webpage, it should be very responsive and user-friendly. CSS is used with Html to make webpage design responsive.
Why do We Use CSS?
As we all know, CSS is a powerful style sheet language used to control the HTML document to improve the webpage design.
- CSS provides efficiency in webpage design: It also provides updates so our webpage works appropriately. With the help of CSS, we can create and apply those rules within the website. If we create a webpage design separately, we can make changes in our style sheet, and it will affect all the style sheets.
- CSS provides faster page download: CSS helps with faster page download because when we download a page, we get the cache that helps to load a page, but with the help of CSS, we can lead to load a lighter page which helps to improve the performance.
- CSS is easy to work: In CSS, we can visual aspect of the website separate entirely from the content; using CSS, we can create a website that allows us to make quick layou0074.
Example of CSS
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
colour: 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>
Output:
Types of CSS
There are three types of CSS:
1. Inline CSS
Inline CSS is employed to customize the elements within HTML documents. It is leveraged in HTML to customize the properties directly without the need for selectors. Handling the inline functionality on websites can pose more difficulties in comparison to other methods. Its utility in HTML can be quite beneficial in specific scenarios.
Example of inline CSS:
p style="color: orange; font-size: 25px;">Here is my first paragraph.</p>
lt;p>Here is my second paragraph.</p>
2. Internal CSS
Internal CSS is employed to efficiently style a single webpage. This method requires more time as we are limited to working on individual pages or having to style each webpage separately. With internal CSS, we can customize the style of a single webpage distinctly.
Syntax:
<style>
--- required styles--
</style>
Example of internal CSS:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body {
background-color: black;
}
h1 {
color: mediumvioletred;
}
h2 {
color: powder blue;
}
</style>
</head>
<body>
<h1>Welcome!!</h1>
<h2>Good Morning!</h2>
</body>
</html>
Output:
3. External CSS
External CSS is employed to connect webpages to an external file containing CSS styles, which are typically stored in a separate text file. This method proves to be more effective when styling large webpages, enhancing both the efficiency of the styling process and the overall readability of the CSS documents.
Syntax:
<head>
//if the CSS file is in another folder, then
//the href must contain the path to the file
<link rel="stylesheet" href="nameOfTheSheet.css">
</head>
How does CSS Work?
CSS plays a crucial role in enhancing the appearance of web pages by applying various styles to HTML documents.
For example:
<h1>
Heading
</h1>
With the aid of <h1> and </h1> elements in HTML, headers can be constructed, while CSS enhances their visual appeal.
For example:
h1 {
colour: blue;
text-align: center;
}
CSS Comment
CSS comments, as the name implies, allow us to convey messages within our code for better user comprehension. By leveraging comments, we enhance the visual appeal of our source code.
For Example:
/*
Hello, my name is Rohit. Here we are using multiple comments format.
*/
body {
font-family: Sans-serif;
font-size: 50 em /* 1em = 10px */
}
Selectors
In CSS, selectors select the specific word you want to style. There are different types of selectors:
- The element selector
- The universal selector
- Id selector
- Class selectors
1. The Element selector
Element selectors are utilized to apply styles to specific elements within an HTML document.
Syntax:
Element {
property: value
}
Example:
p {
background-color: Pink;
}
2. The universal selector
We utilize an asterisk (*) symbol to specify the universal selector within CSS. This selector is employed to target all elements within an HTML document.
For Example:
* {
property: value;
}
3. Id selector
It is the most frequently utilized operator within CSS. This operator is employed to apply styling to a specific ID, indicated by the pound symbol (#).
Syntax:
#id {
property: value;
}
Example
<!DOCTYPE html>
<html>
<head>
<!-- CSS property using id attribute -->
<style>
* {
background-color: white;
}
#first {
colour: black;
text-align: center;
}
#second {
text-align: center;
color: #ff1493;
}
</style>
</head>
<body>
<!-- id attribute declares here -->
<h1 id="first">First Header</h1>
<h2 id="second">Second Header</h2>
</body>
</html>
4. The Class Selector
The class selector is employed to choose elements with certain class attributes. A (.) symbol is utilized with a specific class to target an element.
Example:
.intro {
background-color: yellow;
}
Implementation of all Selectors in CSS
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="first.css">
<style>
#center1
{
text-align: center;
color:pink;
}
.center2 {
text-align: center;
color:red;
}
h1 {
text-align:center;
color:green;
}
</style>
</head>
<body>
<h1>This heading will be green and center-aligned </h1>
<p class = "center2">This paragraph will be red and center-aligned </p>
<p id ="center1">This paragraph will be pink and center-aligned</p>
</body>
</html>
CSS Colors
In CSS, various color schemes are available. Within CSS, three methods are commonly utilized:
RGB is a blend of three primary colors: red, green, and blue. It requires three arguments, with each parameter ranging from 0 to 255 in value.
For example: RGB(255,0,0)
Hexadecimal code begins with a # symbol and consists of six characters, grouped into three pairs.
It includes a set of red, green, and blue. The range typically spans from 00 to 09.
RGBA begins with four parameters, encompassing red, green, blue, and alpha values. Within the RGBA color model, the initial three parameters can range between 0 and 255, while the final parameter can range from 0 to 1.
Implementation of all Colors in CSS
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link rel="stylesheet" type="text/css" href="first.css">
<style>
#center
{
color:#ff0099;
}
h1{
color:rgba(255,0,0,0.5);
}
</style>
</head>
<body>
<h1>This heading will be green</h1>
<p style="color:rgb(255,0,0)">This paragraph will be red</p>
<p id="center">This paragraph will be pink and center-aligned</p>
</body>
</html>
CSS background
In CSS, we have different ways by which we can affect HTML documents. There are a few as follows:
- Colour: It is used to change the background colours.
- Repeat: It is used to check if an image has to repeat. If yes, then it will tell you how to do it.
- Image: It is used to set the image in the background.
- Position: It determines the position of an image in CSS.
CSS Border
It is used to set up the border for the Html elements. There are some main properties for the setup of the border in Html elements:
- Width: It helps to set the width of the borders.
- Style: It helps to set the style of the borders.
- Colour: It helps to set the colour of the borders.
- Radius: It helps to set the radius of the border.
We have the option to define the border for the right, top, bottom, and left sides individually. For instance, specifying border widths of 2px for the horizontal sides and 5px for the vertical sides.