Scribd
Carica
21 visualizzazioni18 pagine

Day-5 (CSS)

This book is about styling books

Caricato da

thandarkyaw
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
21 visualizzazioni18 pagine

Day-5 (CSS)

This book is about styling books

Caricato da

thandarkyaw
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 18

CSS

1. Create a simple personal profile page using element and class selectors.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Personal Profile</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<h1>Jane Doe</h1>

</header>

<section class="profile">

<h2>About Me</h2>

<p>Hello! I'm Jane, a web developer based in New York.</p>

</section>

<section class="contact">

<h2>Contact Information</h2>

<p>Email: [email protected]</p>

</section>

</body>

</html>

CSS

1
/* Element selector */

h1 {

font-size: 2em;

color: darkblue;

/* Class selector */

.profile {

background-color: lightgrey;

padding: 20px;

.contact {

background-color: lightyellow;

padding: 20px;

2. Create a basic navigation bar using ID and class selectors.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Basic Navigation Bar</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<nav id="main-nav">

2
<ul class="nav-list">

<li class="nav-item"><a href="#home">Home</a></li>

<li class="nav-item"><a href="#about">About</a></li>

<li class="nav-item"><a href="#services">Services</a></li>

<li class="nav-item"><a href="#contact">Contact</a></li>

</ul>

</nav>

</body>

</html>

CSS

/* ID selector */

#main-nav {

background-color: #333;

padding: 10px;

/* Class selectors */

.nav-list {

list-style-type: none;

margin: 0;

padding: 0;

display: flex;

justify-content: space-around;

.nav-item a {

color: white;

text-decoration: none;

3
padding: 10px 20px;

.nav-item a:hover {

background-color: #575757;

3. Create a simple blog post layout using element, class, ID, and compound selectors.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Simple Blog Post</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<article id="blog-post">

<header>

<h1 class="post-title">My First Blog Post</h1>

<p class="post-date">Published on June 15, 2024</p>

</header>

<section class="post-content">

<p>Welcome to my first blog post. I'm excited to share my journey in web development with
you.</p>

</section>

<footer class="post-footer">

<p>Author: Jane Doe</p>

</footer>

4
</article>

</body>

</html>

CSS

/* Element selector */

p{

font-size: 1em;

line-height: 1.5;

/* ID selector */

#blog-post {

max-width: 600px;

margin: auto;

padding: 20px;

border: 1px solid #ccc;

/* Class selectors */

.post-title {

font-size: 2em;

color: #333;

.post-date {

color: grey;

5
.post-content {

margin-top: 20px;

.post-footer {

margin-top: 30px;

font-style: italic;

/* Compound selectors */

.post-title, .post-date {

text-align: center;

4. Create a product card layout using all types of selectors.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Product Card</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="product-card" id="product-1">

<img src="product.jpg" alt="Product Image" class="product-image">

<h2 class="product-title">Product Name</h2>

<p class="product-description">This is a great product that you will love!</p>

6
<button class="buy-button">Buy Now</button>

</div>

</body>

</html>

CSS

/* Element selector */

button {

cursor: pointer;

/* ID selector */

#product-1 {

border: 1px solid #ddd;

padding: 20px;

max-width: 300px;

margin: auto;

/* Class selectors */

.product-card {

text-align: center;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

.product-image {

max-width: 100%;

height: auto;

7
}

.product-title {

font-size: 1.5em;

margin: 10px 0;

.product-description {

color: #666;

font-size: 1em;

.buy-button {

background-color: green;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

/* Compound selectors */

.product-card:hover .buy-button {

background-color: darkgreen;

Key Differences between class and ID

1. Uniqueness:
o Class: Can be applied to multiple elements.
o ID: Should be unique and applied to a single element.
2. Specificity:

8
oClass: Lower specificity, allowing it to be overridden by more specific selectors
like IDs or inline styles.
o ID: Higher specificity, making it more difficult to override.
3. Use Cases:
o Class: Ideal for applying common styles to multiple elements (e.g., styling
multiple buttons with the same appearance).
o ID: Ideal for targeting a specific element that requires unique styling (e.g., a
unique header or main content section).

5. HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Class and ID Selectors</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="box" id="special-box">Special Box</div>

<div class="box">Regular Box</div>

</body>

</html>

CSS

/* styles.css */

.box {

width: 100px;

9
height: 100px;

background-color: lightblue;

#special-box {

background-color: lightcoral;

Box model: Margin, border, padding, and content.


Padding Properties:

1. padding: This is a shorthand property for setting all four paddings (top, right, bottom,
left) in one declaration.
2. padding-top: Sets the padding on the top of an element.
3. padding-right: Sets the padding on the right side of an element.
4. padding-bottom: Sets the padding on the bottom of an element.
5. padding-left: Sets the padding on the left side of an element.

Example Using padding shorthand property

.box {

padding: 10px; /* Applies 10px padding to all four sides */

.box2 {

padding: 10px 20px; /* Applies 10px padding to top and bottom, 20px to left and right */

10
.box3 {

padding: 10px 20px 30px; /* Applies 10px to top, 20px to left and right, 30px to bottom */

.box4 {

padding: 10px 20px 30px 40px; /* Applies 10px to top, 20px to right, 30px to bottom, 40px to
left */

Margin Properties:

1. margin: This is a shorthand property for setting all four margins (top, right, bottom, left)
in one declaration.
2. margin-top: Sets the margin on the top of an element.
3. margin-right: Sets the margin on the right side of an element.
4. margin-bottom: Sets the margin on the bottom of an element.
5. margin-left: Sets the margin on the left side of an element.

Example: Using margin shorthand property

.box1 {

margin: 10px; /* Applies 10px margin to all four sides */

.box2 {

margin: 10px 20px; /* Applies 10px margin to top and bottom, 20px to left and right */

11
.box3 {

margin: 10px 20px 30px; /* Applies 10px to top, 20px to left and right, 30px to bottom */

.box4 {

margin: 10px 20px 30px 40px; /* Applies 10px to top, 20px to right, 30px to bottom, 40px to
left */

1. HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Box Model Example</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="box">

Content

</div>

</body>

</html>

CSS

body {

display: flex;

12
justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

background-color: #f0f0f0;

.box {

width: 200px;

height: 100px;

padding: 20px;

border: 5px solid #000;

margin: 30px;

background-color: #ffeb3b;

2. Multiple boxes with difference box model

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Box Model Comparison</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="box1">Box 1</div>

<div class="box2">Box 2</div>

13
<div class="box3">Box 3</div>

</body>

</html>

CSS

body {

display: flex;

justify-content: space-around;

align-items: center;

height: 100vh;

margin: 0;

background-color: #e0f7fa;

.box1, .box2, .box3 {

width: 150px;

height: 75px;

padding: 15px;

border: 5px solid #00796b;

background-color: #4db6ac;

.box1 {

margin: 10px;

.box2 {

margin: 20px;

14
.box3 {

margin: 30px;

3. Nested Boxes

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Nested Boxes</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="outer-box">

Outer Box

<div class="inner-box">

Inner Box

</div>

</div>

</body>

</html>

CSS

body {

display: flex;

justify-content: center;

15
align-items: center;

height: 100vh;

margin: 0;

background-color: #e1bee7;

.outer-box {

width: 300px;

height: 200px;

padding: 20px;

border: 10px solid #6a1b9a;

background-color: #ba68c8;

margin: 30px;

position: relative;

.inner-box {

width: 100px;

height: 50px;

padding: 10px;

border: 5px solid #4a148c;

background-color: #8e24aa;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

4. Creating a card layout

16
HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Card Layout</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="card">

<h2>Card Title</h2>

<p>This is some text inside the card. It demonstrates padding, borders, and margins.</p>

</div>

</body>

</html>

CSS

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

background-color: #fff8e1;

.card {

width: 300px;

17
padding: 20px;

border: 2px solid #ff6f00;

border-radius: 10px;

background-color: #fff3e0;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

margin: 20px;

.card h2 {

margin-top: 0;

.card p {

margin-bottom: 0;

18

Potrebbero piacerti anche