CSS
1) What Is CSS :
CSS (Cascading Style Sheets) is a language used to describe the presentation of a webpage. It controls how HTML elements are displayed by specifying layouts, colors, fonts, and more. CSS separates content from design, making it easier to maintain and update.
 |
| CSS |
Styles can be applied inline, internally, or externally via linked CSS files. It enhances user experience by enabling responsive design for different devices. CSS is crucial for creating visually appealing and interactive web pages.[W3 School]
2) Why Use CSS :
1. Separation of Content and Style: CSS keeps the design separate from the HTML content, making the code cleaner and easier to manage.
2. Consistency: CSS ensures a uniform look across multiple pages by applying the same styles globally.
3. Improved User Experience: With CSS, you can create responsive designs that adapt to various screen sizes and devices.
4. Faster Page Load: External CSS files can be cached, reducing load times compared to inline styles.
5. Easy Maintenance: Changes to the design can be made in one place, affecting the entire site.
6. Customization and Flexibility: CSS offers extensive styling options, enabling customization without modifying the HTML.
3) CSS Syntax:
CSS syntax consists of two main parts: selectors and declarations.
Basic Structure:
selector {
property: value;
}
- Selector: Specifies which HTML element(s) the style applies to (e.g., `p`, `.class`, `#id`).
- Property: A style attribute you want to change (e.g., `color`, `font-size`).
- Value: The value for the property (e.g., `blue`, `16px`).
Example:
h1 {
color: red;
font-size: 24px;
}
In this example, the `h1` selector applies the color red and sets the font size to 24px for all `<h1>` elements.
4) CSS Selectors :
CSS selectors are used to target HTML elements for applying styles. Here are the most common types:
1. Element Selector: Targets all instances of a specific HTML element.
- Example:
p {
color: blue;
}
2. Class Selector: Targets elements with a specific class attribute.
- Example:
.example {
font-size: 20px;
}
3. ID Selector: Targets a single element with a specific ID.
- Example:
#header {
background-color: gray;
}
4. Universal Selector: Targets all elements.
- Example:
*{
margin: 0;
}
5. Group Selector: Targets multiple selectors with the same styles.
- Example:
h1, h2, h3 {
color: green;
}
6. Attribute Selector: Targets elements based on their attributes.
- Example:
input[type="text"] {
border: 1px solid black;
}
5) How To Add Css :
There are three main ways to add CSS to an HTML document:
1. Inline CSS
- CSS is added directly to the HTML element using the `style` attribute.
- Example:
<p style="color: red;">This is a red paragraph.</p>
2. Internal CSS (Embedded CSS)
- CSS is placed inside a `<style>` tag within the `<head>` section of the HTML document.
- Example:
<head>
<style>
p {
color: blue;
}
</style>
</head>
3. External CSS
- CSS is written in a separate file (e.g., `styles.css`) and linked to the HTML document using the `<link>` tag.
- Example:
<head>
<link rel="stylesheet" href="styles.css">
</head>
4. CSS in JavaScript (Optional)
- CSS can be applied dynamically using JavaScript's `style` property.
- Example:
<script>
document.getElementById("myElement").style.color = "green";
</script>
6) CSS Comments:
7) CSS Tables :
CSS can be used to style HTML tables to improve their appearance and layout. Here's how you can style different aspects of a table using CSS:
Basic CSS Properties for Tables:
1. Table Borders: You can add borders to tables, rows, or cells.
table, th, td {
border: 1px solid black;
border-collapse: collapse; /* Removes double borders */
}
2. Table Padding: Adds space inside table cells.
th, td {
padding: 10px;
}
3. Table Width and Height: Sets the dimensions of the table or cells.
table {
width: 100%;
}
4. Text Alignment: Aligns text in cells.
th, td {
text-align: left; /* or center, right */
}
5. Table Background Color: Adds background colors to rows, columns, or cells.
th {
background-color: lightgray;
}
6. Zebra Stripes: Creates alternating row colors for better readability.
tr:nth-child(even) {
background-color: #f2f2f2;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: left;
}
th {
background-color: lightgray;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Styled Table Example</h2>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>28</td>
<td>Chicago</td>
</tr>
<tr>
<td>Smith</td>
<td>30</td>
<td>San Francisco</td>
</tr>
</table>
</body>
</html>
This example demonstrates how to style a basic table with borders, padding, alternating row colors, and background styling for headers.
8) CSS Math Functions:
CSS Math functions are used to perform calculations directly within your styles, providing more flexibility and dynamic control over values. Common CSS math functions include:
1. calc(): Performs calculations with different units.
- Example:
div {
width: calc(100% - 50px);
padding: calc(10px + 2%);
}
2. min(): Returns the smallest value from a list of values.
- Example:
div {
width: min(50%, 400px); /* Takes the smaller value between 50% of the viewport and 400px */
}
3. max(): Returns the largest value from a list of values.
- Example:
div {
width: max(20%, 200px); /* Takes the larger value between 20% of the viewport and 200px */
}
4. clamp(): Clamps a value between a minimum and maximum range.
- Example:
div {
font-size: clamp(1rem, 2vw, 3rem); /* Sets the font-size between 1rem and 3rem, scaling with viewport width */
}
5. round(): Rounds a number to the nearest integer or specified precision.
- Example (CSS properties like `rotate`):
div {
transform: rotate(round(23.6deg)); /* Rounds rotation to 24 degrees */
}
These functions allow for more responsive and adaptable designs, ensuring that your layouts and styles can adjust to various screen sizes and conditions without needing complex calculations in advance.
0 Comments