What is CSS
- CSS, which stands for Cascading Style Sheets, is a language used to control the presentation of HTML elements on a webpage.
- It allows users to define how HTML content is displayed, making it easier to format and style web pages.
- CSS can manage various aspects of a webpage, such as text color, font styles, and paragraph spacing, among other things.
- While CSS is straightforward to learn, it offers powerful control over HTML documents.
Advantage of CSS
Faster Page Speed:
CSS can enhance page speed by applying consistent styles across all
occurrences of specific tags in HTML documents, making it more efficient than
other methods.
Better User Experience:
CSS makes webpages visually appealing and user-friendly. Proper formatting of
buttons and text improves the overall user experience.
Quicker Development Time:
CSS allows you to define the style and format for multiple pages with a single
code string. This means you can replicate the look and feel of one webpage
across several pages easily.
Easy Formatting Changes:
Modifying the format in CSS is simple—changing the style on one page
automatically updates the format across all linked pages. There’s no need to
manually adjust individual pages.
Compatibility:
In today's digital environment, compatibility is crucial. CSS, when used with
HTML, ensures that webpages are both responsive and user-friendly.
Why do we use CSS?
CSS is a powerful language used to style and control the design of HTML
documents, enhancing the appearance of webpages.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: Aqua;
}
h1 {
color: black;
text-align: center;
}
p {
font-family: Verdana, sans-serif;
font-size: 20px;
}
</style>
</head>
<body>
<h1>HELLO FRIENDS</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output
.png)
Types of CSS
- Inline CSS
- Internal CSS
- External CSS
Inline CSS
Inline CSS styles HTML elements directly by applying styles within the HTML
attributes, without using selectors. Although it can be more difficult to
manage than other methods, it is useful in certain situations.
Example
<p style="color: orange; font-size: 20px;">Here is my first
paragraph.</p>
<p>Here is my second paragraph.</p>
Internal CSS
Internal CSS is used to style just one page at a time. It can take more time
because you need to style each page separately. With internal CSS, each page
has its own unique style.
Syntax
<style>
/* Write your styles below */
</style>
Example
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: black;
}
h2{
color: mediumvioletred;
}
h3{
color: powderblue;
}
</style>
</head>
<body>
<h2>Welcome!!</h2>
<h3>Good Morning!</h3>
</body>
</html>
Output
.png)
External CSS
External CSS links all webpages to a separate file, which is created as a text
document. This method is more efficient for styling large websites and makes
the CSS files easier to read.
Syntax
<head>
<!-- If the CSS file is in another folder, provide the path to the
file -->
<link rel="stylesheet" href="path/to/nameOfTheSheet.css">
</head>
How does CSS Work
The <h1></h1> tags in HTML create a header, but CSS makes it look
more attractive.
Example
<h1>
THIS IS A FIRST HEADING
</h1>
CSS Comment
CSS comments allow you to add notes in your code to help others understand it
better. They can also make your source code more organized and readable.
Example
/* This is a single-line comment */
p {
color: blue;
}
Selectors
In CSS, selectors are used to choose the specific elements you want to style.
There are various types of selectors:
- Element Selector
- Universal Selector
- ID Selector
- Class Selector
Element Selector
Targets HTML elements by their name.
Syntax
element {
property: value;
}
Example
h1 {
background-color: red;
}
Universal Selector
Affects all elements on the page.
Example
* {
property: value;
}
ID Selector
Targets a specific element with a unique ID.
Syntax
#id {
property: value;
}
Example
<!DOCTYPE html>
<html>
<head>
<!-- CSS property using id attribute -->
<style>
#first{
colour: red;
text-align: center;
}
#second{
text-align: center;
color: black;
}
</style>
</head>
<body>
<!-- id attribute declares here -->
<h1 id="first">First Heading</h1>
<h2 id="second">Second Heading</h2>
</body>
</html>
Class Selector
Applies styles to elements with a particular class name.
Example
.classname{
background-color: yellow;
}
CSS Colors
In CSS, there are several ways to apply colors. The three most commonly
used methods are:
RGB
RGB is a color model that combines red, green, and blue. It uses three
parameters, each ranging from 0 to 255
Example
RGB(255, 0, 0)
Hexadecimal
Hex is a code that starts with # and consists of 6 characters, divided
into 3 pairs. Each pair represents the intensity of red, green, and blue,
ranging from 00 to FF.
RGBA
RGBA uses four parameters: red, green, blue, and alpha. The first three
parameters range from 0 to 255, while the alpha value ranges from 0 to 1.
CSS background
In CSS, there are various methods to style HTML documents. Some of the key
ones include:
Color
Used to change the color of the text or background.
Repeat
Specifies whether and how an image should repeat.
Image
Sets an image as the background.
Position
Determines the placement of an image in the background.
CSS Border
It is used to set the border for HTML elements.We can set the border on
the right, top, bottom, and left sides. Here are some key properties for
setting up borders in HTML elements:
Width
Sets the thickness of the borders.
Style
Defines the style of the borders.
Color
Specifies the color of the borders.
Radius
Defines the curvature of the border corners.
Example
border-width: 5px 10px;
.png&description=WHAT IS CSS){kind=link}