CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. It controls how web elements appear on a page, such as fonts, colors, layouts, and spacing, making it an essential technology for web development.
Key Concepts:
CSS Syntax: CSS is written in rulesets that consist of selectors and declarations:
css code:
selector {
property: value;
}
Selector: Specifies the HTML element to style (e.g., p for paragraphs, h1 for headers).selector {
property: value;
}
Property: Specifies what aspect of the element to style (e.g., color, font-size).
Value: Specifies the value for the property (e.g., red, 16px).
Types of CSS:
Inline CSS: Directly within HTML elements using the style attribute.
html code:
<h1 style="color: blue;">Hello World</h1>
Internal CSS: Placed within the <style> tag inside the HTML <head>.<h1 style="color: blue;">Hello World</h1>
html code:
<style>
h1 {
color: blue;
} </style>
External CSS: In an external .css file, linked using <link> in the HTML <head>.<style>
h1 {
color: blue;
} </style>
html code:
<link rel="stylesheet" href="styles.css">
Selectors: Selectors define which HTML elements to style:<link rel="stylesheet" href="styles.css">
Element Selector: Targets HTML tags (h1, p).
css code:
p {
color: green;
}
Class Selector: Targets elements with a specific class using a . (dot).p {
color: green;
}
css code:
.container {
background-color: yellow;
}
ID Selector: Targets elements with a specific ID using #..container {
background-color: yellow;
}
css code:
#header {
font-size: 24px;
}
CSS Box Model: The box model represents the layout of elements on a page:#header {
font-size: 24px;
}
Content: The text or image within the element.
Padding: Space between the content and the border.
Border: A line surrounding the padding.
Margin: Space between the element and other elements.
Example:
css code:
div {
margin: 10px;
padding: 20px;
border: 2px solid black;
}
Responsive Design: CSS allows for creating responsive websites that adjust to different screen sizes using media queries.div {
margin: 10px;
padding: 20px;
border: 2px solid black;
}
css code:
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
Importance of CSS:@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
Separation of concerns: CSS separates content (HTML) from design, making web pages easier to maintain.
Consistency: By using CSS, the appearance of a website can be made consistent across multiple pages.
Flexibility: CSS allows for customization and flexibility in designing complex layouts.
Responsive design: Ensures a good user experience across a range of devices (desktops, tablets, and smartphones).
CSS plays a vital role in the overall appearance and usability of modern websites.