In this assignment, you will practice the concepts covered in the CSS Layout lecture. You will be creating and modifying an HTML page and applying CSS styles to achieve specific layout goals.
- Create an HTML file with the following structure:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
</div>
</body>
</html>- Create an external CSS file (styles.css) and apply the following styles:
- Set the default display of the
.boxelements toinline-block. - Add a border to the
.boxelements with a width of 2px, a solid black color, and a margin of 10px. - Set the height and width of the
.boxelements to 100px. - Set the font-size of the
.boxelements to 18px. - Add some padding to the
.boxelements.
- Open the HTML file in a web browser and observe how the boxes are displayed in multiple rows. Ensure that the elements are inline-block and have the specified dimensions and spacing.
- Modify the styles in your CSS file to include the following:
- Apply
box-sizing: border-boxto all elements (*) on the page.
- Test this change by adjusting the padding and border of one of the
.boxelements using the browser's inspector. Observe how the element's content adjusts dynamically without affecting the layout.
-
Add a container
<div>with the class.containeraround the.boxelements in your HTML. -
Update your CSS file to include the following styles:
- Set the font-size of the
.containerto 0. - Set the font-size of the
.boxelements inside the container to 18px (or any desired size).
- Observe how the extra space between the
.boxelements is removed, and the boxes are now neatly aligned.
- Add the following HTML code after the
.containerdiv:
<div class="clear-box">
<div class="float-box">Floating Box</div>
<div class="text">This is some text that should not overlap the floating box.</div>
</div>- In your CSS file, add styles to achieve the following:
- Float the
.float-boxto the left. - Apply a
clearproperty to the.textclass to clear the float on the left side.
- Test the styles by viewing the HTML in your browser. Make sure that the text does not overlap the floating box.
-
Create a new section in your HTML with a container div and several boxes inside, similar to the previous tasks.
-
Set a fixed height for the container, such as 300px, and ensure that there are more boxes than can fit within the container.
-
In your CSS file, apply the
overflow: hiddenproperty to the container. -
Observe how the overflowing content becomes hidden. You can also experiment with
overflow: scrollandoverflow: autoto see the differences in behavior.
-
Create a new HTML file and add some hyperlinks (
<a>) and input elements (<input>) to it. -
In your CSS file, apply styles to the following pseudo-classes:
:link: Set the color of unvisited links to green.:visited: Set the color of visited links to yellow.:hover: Change the color and background color of links when hovered over by the cursor.:focus: Change the color of input elements when they are in focus.:checked: Change the height and width of checked input elements.:valid: Change the color of input elements with valid content.:invalid: Change the color of input elements with invalid content.
- Test these styles by clicking on links and interacting with input elements.
-
Create a new HTML file with two or more elements that overlap.
-
Apply the
z-indexproperty to these elements in your CSS file. Experiment with differentz-indexvalues to control their stacking order. -
Observe how elements with higher
z-indexvalues appear on top of elements with lower values.
Once you have completed these tasks, you will have a better understanding of CSS layout properties, and how to use them to control the layout and appearance of elements on a web page.