Module 1: Introduction to CSS
What is CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to describe the visual presentation of web pages written in HTML. It controls the layout, colors, fonts, spacing, and overall appearance of a website, ensuring a visually appealing and user-friendly design.
How CSS Works
CSS works by applying styles to HTML elements using a set of rules. These rules define how elements should appear on the page. CSS operates through a selector (which targets an HTML element) and a declaration block (which defines the styles).
Example: Basic CSS Rule
css code
p { color: blue; font-size: 16px; }
This rule applies to all <p> elements, making the text blue and setting the font size to 16px.
Role of CSS in Web Development
CSS plays a crucial role in web development by:
Enhancing Design & User Experience – Controls the look and feel of a website.
Ensuring Responsive Design – Adapts layouts to different screen sizes.
Improving Performance – Reduces page load times by minimizing the need for inline styling.
Providing Consistency – Uses external stylesheets for uniform design across pages.
Methods of Using CSS
CSS can be applied to HTML in three ways:
1. Inline CSS
Applied directly to an HTML element using the style attribute.
Example:
html code
<p style="color: red; font-size: 20px;">This is a red paragraph.</p>
Pros: Quick for small changes.
Cons: Hard to maintain and not reusable.
2. Internal CSS
Defined inside the <style> tag within the HTML document’s <head>.
Example:
html code
<!DOCTYPE html> <html lang="en"> <head> <style> h1 { color: green; text-align: center; } </style> </head> <body> <h1>Welcome to CSS</h1> </body> </html>
Pros: Useful for styling single-page applications.
Cons: Not efficient for large-scale projects.
3. External CSS
Stored in a separate .css file and linked to an HTML document.
Example:
styles.css
css code
body { font-family: Arial, sans-serif; background-color: #f4f4f4; } h1 { color: blue; }
index.html
html code
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Hello, World!</h1> </body> </html>
Pros: Best for large projects; promotes reusability and cleaner code.
Cons: Requires additional HTTP requests to load the stylesheet.
Deep Explanation of CSS Selectors
CSS selectors define which elements the styles apply to.
1. Basic Selectors
Element Selector – Targets all instances of an element.
css code
h2 { color: purple; }
Class Selector – Targets elements with a specific class.
css code
.highlight { background-color: yellow; }
HTML Usage:
html code
<p class="highlight">This is highlighted text.</p>
ID Selector – Targets a specific element with an ID.
css code
#unique { font-weight: bold; }
HTML Usage:
html code
<p id="unique">This text is bold.</p>
2. Grouping Selectors
Allows styling multiple elements at once.
css code
h1, h2, h3 { color: darkblue; }
3. Pseudo-Classes & Pseudo-Elements
Pseudo-Class: Applies styles to elements based on their state.
css code
a:hover { color: red; }
Pseudo-Element: Styles specific parts of an element.
css code
p::first-letter { font-size: 24px; color: red; }
Practical Exercises
Exercise 1: Styling a Navigation Bar
Objective: Create a horizontal navigation bar using CSS.
html code
<!DOCTYPE html> <html lang="en"> <head> <style> .navbar { background-color: #333; overflow: hidden; } .navbar a { float: left; display: block; color: white; text-align: center; padding: 14px 20px; text-decoration: none; } .navbar a:hover { background-color: #ddd; color: black; } </style> </head> <body> <div class="navbar"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a> </div> </body> </html>
Expected Outcome: A simple navigation bar with hover effects.
Exercise 2: Responsive Layout with Media Queries
Objective: Make a layout that adapts to different screen sizes.
css code
.container { width: 80%; margin: auto; background: lightgray; } @media (max-width: 600px) { .container { width: 100%; background: lightblue; } }
Expected Outcome: Background color changes for smaller screens.
Advanced Concepts
CSS Grid & Flexbox – Modern layout techniques for responsive design.
Animations & Transitions – Add interactivity with smooth effects.
css code
button { transition: background-color 0.5s ease-in-out; } button:hover { background-color: orange; }
CSS Variables – Define reusable color and font values.
css code
:root { --primary-color: blue; } h1 { color: var(--primary-color); }
Conclusion
CSS is essential for web development, allowing developers to create beautiful, responsive, and maintainable websites. By mastering CSS selectors, layouts, and responsive design techniques, developers can build visually appealing web pages.
Next Steps
Practice: Try building different layouts using Grid and Flexbox.
Experiment: Modify colors, fonts, and spacing for a custom design.
Explore: Learn advanced topics like CSS animations and custom properties.
No comments:
Post a Comment