CSS (Cascading Style Sheets) is a style sheet language used to control the presentation of HTML documents. CSS allows you to define the look and feel of a web page by specifying styles for elements such as colors, fonts, layouts, spacing, and more. While HTML provides the structure and content of a web page, CSS is used to design and visually style that content, making web pages more appealing and user-friendly.
Selectors:
Example:
h1 {
color : blue;
}
.highlight {
background-color: yellow;
}
#unique-element {
font-size: 20px;
}
Properties and Values:
Example:
p {
color: red;
font-size: 16px;
line-height: 1.5;
}
Selectors Types:
h1
, p
, div
)..
), e.g., .highlight
.#
), e.g., #unique-element
.*
).input[type="text"]
).Cascade and Specificity:
font-family
and color
.
/* Element selector */
h1 {
color: blue;
font-family: Arial, sans-serif;
}
/* Class selector */
.highlight {
background-color: yellow;
padding: 10px;
}
/* ID selector */
#unique-element {
font-size: 20px;
margin-top: 20px;
}
Inline CSS:
style
attribute.
This method is not recommended for most cases due to poor maintainability.
Example:
<h1 >style="color: blue;">This is a heading</h1>
Internal CSS:
<style>
tag in the <head>
section of the HTML document.
This method is useful for styling a single document.Example:
<html>
<head>
<style>
body {
background-color: #f4f4f4;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>
External CSS:
.css
file and linked to the HTML
document using the <link>
tag. This is the best practice for maintaining large websites.Example (HTML):
<html>
<head>
<link >rel="stylesheet" >type="text/css" >href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p >class="highlight">This is an important paragraph.</p>
</body>
</html>
Example (styles.css
):
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
h1 {
color: green;
}
.highlight {
background-color: yellow;
padding: 10px;
}
The CSS Box Model is a fundamental concept that describes how elements are structured and spaced on a webpage. Every HTML element is considered a rectangular box, and the box model defines the spacing, borders, and padding around that element.
The box model consists of:
Example of Box Model CSS:
.box {
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 15px;
}
CSS offers several techniques for controlling the layout of a webpage:
Flexbox:
Example:
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
}
Grid:
Example:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
}
Positioning:
position
property, with
options such as static
, relative
, absolute
, fixed
, and sticky
.Example:
.absolute-box {
position: absolute;
top: 50px;
left: 100px;
}
Responsive design ensures that a website looks good on all devices, from desktops to smartphones. CSS provides several tools to achieve responsiveness:
Media Queries:
Example:
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
Viewport:
Example:
<meta >name="viewport" >content="width=device-width, initial-scale=1.0">
CSS frameworks like Bootstrap, Tailwind CSS, and Foundation provide pre-designed CSS components and grid systems to help developers quickly build responsive, modern web designs.
CSS is a powerful language that works hand-in-hand with HTML to create visually appealing web pages. By understanding and applying CSS, developers can control the presentation, layout, and overall design of a website, ensuring it provides a great user experience across different devices and screen sizes. Whether you are building a simple webpage or a complex web application, mastering CSS is essential for web development.