CSS Introduction
CSS stands for Cascading Style Sheets.
Used to describe the form of a HTML pages to be displayed.
CSS saves a lot of work.
It allows designers and developers to create and control multiples layout of all webpages at a time.
CSS allows wide range of properties and methods.
Used to describe the form of a HTML pages to be displayed.
CSS saves a lot of work.
It allows designers and developers to create and control multiples layout of all webpages at a time.
CSS allows wide range of properties and methods.
- It applies styles like fonts, color, size, etc.
- Different styles can be applied to a web page in multiple ways.
- Control's the layout of a webpage.
- We can create high animations and transitions.
- bulids a responsive and attrative web pages.
Example
<!DOCTYPE html>
<html>
<head>
<title>Classes and IDs Example</title>
<style>
.important {
font-weight: bold;
color: red;
}
#unique {
color: blue;
}
</style>
</head>
<body>
<p>This is a <span class="important">very important</span> message.</p>
<p id="unique">This is a unique element with its own styling.</p>
</body>
</html>
Run
CSS Syntax
CSS syntax consists of rules that define how to style HTML elements. Each rule consists of a selector and a declaration block.
The selector specifies which HTML elements to style, and the declaration block contains one or more property-value pairs that define the actual styles to be applied.
The selector specifies which HTML elements to style, and the declaration block contains one or more property-value pairs that define the actual styles to be applied.
Syntax Explanation
Let's see how the syntax works.
| Category | Description |
|---|---|
| Selector |
|
| Property | Represents the CSS attribute you want to modify, such as color, font-size, margin, etc. Many CSS properties allow you to control different aspects of an element's presentation. |
| Value | The setting applied to a property. For example, for the property color, the value could be red, #00ff00, or rgb(255, 0, 0). |
| Declaration Block | A group of property-value pairs enclosed in curly braces {}. Multiple declarations are separated by semicolons ; |
Quick Recap
Topics Covered
Practice With Examples in Compilers
The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now
Example 1
<!DOCTYPE html>
<html>
<head>
<title>Responsive Layout</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #444;
color: #fff;
padding: 10px;
text-align: center;
}
section {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
@media (max-width: 600px) {
header, nav, footer {
background-color: #666;
}
}
</style>
</head>
<body>
<header>
<h1>Responsive Website</h1>
</header>
<nav>
<a href="#">Home</a> | <a href="#">About</a> | <a href="#">Contact</a>
</nav>
<section>
<h2>Welcome</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<footer>
© 2023 MyWebsite.com
</footer>
</body>
</html>
