1. Create an HTML file and link an external CSS file to it.
HTML:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<!-- Link to the external CSS file -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to Styling with CSS</h1>
<p>This file is linked to an external stylesheet.</p>
</body>
</html>
Explanation:The <link> tag is used to connect an external CSS file (styles.css) to this HTML document.
2. CSS to change the background color of the page to lightblue.
CSS (styles.css):
css
/* Change background color of the page */
body {
background-color: lightblue;
}
Explanation:
The body selector targets the entire page content.
The background-color property is set to lightblue to apply the color to the background.
3. CSS rule to make all <h1> elements have a font size of 36px.
CSS (styles.css):
css
/* Set font size for all h1 elements */
h1 {
font-size: 36px;
}
Explanation:
The h1 selector applies the styling to all <h1> elements in the HTML.
The font-size property changes the size of the text to 36px.
4. Style a paragraph using inline CSS to make the text bold.
HTML:
html
<p style="font-weight: bold;">This paragraph has bold text using inline CSS.</p>
Explanation:
The style attribute is used to add inline CSS directly to an HTML element.
font-weight: bold; makes the paragraph text bold.
5. Use an internal <style> tag to center-align all text on the page.
HTML:
html
<head>
<style>
/* Center-align all text on the page */
body {
text-align: center;
}
</style>
</head>
<body>
<h1>Center-aligned Text</h1>
<p>All text on this page is center-aligned using internal CSS.</p>
</body>
Explanation:
The <style> tag inside the <head> contains CSS rules applied to the HTML document.
text-align: center; aligns all text in the <body> to the center.
6. CSS rule to make all links (<a>) have a red color.
CSS (styles.css):
css
/* Style all links to have red color */
a {
color: red;
text-decoration: none; /* Optional: Removes underline from links */
}
Explanation:
The a selector targets all anchor (<a>) elements.
color: red; changes the text color to red.
text-decoration: none; removes the default underline.
7. Use a universal selector to set a default margin and padding of 0 for all elements.
CSS (styles.css):
css
/* Universal selector to reset margin and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* Ensures consistent box model across elements */
}
Explanation:
The * (universal selector) applies the styles to all elements.
margin and padding are reset to 0 to remove browser defaults.
box-sizing: border-box; ensures padding and border are included in the element's width and height.
8. Add a hover effect to a button to change its background color.
CSS (styles.css):
css
/* Change button background color on hover */
button:hover {
background-color: darkblue; /* Background changes to dark blue */
color: white; /* Text changes to white */
}
Explanation:
The button:hover selector applies styles when a user hovers over a button.
background-color and color provide a visual effect.
9. CSS rule to change the cursor to a pointer when hovering over a button.
CSS (styles.css):
css
/* Change cursor to pointer on button hover */
button {
cursor: pointer;
}
Explanation:
The cursor: pointer; changes the cursor to a hand icon when hovering over buttons, indicating interactivity.
10. CSS rule that applies only to a specific element with id="special".
HTML:
html
<p id="special">This is a special paragraph styled with a unique ID.</p>
CSS (styles.css):
css
/* Style for the element with id "special" */
#special {
font-style: italic; /* Italicizes the text */
color: green; /* Changes text color to green */
font-size: 18px; /* Sets font size to 18px */
}
Explanation:
The #special selector targets only the element with id="special".
Custom styles are applied, such as font-style, color, and font-size.
1. Use a class selector to change the text color of all elements with the class highlight.
HTML:
html
<p class="highlight">This text is highlighted.</p>
<p class="highlight">Another highlighted paragraph.</p>
CSS:
css
/* Style all elements with the class 'highlight' */
.highlight {
color: blue; /* Sets text color to blue */
}
2. Set a specific font family (e.g., Arial) for all text on the page.
CSS:
css
/* Set the font family for the entire page */
body {
font-family: Arial, sans-serif; /* Applies Arial font to all text */
}
3. Create a rule that targets all <li> elements inside an <ol> tag.
CSS:
css
/* Target <li> elements inside <ol> */
ol li {
color: green; /* Sets text color to green */
}
4. Apply different styles to all <p> tags that are direct children of a <div>.
CSS:
css
/* Target direct child <p> elements of a <div> */
div > p {
font-size: 18px; /* Increases font size */
font-weight: bold; /* Makes text bold */
}
5. Write CSS to make an image 50% opaque.
CSS:
css
/* Set image opacity to 50% */
img {
opacity: 0.5; /* Makes image semi-transparent */
}
6. Change the visibility of an element to hidden.
CSS:
css
/* Hide an element */
.hidden-element {
visibility: hidden; /* Makes the element invisible but still takes up space */
}
7. Set a default border of 2px solid black for all <table> elements.
CSS:
css
/* Add a border to all tables */
table {
border: 2px solid black; /* Sets a solid black border */
border-collapse: collapse; /* Ensures borders don’t double */
}
8. Use the !important rule to override an existing CSS rule.
CSS:
css
/* Override any conflicting color rule with !important */
p {
color: red !important; /* Forces red text, overriding other rules */
}
9. Write CSS to make an element scrollable using the overflow property.
CSS:
css
/* Make an element scrollable */
.scrollable-div {
width: 200px;
height: 100px;
overflow: auto; /* Adds scrollbars when content overflows */
}
10. Apply a different color to every odd-numbered row of a table.
CSS:
css
/* Style odd rows of a table */
tr:nth-child(odd) {
background-color: lightgray; /* Sets background to light gray */
}
11. Set the background color of the page to a gradient using RGB values.
CSS:
css
/* Gradient background using RGB values */
body {
background: linear-gradient(rgb(0, 128, 255), rgb(0, 255, 128));
}
12. Change the text color of an <h1> to #ff5733.
CSS:
css
/* Set color for h1 element */
h1 {
color: #ff5733; /* Bright orange */
}
13. Use HSL to set the background color of a <div> to a light shade of green.
CSS:
css
/* Background color using HSL */
div {
background-color: hsl(120, 60%, 80%); /* Light green */
}
14. Create a button with a hover effect that darkens its background.
CSS:
css
/* Darken button background on hover */
button:hover {
background-color: darkgray; /* Changes background to dark gray */
}
15. Set the opacity of a <div> to 0.8.
CSS:
/* Semi-transparent div */
div {
opacity: 0.8; /* 80% opaque */
}
16. Use vw units to make the width of a <div> 50% of the viewport width.
CSS:
/* Set div width using viewport width */
div {
width: 50vw; /* 50% of viewport width */
}
17. Set the font size of a paragraph to 1.5em relative to its parent element.
CSS:
/* Set relative font size */
p {
font-size: 1.5em; /* 1.5 times the parent’s font size */
}
18. Write CSS to make an image fill 80% of the viewport height.
CSS:
/* Set image height to viewport */
img {
height: 80vh; /* 80% of viewport height */
}
19. Use rem units to set the margin of an element to 2 times the root font size.
CSS:
/* Set margin using rem */
div {
margin: 2rem; /* 2 times the root font size */
}
20. Apply a semi-transparent background to a <div> using RGBA.
CSS:
/* Semi-transparent background */
div {
background-color: rgba(0, 0, 255, 0.5); /* Blue with 50% opacity */
}
21. Use percentage values to set the height of a <div> to 50% of its parent.
CSS:
/* Set div height as percentage of parent */
div {
height: 50%; /* 50% of parent’s height */
}
22. Create a shadow effect on a box with a light blue color.
CSS:
/* Light blue shadow */
div {
box-shadow: 5px 5px 15px lightblue; /* Adds a shadow */
}
23. Set the background color of alternating sections of a webpage.
CSS:
/* Alternate section backgrounds */
section:nth-child(odd) {
background-color: lightgray;
}
section:nth-child(even) {
background-color: white;
}
24. Write CSS to create a gradient that transitions from blue to green.
CSS:
/* Gradient background from blue to green */
div {
background: linear-gradient(blue, green);
}
25. Set a linear gradient as the background of a button.
CSS:
css
/* Gradient background on button */
button {
background: linear-gradient(to right, red, yellow);
}
26. Use inherit to set the color of a child element to match its parent.
CSS:
/* Inherit color from parent */
.child {
color: inherit; /* Matches parent color */
}
27. Create a border with a dashed pattern and a custom color.
CSS
/* Dashed border */
div {
border: 2px dashed purple;
}
28. Experiment with various units (px, %, em, rem) for padding on an element.
CSS:
/* Use multiple units for padding */
div {
padding: 10px 5% 2em 1rem; /* Top, right, bottom, left padding */
}
29. Write CSS to create a circular element with a solid background color.
CSS:
/* Circular element */
div {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%; /* Makes the element circular */
}
30. Create a semi-transparent text effect using opacity and color.
CSS:
/* Semi-transparent text */
p {
color: rgba(0, 0, 0, 0.5); /* Black text with 50% transparency */
}
. Set the font family of a paragraph to "Times New Roman".
HTML:
html
<p class="times-font">This paragraph uses "Times New Roman" font.</p>
CSS:
.times-font {
font-family: "Times New Roman", Times, serif; /* Sets the font family */
}
2. Adjust the font size of an <h1> to 48px.
CSS:
h1 {
font-size: 48px; /* Sets font size to 48px */
}
3. Use a web font from Google Fonts to style all <h2> elements.
HTML:
html
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"> <!-- Google Font -->
<h2>Styled using Google Fonts</h2>
CSS:
h2 {
font-family: "Lobster", cursive; /* Applies the Lobster font to h2 elements */
}
4. Set the letter spacing of a <p> to 2px.
CSS:
p {
letter-spacing: 2px; /* Adds spacing between characters */
}
5. Add a shadow effect to text in an <h3> tag.
CSS:
h3 {
text-shadow: 2px 2px 4px gray; /* Adds a shadow effect */
}
6. Align the text in a <div> to the center.
CSS:
div {
text-align: center; /* Centers text inside the div */
}
7. Make the first letter of a paragraph larger using font-size and ::first-letter.
CSS:
p::first-letter {
font-size: 2em; /* Doubles the font size of the first letter */
font-weight: bold; /* Makes the first letter bold */
}
8. Set the line height of a paragraph to 1.8 for better readability.
CSS:
p {
line-height: 1.8; /* Increases line height for readability */
}
9. Make the text italicized in a specific <div> using CSS.
CSS:
css
.italic-text {
font-style: italic; /* Makes text italic */
}
10. Create an underline effect only when hovering over a link.
CSS:
css
a:hover {
text-decoration: underline; /* Adds underline effect on hover */
}
11. Write CSS to make all text bold in the footer of a webpage.
CSS:
css
footer {
font-weight: bold; /* Makes all text bold in the footer */
}
12. Create a heading with uppercase letters using the text-transform property.
CSS:
css
h1 {
text-transform: uppercase; /* Converts text to uppercase */
}
13. Use text-decoration to remove the underline from links.
CSS:
css
a {
text-decoration: none; /* Removes underline from links */
}
14. Set the color of visited links to a different shade.
CSS:
css
a:visited {
color: purple; /* Sets color for visited links */
}
15. Write CSS to truncate long text in a paragraph with ellipsis.
CSS:
css
.truncate {
white-space: nowrap; /* Prevents text from wrapping */
overflow: hidden; /* Hides overflow text */
text-overflow: ellipsis; /* Adds ellipsis to truncated text */
}
16. Add a gradient background to text in an <h2> element.
CSS:
css
h2 {
background: linear-gradient(to right, blue, green); /* Gradient background */
-webkit-background-clip: text; /* Clips gradient to text */
color: transparent; /* Makes the text transparent */
}
17. Set a maximum width for text and center it on the page.
CSS:
css
.text-container {
max-width: 600px; /* Sets maximum width */
margin: 0 auto; /* Centers the text horizontally */
text-align: center; /* Aligns the text */
}
18. Create a button with bold and uppercase text.
CSS:
css
button {
font-weight: bold; /* Makes text bold */
text-transform: uppercase; /* Converts text to uppercase */
}
19. Style a list to have different font sizes for each item.
CSS:
css
li:nth-child(1) {
font-size: 20px;
}
li:nth-child(2) {
font-size: 18px;
}
li:nth-child(3) {
font-size: 16px;
}
20. Add a hover effect that increases text size slightly.
CSS:
css
h1:hover, p:hover {
font-size: 105%; /* Increases text size slightly */
transition: font-size 0.3s ease; /* Smooth transition effect */
}
1. Create a <div> with 20px padding and a 10px margin.
HTML:
html
<div class="box">Content inside the box</div>
CSS:
css
.box {
padding: 20px; /* Adds space inside the box */
margin: 10px; /* Adds space outside the box */
background-color: lightgray; /* For visualization */
}
2. Set a border radius of 50% to make a square <div> circular.
HTML:
html
<div class="circle"></div>
CSS:
css
.circle {
width: 100px; /* Set width */
height: 100px; /* Set height */
border-radius: 50%; /* Makes the div circular */
background-color: blue; /* For visualization */
}
3. Create a button with a shadow effect and a 5px solid border.
HTML:
html
<button class="shadow-button">Click Me</button>
CSS:
css
.shadow-button {
border: 5px solid black; /* Adds a solid border */
box-shadow: 5px 5px 10px gray; /* Adds a shadow effect */
padding: 10px 20px; /* Adds padding inside the button */
background-color: lightblue; /* Button color */
}
4. Write CSS to add 10px padding only to the top of a <div>.
CSS:
css
div {
padding-top: 10px; /* Adds padding only at the top */
}
5. Adjust the margin of a <div> so it’s centered horizontally on the page.
CSS:
css
.centered-div {
width: 50%; /* Set a specific width */
margin: 0 auto; /* Centers the div horizontally */
}
6. Set the width of an element to 80% and a max-width of 600px.
CSS:
css
.responsive-box {
width: 80%; /* Width is 80% of the container */
max-width: 600px; /* Ensures it doesn't exceed 600px */
}
7. Experiment with box-sizing: border-box to include borders in width calculations.
CSS:
css
div {
box-sizing: border-box; /* Includes padding and borders in width/height */
width: 300px; /* Total width includes borders and padding */
border: 10px solid black; /* Border is included in the width */
padding: 20px; /* Padding is also included */
}
8. Add a double border style to a <div>.
CSS:
css
.double-border {
border: 5px double red; /* Double border style */
}
9. Create a card layout with padding and a shadow effect.
HTML:
html
<div class="card">This is a card.</div>
CSS:
css
.card {
padding: 20px; /* Adds padding inside the card */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds shadow */
background-color: white; /* Card background */
border-radius: 5px; /* Adds rounded corners */
}
10. Write CSS to make the height of an element dynamic based on content.
CSS:
css
.dynamic-height {
height: auto; /* Height adjusts dynamically based on content */
}
11. Create a container with equal padding on all sides.
CSS:
css
.container {
padding: 20px; /* Equal padding on all sides */
background-color: lightblue; /* For visualization */
}
12. Set the margin of an element to auto and center it on the page.
CSS:
css
.auto-center {
width: 50%; /* Set width */
margin: auto; /* Centers horizontally and vertically */
text-align: center; /* Centers text */
}
13. Use outline to highlight an element without affecting its size.
CSS:
css
.outline-box {
outline: 3px solid orange; /* Adds an outline */
}
14. Create a bordered box with different colors for each side.
CSS:
css
.border-box {
border-top: 5px solid red;
border-right: 5px solid blue;
border-bottom: 5px solid green;
border-left: 5px solid yellow;
}
15. Adjust the vertical spacing between two <div> elements using margin.
CSS:
css
.div-spacing {
margin-bottom: 20px; /* Adds space below each div */
}
16. Use overflow: auto to add scrollbars to a large content area.
CSS:
css
.scroll-box {
width: 300px;
height: 150px;
overflow: auto; /* Adds scrollbars if content overflows */
border: 1px solid black; /* For visualization */
}
17. Set a minimum height for a <div> so it doesn’t shrink below a certain size.
CSS:
css
.min-height {
min-height: 100px; /* Sets a minimum height */
background-color: lightgreen; /* For visualization */
}
18. Write CSS to add a shadow inside a box.
CSS:
css
.inner-shadow {
box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds inner shadow */
}
19. Create a responsive box that resizes proportionally to the screen width.
CSS:
css
.responsive-box {
width: 50vw; /* Width is 50% of the viewport */
height: 50vh; /* Height is 50% of the viewport */
background-color: lightcoral; /* For visualization */
}
20. Experiment with combining padding and margin for nested elements.
CSS:
css
.outer-box {
padding: 20px; /* Adds padding inside the outer box */
background-color: lightgray; /* For visualization */
}
.inner-box {
margin: 10px; /* Adds margin inside the outer box */
padding: 10px; /* Adds padding inside the inner box */
background-color: white; /* For visualization */
}
HTML:
html
<div class="outer-box">
<div class="inner-box">Nested element</div>
</div>