Activity 19: Research CSS
What is CSS?
Cascading Style Sheets (CSS) is a language that describes how HTML elements should be displayed on a web page. It's like a set of instructions that tells the browser how to style the text, colors, layout, fonts, and other visual aspects of your web pages.
Key Concepts:
Selectors: Selectors are used to target specific HTML elements you want to style. For example,
h1selects all<h1>elements,.my-classselects all elements with the class "my-class," and#my-idselects the element with the ID "my-id."Properties: Properties are the actual style attributes you can apply to elements. Examples include
color,font-size,margin,padding,background-color,display, andposition.Values: Values are the settings for each property. For example,
color: red;sets the color to red,font-size: 16px;sets the font size to 16 pixels, andmargin: 10px;sets a 10-pixel margin.
Basic CSS Properties:
Text Styling:
color: Sets the text color. Example:color: blue;font-size: Sets the font size. Example:font-size: 18px;font-family: Sets the font type. Example:font-family: Arial, sans-serif;font-weight: Sets the font boldness. Example:font-weight: bold;text-align: Aligns text (left, center, right). Example:text-align: center;
Box Model: The box model is how CSS treats every HTML element. It consists of:
Content: The actual text or image within the element.
Padding: Space between the content and the border.
Border: The line surrounding the element.
Margin: Space outside the border, creating space between elements.
/* Example */
.my-element {
width: 200px;
height: 100px;
border: 1px solid black; /* 1px solid black border */
padding: 10px; /* 10px padding around the content */
margin: 20px; /* 20px margin around the border */
}
Backgrounds:
background-color: Sets the background color. Example:background-color: lightgray;background-image: Sets a background image. Example:background-image: url("my-image.jpg");background-repeat: Controls how the background image is repeated. Example:background-repeat: no-repeat;
Layouts:
display: Determines how an element is displayed (block, inline, inline-block, flex, grid).position: Controls the positioning of an element (static, relative, absolute, fixed).flexbox: A powerful layout method for creating flexible and responsive designs.grid: Another powerful layout method for creating more complex and flexible layouts.
Practice: Simple HTML Document with CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Example</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 20px;
background-color: #f0f0f0; /* Light gray background */
}
h1 {
color: #333; /* Dark gray color for the heading */
font-size: 3em; /* Larger font size for the heading */
margin-bottom: 20px;
}
.container {
width: 80%;
max-width: 800px;
margin: 0 auto; /* Center the container horizontally */
background-color: white;
padding: 20px;
border-radius: 5px; /* Rounded corners */
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>Welcome to My CSS Example</h1>
<div class="container">
<p>This is a paragraph with some basic text styling.</p>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
Explanation:
Internal Stylesheet: The
styletags within the<head>create an internal stylesheet.Basic Styling: Sets the font, text alignment, margins, and background color for the
body.Heading Styles: Styles the
h1element (the main heading) with a dark gray color and larger font size.Container Styles: Uses a
divwith the classcontainerto create a central content area with rounded corners, a subtle shadow, and a white background.Box Styles: Uses a
divwith the classboxto create colored boxes with rounded corners and margins.
Key Points:
External Stylesheets: For larger projects, it's best to create separate CSS files and link them to your HTML using the
<link>tag.CSS Frameworks: Consider using CSS frameworks like Bootstrap or Tailwind CSS for pre-built styles and components.
CSS Preprocessors: Tools like Sass or Less can make writing CSS more efficient and organized.
