Activity 19: Research CSS
Instructions:
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:
Text Styling: Learn how to change text color, font size, and font style.
Box Model: Understand how to use margins, padding, borders, and content.
Backgrounds: Apply background colors or images to elements.
Layouts: Use display, position, and flexbox to create layouts.
etc
CODE SNIPPETS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic CSS Properties</title>
<style>
/* Text Styling */
body {
font-family: Arial, sans-serif;
background: linear-gradient(to bottom, #ffffff 0%, #000066 100%);
}
h1 {
color: blue;
font-size: 3.5em;
font-style: italic;
text-align: center;
}
h2 {
font-size: 2em;
text-align: center;
}
p {
color: #333;
font-size: 1em;
font-weight: bold;
}
/* with Box Model */
.item .content{
margin-top: 450px;
padding: 10px;
border: 2px solid black;
background-color: #f0f0f0;
opacity: 0.8;
border-radius: 20px;
}
/* Layouts */
.container {
display: flex;
justify-content: space-around;
align-items: center;
height: 700px;
}
.item {
width:550px;
height:600px;
border-radius: 20px;
background-color: coral;
background-size: cover;
}
.item .name{
font: normal 36px 'Cookie', cursive;
background-color: lightblue;
font-size: 30px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<!-- Body here-->
<body>
<h1>Anyme</h1>
<h2>This is a Anyme demonstrating basic CSS properties.</h2>
<div class="container">
<div class="item" style="background-image: url(http://localhost/polder/ey/peytur/fairytail.jpg);">
<div class="content">
<div class="name">FairyTail</div>
<p>Written by : Hiro Mashima</p>
<p>August 2, 2006 – July 26, 2017</p>
</div>
</div>
<div class="item" style="background-image: url(http://localhost/polder/ey/peytur/onepiece.jpg);">
<div class="content">
<div class="name">OnePiece</div>
<p>Written by : Eiichiro Oda</p>
<p>July 22, 1997 – present</p>
</div>
</div>
<div class="item" style="background-image: url(http://localhost/polder/ey/peytur/spyxfamily.jpg);">
<div class="content">
<div class="name">Spy x Family</div>
<p>Written by : Tatsuya Endo</p>
<p>March 25, 2019 – present</p>
</div>
</div>
</div>
</body>
</html>
OUTPUT
