Activity 19: Research CSS
What is CSS?:
- CSS is a language used to style and design web pages. It controls the appearance of HTML elements like colors, fonts, layout, and spacing.
Basic CSS Properties:
1. Text Styling 🌈
Text styling is one of the fundamental ways to enhance content presentation on a webpage. CSS provides numerous properties to modify the appearance of text.
Color: The
colorproperty changes the text color. You can define colors in different formats such as named colors (e.g.,blue,red), HEX (#ff5733), RGB (rgb(255, 0, 0)), or HSL (hsl(360, 100%, 50%)).p { color: #ff5733; /* Changes text color to a shade of orange */ }Font Size: The
font-sizeproperty controls the size of the text. You can set it in various units such as pixels (px), em (em), rem (rem), percentages (%), or even viewport-relative units likevw.h1 { font-size: 2rem; /* 2 times the size of the root element's font size */ }Font Style: You can alter the font style using properties like:
font-family: Defines the typeface (e.g.,Arial,Times New Roman,sans-serif).font-style: Changes the style to normal, italic, or oblique.font-weight: Controls the boldness (e.g.,normal,bold, or numeric values like300,700).text-transform: Capitalizes text (uppercase,lowercase,capitalize).
h2 {
font-family: 'Arial', sans-serif;
font-weight: bold;
font-style: italic;
text-transform: uppercase;
}
2. Box Model 📦
The box model is a crucial concept in CSS, as every element on a webpage is essentially a box. The box model consists of four areas: content, padding, border, and margin.
Content: This is where your text or images appear.
Padding: The space between the content and the border. Padding adds space inside the element but doesn't affect other elements around it.
Border: A line or frame around the padding and content. It can have different widths, styles (solid, dashed, dotted), and colors.
Margin: The space between the element and its neighboring elements. Margins add space outside the element.
Example:
.box {
margin: 20px; /* Adds space outside the box */
padding: 10px; /* Adds space inside the box */
border: 2px solid black; /* A solid black border */
}
The total width of an element is calculated as: Total width = margin + border + padding + content width
3. Backgrounds 🖼️
Backgrounds are vital for improving the visual attractiveness of your website. CSS allows you to set background colors and pictures for elements.
Background Color: The
background-colorproperty is used to set a solid background color for an element.body { background-color: #e6f7ff; /* Light blue background */ }Background Image: background-image allows you to add an image as a background. Additional properties for altering the appearance include background-size (cover, contain), background-repeat (no-repeat), and background-position (center, top).
.hero { background-image: url('path/to/image.jpg'); background-size: cover; /* Ensures the image covers the entire element */ background-position: center; /* Centers the image */ }
4. Layouts 🧩
CSS layouts require regulating the structure and arrangement of items on a page. There are various options for accomplishing this, including display, position, and the flexbox model.
Display: The
displayproperty determines how an element is displayed on the page. Common values include:block: The element takes up the full width available (like<div>,<p>).inline: The element takes up only as much width as needed (like<span>,<a>).inline-block: A hybrid, where the element behaves like inline but accepts dimensions like a block.none: Hides the element.
Position: The
positionattribute specifies an element's placement method. Its values are:static: Default positioning, where elements follow the normal document flow.relative: Positioned relative to its normal position.absolute: Positioned relative to its nearest positioned ancestor (not the document flow).fixed: Stays in place even when scrolling.sticky: Switches between relative and fixed, depending on the scroll position.
.header {
position: fixed;
top: 0;
width: 100%;
}
Flexbox: The flexbox layout paradigm is an effective method for creating responsive layouts with minimal effort. It enables elements within a container to be aligned and dispersed in several directions, even if their size is unknown or dynamic.
The key properties are:
display: flex;turns the container into a flex container.justify-content: Aligns items horizontally (center, space-between, etc.).align-items: Aligns items vertically.flex-direction: Defines the main axis as row or column.
Example:
.container {
display: flex;
justify-content: center; /* Centers items horizontally */
align-items: center; /* Centers items vertically */
}
Code Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="styles.css" />
<style>
/* Font demo */
.font {
font-family: 'Courier New', Courier, monospace; /* Font family to Courier New */
font-size: 1.5rem; /* Font size to 1.5rem */
font-weight: bold; /* Font weight to bold */
font-style: italic; /* Font style to italic */
text-transform: uppercase; /* Text transform to uppercase */
}
/* Position demo */
.position-demo {
position: relative;
width: 500px;
height: 500px;
background-color: #000000;
}
.box-1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 100px;
left: 100px;
}
.box-2 {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<div class="box-model"></div>
<div class="flex">
<h1>Lorem ipsum dolor sit amet.</h1>
<h1>Qui eius cupiditate atque omnis?</h1>
<h1>Nobis quos incidunt cupiditate vel?</h1>
</div>
<div class="divider"></div>
<div class="flex-col">
<h1>Lorem ipsum dolor sit amet.</h1>
<h1>Qui eius cupiditate atque omnis?</h1>
<h1>Nobis quos incidunt cupiditate vel?</h1>
</div>
<h1 class="font">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur
nesciunt praesentium, consequuntur modi nisi aut nemo atque porro,
exercitationem consectetur omnis beatae culpa esse deleniti?
</h1>
<div class="position-demo">
<div class="box-1"></div>
<div class="box-2"></div>
</div>
</body>
</html>
External Stylesheet:
h1 {
font-weight: 700; /* Make the text bold */
}
.box-model {
background-color: #f0f0f0; /* Set the background color */
width: 200px; /* Set the width of the element */
height: 200px; /* Set the height of the element */
border: 1px solid #000; /* Add a border around the element */
padding: 10px; /* Add padding inside the element */
margin: 10px; /* Add margin outside the element */
}
.divider {
border-top: 1px solid #000; /* Add a top border to the element */
margin-top: 20px; /* Add margin to the top of the element */
height: 40px; /* Set the height of the element */
width: 100%; /* Set the width of the element */
}
.flex {
display: flex; /* Use flexbox layout */
justify-content: space-between; /* Distribute the items evenly */
align-items: center; /* Center the items vertically */
gap: 10px; /* Add space between the items */
}
.flex-col {
display: flex; /* Use flexbox layout */
flex-direction: column; /* Arrange the items vertically */
justify-content: center; /* Center the items horizontally */
align-items: center; /* Center the items vertically */
gap: 10px; /* Add space between the items */
}