CSS Practice
- Get link
- X
- Other Apps
What is CSS?
CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of a document written in HTML. It controls the layout, colors, fonts, and overall visual appearance of a webpage, allowing you to separate content from design.
Basic Concepts of CSS
Selectors: Define which HTML elements the styles will apply to. Examples include element selectors (
p
for paragraphs), class selectors (.classname
), and ID selectors (#idname
).Properties and Values: Each CSS rule has a property (like
color
,font-size
,margin
) and a value that specifies how that property should be displayed.- Example:
p {
color: blue; font-size: 16px; }
- Example:
CSS Box Model: Understanding the box model is essential as it describes how elements are sized and spaced on the page. The box model includes
content
,padding
,border
, andmargin
.CSS Layouts: Techniques like Flexbox and Grid allow for the creation of responsive, flexible layouts that adapt to different screen sizes.
CSS Positioning: Controls how elements are placed on the page. Common values include
static
,relative
,absolute
,fixed
, andsticky
.
Code Examples for Practice
Example 1: Basic Text Styling
/* CSS */p {
color: darkblue;
font-family: Arial, sans-serif;
line-height: 1.5;
text-align: justify;
}
<!-- HTML --><p>This is a paragraph styled with basic CSS properties.</p>
Example 2: Styling with Classes and IDs
/* CSS */.header {
background-color: #f8f9fa;
padding: 10px;
text-align: center;
}
#intro {
font-size: 18px;
color: #333;
}
<!-- HTML --><div class="header">
<h1>Welcome to CSS Practice</h1>
</div>
<p id="intro">This paragraph is styled with an ID selector.</p>
Example 3: Box Model and Spacing
/* CSS */.box {
width: 300px;
padding: 20px;
border: 2px solid #000;
margin: 10px auto;
background-color: #e0e0e0;
}
<!-- HTML --><div class="box">
<p>This box demonstrates the CSS box model.</p>
</div>
Example 4: Flexbox Layout
/* CSS */.container {
display: flex;
justify-content: space-around;
padding: 20px;
}
.box {
background-color: #ffc107;
padding: 20px;
width: 100px;
text-align: center;
}
<!-- HTML --><div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
Example 5: Responsive Design with Media Queries
/* CSS */.container {
width: 80%;
margin: 0 auto;
}
@media (max-width: 600px) {
.container {
width: 100%;
}
}
<!-- HTML --><div class="container">
<p>This container is responsive and will adjust based on screen size.</p>
</div>
Chapter Challenges
Challenge 1: Create a personal webpage with a styled header, navigation menu, and footer using CSS. Use different font styles, colors, and background images.
Challenge 2: Design a responsive layout using Flexbox that includes a navigation bar, a main content area, and a sidebar.
Challenge 3: Build a pricing table using the CSS box model, applying padding, margins, and borders to create a clean and organized layout.
Challenge 4: Develop a photo gallery using CSS Grid, where images automatically rearrange based on screen size.
Challenge 5: Create a multi-column text layout for an article, using CSS to control the column gap, text alignment, and overall spacing.
- Get link
- X
- Other Apps
Comments
Post a Comment