Embedded Files
Introduction:
Introduction:
"From plain text to visually stunning web pages, CSS made it all possible."
"CSS (Cascading Style Sheets) is the language that transforms basic HTML structures into beautiful, responsive, and engaging websites. Learning CSS allowed me to add personality to my web pages and improved my understanding of layout and design principles."
Key Topics Learned
Key Topics Learned
Selectors and Properties:
Targeting elements with class selectors (.class) and ID selectors (#id).
Understanding universal, group, and descendant selectors.
/* Class Selector */
.class {
color: blue;
}
/* ID Selector */
#id {
font-size: 20px;
}
/* Universal Selector */
* {
margin: 0;
}
/* Group Selector */
h1, h2, p {
font-family: Arial, sans-serif;
}
/* Descendant Selector */
div p {
color: gray;
}
Styling Text and Fonts:
Controlling typography with properties like font-family, font-size, line-height, and text-align.
body {
font-family: 'Roboto', sans-serif;
font-size: 16px;
line-height: 1.5;
text-align: center;
}
Colors and Backgrounds:
Applying colors using HEX, RGB, and HSL formats.
Adding backgrounds with background-color, background-image, and gradients.
/* Using HEX */
h1 {
color: #ff5733;
}
/* Using RGB */
p {
background-color: rgb(240, 240, 240);
}
/* Using HSL */
div {
background-color: hsl(200, 50%, 70%);
}
/* Background Image */
section {
background-image: url('background.jpg');
}
/* Gradient */
header {
background: linear-gradient(to right, red, yellow);
}
Box Model:
Mastering padding, borders, and margins to control spacing.
Using box-shadow to add depth.
div {
padding: 20px;
border: 2px solid black;
margin: 10px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
}
Layouts and Positioning:
Structuring pages with flexbox and grid.
Positioning elements with static, relative, absolute, and fixed.
/* Flexbox */
.container {
display: flex;
justify-content: center;
align-items: center;
}
/* Grid */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
/* Positioning */
.box {
position: relative;
top: 10px;
left: 20px;
}
Responsive Design:
Making web pages responsive with media queries.
Using percentages, em, and rem for scalable units.
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
.container {
width: 80%;
margin: auto;
}
h1 {
font-size: 2rem; /* Scalable unit */
}
CSS Animations and Transitions:
Adding hover effects and smooth transitions.
Creating animations with @keyframes.
/* Hover Effect */
button:hover {
background-color: blue;
color: white;
}
/* Smooth Transitions */
div {
transition: all 0.3s ease;
}
/* Keyframe Animation */
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.box {
animation: slideIn 1s ease-in-out;
}
Holiday Package WEBSITE USING HTML AND CSS
Code Snippet
Code Snippet
.caption{
color: rgb(56, 6, 6);
font-size: 20px;
background-color: rgb(211, 246, 246);
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
h1,h2{
text-align: center;
color: brown;
background-color: beige;
}
a:hover{
color: rgb(201, 21, 186);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Holiday Package Travels</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Holiday Package Travels</h1>
<p class="caption">"Enjoy your holidays to the fullest with out travels!!"</p>
<img src="img0.jpg" alt="image of a tourist place" height="200px"><br>
<p class="caption">"Wanna Enjoy comfortably and affordably???"</p>
<img src="img1.jpg" alt="image of a tourist place" height="200px">
<img src="img2.jpg" alt="image of a tourist place" height="200px"> <br> <br>
<div>
<a href="pkg.html">Check out our packages</a>
</div>
</body>
</html>
Page updated
Report abuse