The short form of Cascading Style Sheet is CSS.
The simplest way to determine the structure, size, shape, position, color, mobility, etc. of different types of web pages is through CSS.
Why CSS
Using a single CSS script all the web page design can be complete.
Syntax CSS:
Selectore {
Property: Value;
}
Example:
p {
color: blue;
text-align: left;
}CSS in HTML
<html>
<head>
<style>
p {
color: blue;
text-align: left;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>
Types of CSS:
- Internal CSS
- Inline CSS
- External CSS
1. Internal CSS
Internal CSS is a CSS property that should be within the HTML file in the head section.
<head>
<style>
.p {
color:blue;
text-align:left;
}
</style>
</head>2. Inline CSS
Inline CSS is a CSS property that is attached to an element in the body section.
<body>
<p style = "color:blue; text-align:left;">
This paragraph is styled with CSS.
</p>
</body>3. External CSS
External CSS is a CSS property that is written in a separate file with the .css extension and is linked to the HTML document via the link tag.
Example: Save below code in file p.css.
.p {
color:#blue;
text-align:left;
}Link p.css in HTML file
<html>
<head>
<link rel="stylesheet" href="p.css"/>
</head>
<body>
<div class ="p">This paragraph is styled with CSS.</div>
</body>
</html>Advantages of CSS:
- Create CSS once & use it multiple times.
- One CSS can be used in several areas of HTML.
- Less number of lines of coding lines.
- One line of code affects the whole web site and maintenance time.
- CSS is less complex therefore the effort are significantly reduced.
- CSS cis device friendly.
- Easy to customize online page
- CSS use reduces the file size..
Disadvantages of CSS:
- CSS, what works with one browser might not always work with another.
- After making the changes we need to confirm the compatibility affects on all the browsers.
- Different levels of CSS are often quite confusing.