CSS
o CSS stands for Cascading Style Sheet.
o HTML, CSS and JavaScript are used for web designing. It helps the web
designers to apply style on HTML tags.
CSS stands for Cascading style sheets. It describes to the user how to display
HTML elements on the screen in a proper format. CSS is the language that is
used to style HTML documents.
CSS is used to handle some parts of the webpage. With the help of CSS, we
can control the colour of text and style of fonts, and we can control the
spacing between the paragraph and many more things.
Advantages of CSS
Here are the following advantages of CSS, such as:
o 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.
o 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.
o 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.
o 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.
o 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.
o 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.
o 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.
o 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 layout.
Types of CSS
There are three types of CSS:
1. Inline CSS
Inline CSS is used to style the elements of HTML documents. It is used in HTML to style
the attributes without using the selectors.
Example of inline CSS:
1. <p style="color: orange; font-size: 25px;">Here is my first paragraph.</p>
2. <p>Here is my second paragraph.</p>
2. Internal CSS
Internal CSS is used to design the style single page effectively. It is more time-
consuming because we can only work on one page or we need to style each web page.
In internal CSS, we style a single webpage uniquely.
Syntax:
1. <style>
2. --- required styles--
3. </style>
Example of internal CSS:
Example
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8" />
5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6. <meta name="viewport" content="width=device-width, initial-
scale=1.0" />
7. <style>
8. body {
9. background-color: black;
10. }
11. h1 {
12. color: mediumvioletred;
13. }
14. h2 {
15. color: powder blue;
16. }
17. </style>
18. </head>
19. <body>
20. <h1>Welcome!!</h1>
21. <h2>Good Morning!</h2>
22. </body>
23. </html>
Execute Code
Output:
3. External CSS
External CSS is used to link all webpage with an external file. CSS, which can be created
in a text file. It is more efficient for styling an extensive webpage. It also increases the
readability of the CSS files.
Syntax:
1. <head>
2. //if the CSS file is in another folder, then
3. //the href must contain the path to the file
4. <link rel="stylesheet" href="[Link]">
5. </head>
Selectors
In CSS, selectors select the specific word you want to style. There are different types of
selectors:
o The element selector
o The universal selector
o Id selector
o Class selectors
1. The Element selector
Element selectors are used to provide styling to a selected HTML document.
Syntax:
1. Element {
2. property: value
3. }
Example:
1. p {
2. background-color: Pink;
3. }
2. The universal selector
We use an asterisk (*) sign to define the universal selector in the universal selector. It
is used to select all the Html documents.
For Example:
1. * {
2. property: value;
3. }
3. Id selector
It is the most commonly used operator in CSS. It is used to set the style to a given id.
It is denoted by (#).
Syntax:
1. #id {
2. property: value;
3. }
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <!-- CSS property using id attribute -->
5. <style>
6. *{
7. background-color: white;
8. }
9. #first {
10. colour: black;
11. text-align: center;
12. }
13. #second {
14. text-align: center;
15. color: #ff1493;
16. }
17. </style>
18. </head>
19. <body>
20. <!-- id attribute declares here -->
21. <h1 id="first">First Header</h1>
22. <h2 id="second">Second Header</h2>
23. </body>
24. </html>
Execute Code
4. The Class Selector
The class selector is used to select elements that have some class attributes. We use a
(.) character with a specific class to select an element.
Example:
1. .intro {
2. background-color: yellow;
3. }
Implementation of all Selectors in CSS
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML</title>
5. <link rel="stylesheet" type="text/css" href="[Link]">
6. <style>
7. #center1
8. {
9. text-align: center;
10. color:pink;
11. }
12. .center2 {
13. text-align: center;
14. color:red;
15. }
16. h1 {
17. text-align:center;
18. color:green;
19. }
20. </style>
21. </head>
22. <body>
23. <h1>This heading will be green and center-aligned </h1>
24. <p class = "center2">This paragraph will be red and center-aligned </p>
25. <p id ="center1">This paragraph will be pink and center-aligned</p>
26. </body>
27. </html>