Activity 19: Research CSS
What is CSS?
CSS (Cascading Style Sheets) is a language used to style and design web pages. It allows you to control the appearance of HTML elements, defining how they look in terms of color, fonts, layout, spacing, and more. CSS can be applied internally (within the same HTML document) or externally (through a separate CSS file).
Basic CSS Properties:
Text Styling:
color: Changes the color of the text.
font-size: Defines the size of the text.
font-family: Specifies the font style.
cssCopy codep {
color: blue;
font-size: 16px;
font-family: Arial, sans-serif;
}
Box Model: The box model is a layout structure that includes margins, borders, padding, and the actual content.
margin: Space outside the border.
padding: Space inside the border.
border: Defines the border around an element.
cssCopy codediv {
margin: 20px;
padding: 10px;
border: 2px solid black;
}
Backgrounds:
background-color: Sets the background color of an element.
background-image: Adds an image as the background.
cssCopy codebody {
background-color: lightgrey;
}
div {
background-image: url('background.jpg');
background-size: cover;
}
Layouts: Use layout properties to arrange elements:
display: Defines how an element is displayed (block, inline, or flex).
position: Specifies the position of an element (static, relative, absolute, or fixed).
flexbox: A layout model that helps in aligning elements.
/* External CSS file for styling */
body {
background-color: #f9f9f9; /* Light background color */
font-family: Arial, sans-serif; /* Font for the document */
margin: 0;
padding: 0;
}
h1 {
color: #2c3e50; /* Dark blue color for main heading */
text-align: center; /* Centered text */
margin: 20px 0; /* Margin above and below the heading */
}
h2 {
color: #34495e; /* Slightly lighter blue for subheadings */
}
p {
color: #555; /* Grey color for paragraphs */
font-size: 16px; /* Font size for paragraph text */
line-height: 1.5; /* Spacing between lines */
}
.box {
background-color: #ffffff; /* White background for boxes */
border: 1px solid #ddd; /* Light grey border */
border-radius: 8px; /* Rounded corners */
margin: 20px auto; /* Centering the boxes with margin */
padding: 20px; /* Padding inside the boxes */
width: 80%; /* Width of the boxes */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}
ul {
list-style-type: square; /* Square bullets for list items */
}
footer {
text-align: center; /* Centered text */
padding: 10px; /* Padding around footer */
background-color: #2c3e50; /* Dark background for footer */
color: white; /* White text color */
position: relative; /* Positioning for footer */
bottom: 0; /* Aligns footer at the bottom */
width: 100%; /* Full width for footer */
}
Practice: Writing a Simple HTML Document with Basic CSS
HTML Document:
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Activity 19</title>
<link rel="stylesheet" href="style.css"> <!-- Link to external CSS stylesheet -->
</head>
<body>
<h1>Welcome to Simple Web Page !</h1>
<div class="box">
<p>This is a basic illustration of how to utilize CSS for styling HTML elements. You can modify colors, fonts, layouts, and spacing to improve the appearance of your web pages."</p>
</div>
<div class="box">
<h2>Fundamental CSS Properties
</h2>
<ul>
<li>CSS (Cascading Style Sheets) is essential for enhancing the visual presentation of web pages. It provides various properties that allow developers to control the look and feel of their content.</li>
</ul>
</div>
<footer>
© 2024 Simple Web Page | All Rights Reserved
</footer>
</body>
</html>
Explanation:
Internal CSS: Styles are defined within the
<style>tag inside the<head>section of the HTML document.Background Color: The page background is set to a light grey color (
#f0f0f0).Text Styling: The text color of the paragraph (
<p>) is set to a lighter grey (#555) and the font size is18px.Box Model: The
.boxclass defines the box's margin, padding, border, and background color.
Sample Output
Breakdown of the HTML Structure:
Document Declaration:
<!DOCTYPE html>indicates that this is an HTML5 document.HTML Element:
<html lang="en">starts the HTML document and specifies the language as English.Head Section:
<head>contains metadata and links to external resources.<meta charset="UTF-8">specifies the character encoding for the document, ensuring proper display of text.<meta name="viewport" content="width=device-width, initial-scale=1.0">sets the viewport to ensure the page is responsive on different devices.<title>Activity 19</title>defines the title of the web page that appears in the browser tab.<link rel="stylesheet" href="style.css">links to an external CSS file for styling the web page.
Body Section:
<body>contains the content of the web page.<h1>defines the main heading of the page.Two
<div class="box">elements act as containers for content with the classbox, allowing for consistent styling.The first
<div>contains a<p>element that describes the purpose of the page.The second
<div>has an<h2>subheading and an unordered list<ul>with one list item<li>, providing additional information about CSS.
<footer>includes copyright information, centered and styled with a distinct background.
Breakdown of the CSS Styles:
Body:
Sets a light grey background color and applies the Arial font.
Removes default margin and padding.
Headings:
h1: Styled with a dark blue color, centered text, and margin for spacing above and below.h2: Given a slightly lighter blue color for differentiation.
Paragraphs:
p: Sets a grey color, specific font size, and line height for better readability.
Boxes:
.box: A white background with a light grey border and rounded corners. Centered with automatic margins, padded for inner spacing, and a width of 80% of the viewport. A subtle shadow adds depth.
Lists:
ul: Changes the bullet style of the list to squares.
Footer:
- Styled to have centered text, padding for spacing, a dark background, and white text color. Positioned at the bottom of the page and spans the full width.