STYLE - SHEETS
Introduction to CSS
Cascading Style Sheets (CSS) describe how documents are presented on screens, in print, or even how they are pronounced in some cases. CSS allows developers to control the layout, color schemes, typography, and responsiveness of web pages efficiently. The World Wide Web Consortium (W3C) has actively promoted the use of style sheets since the consortium was founded in 1994.
CSS provides easy and effective alternatives to specify various attributes for HTML tags. By using CSS, developers can define multiple style properties for HTML elements. Each property has a name and a value, separated by a colon (:), and each property declaration is separated by a semicolon (;).
Why Use CSS?
- Separation of Content and Design: CSS enables the separation of content (HTML) from design, making websites more organized and maintainable.
- Improved Web Page Performance: CSS files are cached by browsers, reducing the load time of web pages.
- Easier Maintenance: With CSS, updating the style of multiple web pages becomes easier, as one CSS file can be linked to multiple HTML files.
- Better Accessibility: CSS allows developers to optimize their sites for different screen sizes and assistive technologies.
- Consistent Styling: CSS ensures that a website has a uniform look and feel across all pages.
Types of CSS
CSS can be applied to HTML in three different ways:
- Inline CSS: Styles are applied directly within an HTML element using the
styleattribute. - Internal CSS: Defined within a
<style>tag in the<head>section of an HTML document. - External CSS: Stored in a separate
.cssfile and linked to the HTML document using a<link>tag.
Basic Syntax of CSS
A typical CSS rule consists of a selector and a declaration block:
selector {
property: value;
}
For example:
p {
color: blue;
font-size: 16px;
}
CSS Selectors
CSS selectors are patterns used to select and style elements. Some common selectors include:
- Universal Selector (
*****): Targets all elements on a page. - Element Selector (
tagname****): Targets a specific HTML tag. - Class Selector (
.classname****): Targets elements with a specific class. - ID Selector (
#idname****): Targets a single element with a unique ID. - Group Selector (
element1, element2****): Targets multiple elements.
CSS Box Model
CSS Box Model
The CSS Box Model consists of four layers:
- Content: The actual content of the element.
- Padding: Space between the content and the border.
- Border: Surrounds the padding and content.
- Margin: Space outside the border.
div {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
CSS Positioning
CSS provides various positioning techniques:
- Static: Default position.
- Relative: Positioned relative to its normal position.
- Absolute: Positioned relative to its nearest positioned ancestor.
- Fixed: Positioned relative to the viewport.
- Sticky: Switches between relative and fixed positioning.
Responsive Web Design with CSS
Responsive web design ensures that a website adapts to different screen sizes. Some techniques include:
- Media Queries: Adjust styles based on screen width.
- Flexbox: A modern layout model for flexible designs.
- Grid Layout: A two-dimensional layout system.
Example of a media query:
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
CSS Animations and Transitions
CSS enables smooth animations and transitions without JavaScript:
div {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 2s;
}
div:hover {
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Font Tag Example (Modern CSS)</title>
<style>
.text-red { color: red; font-size: 16px; }
.text-blue { color: blue; font-size: 20px; }
.text-green { color: green; font-size: 24px; }
</style>
</head>
<body>
<h2>Using CSS for Text Styling</h2>
<p class="text-red">This is red text with size 16px.</p>
<p class="text-blue">This is blue text with size 20px.</p>
<p class="text-green">This is green text with size 24px.</p>
</body>
</html>
```
<p style="color: red; font-size: 16px;">This is red text with size 16px.</p>
```
Sure! Below are examples demonstrating all three ways to apply CSS in an HTML document.
1. External Style Sheet
Here, we create a separate .css file and link it to the HTML document.
Step 1: Create a CSS file (styles.css)
p {
color: blue;
font-size: 18px;
}
Step 2: Link the CSS file in the HTML document (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This paragraph is styled using an external CSS file.</p>
</body>
</html>
2. Internal Style Sheet
Define styles inside the <style> tag within the <head> section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
p {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<p>This paragraph is styled using an internal CSS style sheet.</p>
</body>
</html>
3. Inline Style Sheet
Define styles directly within the style attribute of an HTML element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS Example</title>
</head>
<body>
<p style="color: red; font-size: 22px;">This paragraph is styled using inline CSS.</p>
</body>
</html>
Comparison
| Method | Pros | Cons |
|---|---|---|
| External CSS | Best for maintaining large projects, reusable across multiple pages | Requires an additional HTTP request to load the CSS file |
| Internal CSS | Useful for single-page styling, avoids extra HTTP requests | Not reusable for multiple pages |
| Inline CSS | Quick and easy for small changes | Not recommended for large-scale projects, difficult to maintain |
Absolutely! When you need to apply consistent styling across multiple web pages, it's best to use an external CSS file. This keeps your code organized, improves maintainability, and enhances website performance.
How to Use an External CSS File in Multiple Pages
Step 1: Create an External CSS File (styles.css)
Save the following CSS code in a file named styles.css:
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 20px;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #555;
font-size: 18px;
}
Step 2: Include the CSS File in Multiple HTML Pages
Page 1: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is the home page, styled using an external CSS file.</p>
</body>
</html>
Page 2: about.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>About Us</h1>
<p>This is the about page, and it shares the same styles as the home page.</p>
</body>
</html>
Advantages of External CSS
✅ Reusability – One CSS file can be used across multiple pages.
✅ Better Organization – Keeps HTML and CSS separate for easy maintenance.
✅ Faster Load Time – Browser caches the CSS file, improving website speed.
Frequently Asked Questions (FAQ) about CSS
Q 1. What is CSS and why is it used?
Answer: CSS (Cascading Style Sheets) is used to control the presentation and layout of web pages. It allows developers to style HTML elements, including colors, fonts, spacing, positioning, and responsiveness, making web pages more visually appealing and user-friendly.
Q 2. What are the different types of CSS?
Answer: There are three main types of CSS:
- External CSS – Stored in a separate
.cssfile and linked using the<link>tag in HTML. - Internal CSS – Written inside a
<style>tag within the<head>section of an HTML file. - Inline CSS – Applied directly to an HTML element using the
styleattribute.
- Classes (
.) can be applied to multiple elements. Example:.example { color: red; }<p class="example">This is a paragraph.</p> - IDs (
#) are unique and should be used for only one element. Example:#unique { color: blue; }<p id="unique">This is a unique paragraph.</p>
Q 4. What is the Box Model in CSS?
Answer: The CSS Box Model consists of four parts:
- Content – The actual content inside the element.
- Padding – Space between the content and the border.
- Border – A boundary surrounding the padding and content.
- Margin – Space outside the border that separates elements.
-
Pseudo-classes define a special state of an element. Example:
>
a:hover { color: green; }This changes the color of a link when hovered.
-
Pseudo-elements style specific parts of an element. Example:
p::first-letter { font-size: 24px; font-weight: bold; }This makes the first letter of a paragraph larger and bold.
relative, absolute, fixed, and sticky positioning?- Relative – Positions an element relative to its normal position.
- Absolute – Positions an element relative to its nearest positioned ancestor.
- Fixed – Positions an element relative to the viewport (does not move when scrolling).
- Sticky – Switches between relative and fixed depending on the scroll position.
Answer: Media queries allow CSS to adapt to different screen sizes. Example:
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
This changes the background color when the screen width is 600px or smaller.
Q 8. What is Flexbox in CSS?
Answer: Flexbox is a CSS layout model that makes it easier to align items within a container. Example:
.container {
display: flex;
justify-content: center;
align-items: center;
}
This centers elements both horizontally and vertically.
Q 9. What is Grid Layout in CSS?
Answer: CSS Grid Layout allows for complex, two-dimensional layouts. Example:
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto auto;
}
This creates a grid with two columns where the second column is twice as wide as the first.
Q 10. How can I animate elements using CSS?
Answer: You can use the @keyframes rule for animations. Example:
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
div {
animation-name: example;
animation-duration: 3s;
}