Introduction to CSS
CSS (Cascading Style Sheets) is a style sheet language used to describe the look and formatting of a document written in HTML. CSS is essential for web design as it controls the layout, colors, fonts, and overall presentation of web pages.
Basic Concepts
Syntax
CSS is composed of selectors and declarations. A declaration block consists of property-value pairs enclosed in curly braces {}.
selector {
property: value;
}
Example
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
CSS Selectors
Type Selector
Selects all elements of a given type.
p {
color: blue;
}
Class Selector
Selects all elements with a specific class. Class names start with a dot ..
.intro {
font-size: 20px;
}
ID Selector
Selects a single element with a specific ID. ID names start with a hash #.
#header {
background-color: yellow;
}
Attribute Selector
Selects elements based on an attribute or attribute value.
input[type="text"] {
border: 1px solid black;
}
Pseudo-classes
Select elements based on their state.
a:hover {
color: red;
}
CSS Properties
Color and Background
color: Sets the text color.background-color: Sets the background color.background-image: Sets a background image.
body {
background-color: #f0f0f0;
}
h1 {
color: #333;
}
div {
background-image: url('background.jpg');
}
Text
font-family: Specifies the font of the text.font-size: Sets the size of the font.text-align: Aligns the text.
p {
font-family: Arial, sans-serif;
font-size: 16px;
text-align: justify;
}
Box Model
width,height: Sets the width and height of an element.padding: Space inside the element, between the element and its content.margin: Space outside the element, between the element and its neighbors.border: Surrounds the padding and content.
div {
width: 300px;
height: 200px;
padding: 10px;
margin: 20px;
border: 2px solid black;
}
Layout
Display
Controls the layout of an element.
blockinlineinline-blocknone
span {
display: inline-block;
width: 100px;
height: 50px;
}
Positioning
static: Default value.relative: Positioned relative to its normal position.absolute: Positioned relative to the nearest positioned ancestor.fixed: Positioned relative to the viewport.sticky: Toggles between relative and fixed, depending on scroll position.
#box1 {
position: relative;
top: 10px;
left: 20px;
}
#box2 {
position: absolute;
top: 50px;
left: 100px;
}
Flexbox
A layout model for one-dimensional layouts.
display: flex;justify-contentalign-items
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
}
Grid
A layout model for two-dimensional layouts.
display: grid;grid-template-columnsgrid-template-rows
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
Media Queries
Used to create responsive designs.
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
External and Internal CSS
External CSS
Link to an external CSS file in the HTML document.
<link rel="stylesheet" href="styles.css">
Internal CSS
Include CSS within the <style> tag in the HTML document.
<style>
body {
background-color: lightblue;
}
</style>
Conclusion
CSS is a powerful tool for designing and enhancing the visual presentation of web pages. Understanding the basic concepts and properties of CSS allows you to create visually appealing and responsive web designs. Practice using different selectors, properties, and layouts to become proficient in CSS.
For more in-depth learning, consider exploring advanced topics such as CSS animations, transitions, and preprocessors like SASS or LESS. Happy coding!
