Scribd
Upload
5 views3 pages

Advanced CSS Techniques Showcase

This document is an HTML example demonstrating advanced CSS concepts, including grouping selectors, dimensions, display properties, positioning, floating elements, text alignment, pseudo-classes, and attribute selectors. It features various styled elements such as boxes, a navigation bar, and hover effects. The CSS styles are embedded within the HTML for easy reference and visualization of the concepts.

Uploaded by

dipakmarwadi692
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views3 pages

Advanced CSS Techniques Showcase

This document is an HTML example demonstrating advanced CSS concepts, including grouping selectors, dimensions, display properties, positioning, floating elements, text alignment, pseudo-classes, and attribute selectors. It features various styled elements such as boxes, a navigation bar, and hover effects. The CSS styles are embedded within the HTML for easy reference and visualization of the concepts.

Uploaded by

dipakmarwadi692
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced CSS Example</title>
<style>
/* Grouping selectors */
h1, h2, p {
font-family: Arial, sans-serif;
}

/* Dimension */
.box {
width: 300px;
height: 200px;
background-color: lightcoral;
margin: 10px;
padding: 10px;
border: 2px solid black;
}

/* Display */
.inline-box {
display: inline-block;
width: 150px;
height: 100px;
background-color: lightblue;
margin: 5px;
}

/* Positioning */
.position-box {
position: relative;
top: 20px;
left: 30px;
width: 200px;
height: 100px;
background-color: lightgreen;
}

/* Floating */
.float-box {
float: left;
width: 150px;
height: 150px;
background-color: lightpink;
margin-right: 10px;
}

/* Text alignment */
.text-center {
text-align: center;
}

/* Pseudo-class */
a:hover {
color: red;
}
/* Attribute selector */
[type="text"] {
border: 2px solid blue;
padding: 5px;
}

/* Navigation Bar */
.navbar {
overflow: hidden;
background-color: #333;
}

.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>

<!-- Heading -->


<h1 class="text-center">Advanced CSS Concepts</h1>
<h2 class="text-center">Demonstration of Various CSS Features</h2>

<!-- Box with Dimension and Border -->


<div class="box">
This is a box with specified dimensions.
</div>

<!-- Display as inline-block -->


<div class="inline-box">Box 1</div>
<div class="inline-box">Box 2</div>

<!-- Positioning Example -->


<div class="position-box">This box is relatively positioned.</div>

<!-- Floating Example -->


<div class="float-box">Floating Box 1</div>
<div class="float-box">Floating Box 2</div>

<!-- Clear float -->


<div style="clear: both;"></div>

<!-- Input with Attribute Selector -->


<input type="text" placeholder="Attribute selector applied">

<!-- Pseudo-class Example -->


<p><a href="#">Hover over this link</a> to see the pseudo-class effect.</p>
<!-- Navigation Bar -->
<div class="navbar">
<a href="#home">Home</a>
<a href="#services">Services</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>

</body>
</html>

You might also like