1. Introduction to CSS
CSS stands for Cascading Style Sheets. It is a styling language used to describe the presentation of HTML documents. CSS separates the presentation of a web page from its content to make it easier to manage and update.
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First CSS Document</title>
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<h1>Welcome to my website</h1>
</body>
</html>2. CSS Selectors
CSS selectors are used to select HTML elements for styling.
Example:
/* selects all headings */
h1, h2, h3 {
color: blue;
}
/* selects all paragraphs with the class "intro" */
p.intro {
font-size: 18px;
}
/* selects all elements with the id "main" */
#main {
background-color: green;
}3. CSS Properties
CSS properties are used to set the styling of an HTML element. Properties are applied to selectors using curly brackets {}.
Example:
/* sets the color and font-size properties for h1 elements */
h1 {
color: blue;
font-size: 24px;
}
/* sets the font-family property for all elements on the page */
* {
font-family: Arial, sans-serif;
}4. CSS Box Model
The CSS box model describes the width, height, and spacing of an HTML element. The box model consists of four parts: margin, border, padding, and content.
Example:
/* sets the border, padding, and margin properties for a div */
div {
border: 1px solid black;
padding: 10px;
margin: 20px;
}5. CSS Layout
CSS can be used to create layouts and position HTML elements on a web page. There are different layout techniques such as floats, flexbox, and CSS grid.
Example:
/* uses flexbox to arrange items in a row */
.container {
display: flex;
}
.item {
flex: 1;
}6. CSS Responsive Design
CSS can be used to create responsive designs that adjust to different screen sizes. This is typically achieved using media queries that target specific screen widths.
Example:
/* adjusts the layout for screens smaller than 768px */
@media only screen and (max-width: 768px) {
.container {
flex-direction: column;
}
}Conclusion
This basic CSS tutorial covered some essential elements of CSS that will help you get started. As your knowledge of CSS increases, you will learn more about advanced techniques such as animations and transitions that will help you create more sophisticated and visually appealing web pages.