Introduction to CSS
CSS (Cascading Style Sheets) is a language used to describe the presentation of a document written in HTML. It controls the layout, colors, fonts, and overall visual appearance of web pages.
Basic Syntax
A CSS rule consists of a selector and a declaration block:
selector {
property: value;
}- Selector: Targets the HTML element to be styled.
- Property: The specific characteristic to be styled (e.g., color, font-size).
- Value: The setting for the property.
Selectors
Type Selector
p {
color: blue;
}Selects all <p> elements and sets their text color to blue.
Class Selector
.my-class {
font-size: 20px;
}Selects all elements with the class "my-class" and sets their font size to 20px.
ID Selector
#my-id {
background-color: yellow;
}Selects the element with the id "my-id" and sets its background color to yellow.
Attribute Selector
[type="text"] {
border: 1px solid #ccc;
}Selects all elements with a type attribute equal to "text" and adds a border with 1px solid light grey color.
Descendant Selector
div p {
margin-bottom: 10px;
}Selects all <p> elements that are descendants of a <div> element and sets their bottom margin to 10px.
Basic Properties
Color
p {
color: red;
}The color property sets the color of the text inside an element.
Background-color
div {
background-color: lightblue;
}The background-color property sets the background color of an element.
Font-size
h1 {
font-size: 24px;
}The font-size property sets the size of the text inside an element.
Margin
.box {
margin: 20px;
}The margin property sets the space outside the border of an element.
Padding
.container {
padding: 15px;
}The padding property sets the space between the content and the border of an element.
Border
img {
border: 2px solid black;
}The border property sets the border around an element, specifying the width, style, and color.
Box Model
Understanding the box model is crucial in CSS. Every element is considered a rectangular box, which consists of:
- Content: The actual content of the element.
- Padding: The space between the content and the border.
- Border: The border around the padding (and content).
- Margin: The space outside the border.
Example
.box {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}This example sets the width and height of the element to 200px and 100px, respectively. It also adds 10px of padding inside the element, a 2px solid black border around it, and a 20px margin outside the border.
Conclusion
These notes cover the basics of CSS. Continue practicing by experimenting with different properties and selectors. As you progress, explore advanced topics like Flexbox, Grid, animations, and media queries for responsive design.
Practice
Basic Syntax Practice
Try writing a simple CSS rule that changes the text color of all paragraphs to blue:
p {
color: blue;
}Selectors Practice
Create a CSS rule using a class selector to change the font size of elements with the class "highlight" to 18px:
.highlight {
font-size: 18px;
}Basic Properties Practice
Write a CSS rule to add a 10px margin and a 5px padding to elements with the class "box":
.box {
margin: 10px;
padding: 5px;
}Box Model Practice
Experiment by modifying the example above to change the border to 1px dotted blue:
.box {
width: 200px;
height: 100px;
padding: 10px;
border: 1px dotted blue;
margin: 20px;
}Final Practice
Create a complete CSS rule set that styles a page with the following requirements:
- The body should have a light grey background color and use Arial as the font.
- All headings (h1) should be centered and in dark blue.
- Paragraphs should have a line height of 1.5 and be colored dark grey.
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
text-align: center;
}
p {
color: darkgrey;
line-height: 1.5;
}
Post a Comment