Use of Float and Clear properties
- "float": The "float" property is used to specify whether an element should move to the left or right of other elements on a web page.
- "clear": The "clear" property is used to control how elements should behave in relation to floating elements. You can indicate whether an element should be placed below elements that float to the left, to the right, or to both sides.
div {
background-color: lavender;
margin: 5px;
padding: 3px 15px;
width: 300px;
}
img {
width: 50px;
border-radius: 50%;
margin: 5px;
}
.credit {
background-color: lime;
}
.creditImage {
float: left;
}
.creditText {
clear: left;
}
.debit {
text-align: right;
background-color: lightsalmon;
}
.debitImage {
float: right;
}
.debitText {
clear: right;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Recent Transfers</h1>
<div class="credit">
<img decoding="async" class="creditImage" src="https://mimo.app/i/elijah.png">
<h5>Received $50</h5>
<p class="creditText">For Phone Bill</p>
</div>
<div class="debit">
<img decoding="async" class="debitImage" src="https://mimo.app/i/portrait-cv.png">
<h5>Sent $1500</h5>
<p class="debitText">For Macbook</p>
</div>
</body>
</html>
Use of the Position property
The property "position"is used to control the position of an element within an HTML document. This property has several possible values:
"static": This is the default value and means that the element is positioned according to the normal flow of the document. It is not affected by the "top", "bottom", "left" or "right" properties.
"relative": Allows you to adjust the position of an element with respect to its normal position. You can use the "top", "bottom", "left" and "right" properties to move the element from its original position.
"absolute": Causes the element to be positioned relative to its first positioned parent element or to the root element of the document if there is no positioned parent element. You can use the "top", "bottom", "left" and "right" properties to control its position.
"fixed": Sets the position of the element relative to the browser window, which means that it will remain in the same position even if the page is scrolled. You can also use "top", "bottom", "left" and "right" to adjust its position.
"sticky": Allows an element to behave as "relative" until it reaches a specific position in the browser window, where it will behave as "fixed". You can use the "top", "bottom", "left" and "right" properties to define the point at which it becomes fixed.
These are the most common values for the "position" property in CSS. Depending on your needs, you can choose the value that best suits the design you are creating.
body {
font-family: "Courier New";
}
em {
position: relative;
bottom: 5px;
font-size: 10px;
}
span {
position: relative;
top: 20px;
right: 10px;
border-top: 2px solid gray;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>x<em>2</em> + y<em>2</em> = 25</p>
<p>1<span>2</span>+ 1<span>3</span>= 5<span>6</span></p>
</body>
</html>
Use of the z-index property
The property "z-index" property in CSS is used to control the stacking of elements positioned on a three-dimensional axis, that is, their visual depth. This property affects elements that have a position other than "static" (for example, "relative", "absolute" or "fixed").
The z-index value determines the display priority of an element relative to other elements. A higher "z-index" value places the element above others with lower values.
Here are some key points about "z-index":
The default value of "z-index" is "auto", which means that the stacking is determined by the order of the elements in the document tree and in the normal flow of the document.
The "z-index" values can be positive or negative integers, where higher numbers have higher priority. For example, an element with "z-index: 2" will overlap one with "z-index: 1".
If two elements have the same "z-index" value, their stacking order is determined by their position in the document tree and in the normal flow. The element that appears later in the HTML code will be closer to the viewer.
The "z-index" property only has an effect on elements that have a position other than "static". If no position is specified, such as "relative" or "absolute", "z-index" will have no effect.
It is important to note that "z-index" only affects elements that are in the same stacking context. That is, it cannot cause an element in a nested stacking context to overlap an element in a higher stacking context.
By properly using the "z-index" property, you can control the overlapping of elements in your design and create visual layers with different levels of depth.
body {
height: 250px;
}
div {
position: absolute;
border-radius: 50%;
}
.large {
background-color: black;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
z-index: 1;
}
.medium {
background-color: white;
width: 120px;
height: 120px;
z-index: 2;
top: 50px;
left: 50px;
}
.small {
background-color: crimson;
width: 50px;
height: 50px;
z-index: 3;
top: 85px;
left: 85px;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="small"></div>
<div class="medium"></div>
<div class="large"></div>
</body>
</html>
Use of the Display property
The property "display" in CSS is used to control how an element is displayed on the page. It defines the type of box used to represent an element and how it interacts with other elements in the document flow. Here are some common values for the "display" property:
"block": Makes the element behave as a block and occupy the entire available width. Block elements start on a new line and stack vertically. You can set dimensions (height and width) on block elements and add margins, padding and borders.
"inline": Makes the element behave as an inline box and only occupies the necessary space within the text flow. Inline elements do not start on a new line and do not support dimensions (height and width). However, you can set horizontal and vertical margins, padding and borders.
"inline-block: Combines the features of "block" and "inline" elements. It allows the element to occupy only the necessary space within the text flow, but also supports dimensions, margins, padding and borders.
"none": Hides the element completely, without occupying any space in the document flow. It is as if the element does not exist. You can use this to visually control the visibility of elements using JavaScript or CSS.
"flex": Establishes a flexible design context using the Flexbox model. It allows a flexible and adaptive design, where elements can change their size and order automatically.
"grid": Establishes a grid-based layout context using the grid model (CSS Grid). Allows you to create complex layouts and control the position and size of elements in a two-dimensional grid.
These are just some of the most common values for the "display" property. Choosing the right value depends on the design and structure you want to achieve. Each value has its own characteristics and behavior in the document flow.
body {
font-family: Verdana;
}
#logo {
width: 40%;
margin-top: 10px;
}
ul,
li {
display: inline;
float: right;
margin: 10px;
}
a {
color: black;
}
.navbar {
border-bottom: solid 1px thick black;
padding: 10px;
}
.rating {
color: gold;
font-size: 200%;
}
.def {
color: black;
font-size: 50%;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
#location {
width: 100%;
}
.landscapeImage {
position: relative;
}
#arrow {
position: absolute;
font-size: 30px;
color: white;
top: 10px;
right: 30px;
z-index: 1;
}
.about,
.comments {
padding: 10px;
margin-top: 10px;
border: solid 1px black;
}
.userDP {
width: 10%;
float: left;
}
.name {
display: inline;
}
.userRating {
color: gold;
}
.userComment {
color: black;
margin-top: 5px;
display: block;
}
<!doctype html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="navbar">
<img decoding="async" id="logo" src="https://mimo.app/i/touradvisor.png">
<ul>
<li><a href="#reviews">Reviews</a></li>
<li><a href="#trips">Trips</a></li>
</ul>
</div>
<div>
<h1>Kluane National Park and Reserve</h1>
<p class="rating">●●●●●<span class="def">(Based
on 200+ ratings)</span></p>
</div>
<div class="landscapeImage">
<p id="arrow">→</p>
<img decoding="async" id="location" src="https://mimo.app/i/kluane.png">
</div>
<div class="about">
<h2>About</h2>
<p>This huge park is well-known for its fantastic scenic landscape and its excellent opportunities for
excellent opportunities for recreational activities.</p>
</div>
<div class="comments">
<h2>Comments</h2>
<div>
<img decoding="async" class="userDP" src="https://mimo.app/i/tom.png">
<p class="name">Jack Hill</p>
<p class="userRating">★★★★★ <span class="userComment">Awesome place!</span>
</p>
</div>
<div>
<img decoding="async" class="userDP" src="https://mimo.app/i/alexander.png">
<p class="name">Rebel Jones</p>
<p class="userRating">★★★★★ <span class="userComment">Great place for a
vacation!</span>
</p>
</div>
</div>
</body>
</html>
Use of Cursor, Opacity and Letter-spacing properties
The properties "cursor", "opacity" y "letter-spacing" in CSS:
"cursor": Used to change the appearance of the mouse cursor when it is placed over an interactive element. You can specify different values to indicate different types of cursors, such as "pointer", "default", "crosshair", "text" and many others. This makes it possible to provide visual feedback to users about the interactivity of an element.
"opacity: It is used to adjust the opacity of an element, i.e. its level of transparency. You can set a value between 0 and 1, where 0 represents full transparency (element not visible) and 1 represents full opacity (element fully visible). When you adjust the opacity of an element, it is also applied to its content. This can be useful to create overlay effects, smooth transitions or to display elements gradually.
"letter-spacing": Used to adjust the spacing between characters in a text. You can set a positive value to increase the spacing between characters or a negative value to decrease it. This can be useful to adjust readability or to achieve specific design effects. Note that letter-spacing affects all characters within the element, including whitespace and special characters.
Remember that you can apply these properties to specific HTML elements using CSS selectors or through classes and IDs. Each of these properties has its own purpose and can be used to control visual and interaction aspects of your web design.
body {
background-color: #FFF9F5;
color: #36454F;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 600px;
margin: auto;
}
img {
width: 200px;
border: 2px solid black;
position: relative;
}
.groupOne,
.groupTwo {
width: 80%;
text-align: justify;
}
.groupTwo {
float: right;
}
#imageTwo {
top: 30px;
right: 175px;
}
#imageThree {
top: 30px;
float: right;
}
#imageFour {
left: 250px;
}
#pTwo {
clear: right;
float: right;
}
.buttonTwo {
clear: right;
float: right;
}
.footerLinks {
display: block;
}
nav {
margin: 12px;
}
a {
margin: 20px;
color: #36454F;
text-decoration: none;
}
.firstLink {
margin-left: 0;
}
h1 {
text-align: center;
font-size: 60px;
letter-spacing: 1px;
}
img:hover {
cursor: pointer;
}
.showing {
opacity: 100%;
z-index: 2;
}
.obscured {
opacity: 50%;
z-index: 1;
}
p {
margin-top: 35px;
width: 90%;
}
button {
height: 30px;
width: 100px;
display: inline-block;
}
button:hover {
cursor: pointer;
}
footer {
padding-top: 50px;
text-align: center;
clear: right;
}
<!doctype html>
<html>
<head>
<title>Charitable NFTs</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<nav>
<a class="firstLink" href="">Home</a>
<a href="">About</a>
<a href="#">Buy</a>
</nav>
<header>
<h1>Select Your NFT</h1>
</header>
<main>
<div class="groupOne">
<img decoding="async" id="imageOne" class="showing"
src="https://mimo.app/i/hydroplane.png">
<img decoding="async" id="imageTwo" class="obscured"
src="https://mimo.app/i/aircraft.png">
<p><strong>Click the hidden image to display. </strong>Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Cras quam sapien,
tempus non est a, scelerisque egestas ipsum. Cras ac tempus orci,
eget egestas enim. Aliquam non turpis ante. Proin sed posuere
lectus, ac convallis ex.</p>
<button>BUY</button>
</div>
<div class="groupTwo">
<img decoding="async" id="imageThree" class="obscured"
src="https://mimo.app/i/stationary-bikes.png">
<img decoding="async" id="imageFour" class="showing"
src="https://mimo.app/i/power-rack.png">
<p id="pTwo"><strong>Click the hidden image to display. </strong>Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Cras quam sapien,
tempus non est a, scelerisque egestas ipsum. Cras ac tempus orci,
eget egestas enim. Aliquam non turpis ante. Proin sed posuere
lectus, ac convallis ex.</p>
<button class="buttonTwo">BUY</button>
</div>
</main>
<footer>
<nav>
<a class="footerLinks" href="">Home</a>
<a class="footerLinks" href="">About</a>
<a class="footerLinks" href="#">Buy</a>
</nav>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>
const one = document.getElementById("imageOne");
const two = document.getElementById("imageTwo");
const three = document.getElementById("imageThree");
const four = document.getElementById("imageFour");
one.onclick = function() {
one.classList.remove("obscured");
one.classList.add("showing");
two.classList.remove("showing");
two.classList.add("obscured");
};
two.onclick = function() {
two.classList.remove("obscured");
two.classList.add("showing");
one.classList.remove("showing");
one.classList.add("obscured");
};
three.onclick = function() {
three.classList.remove("obscured");
three.classList.add("showing");
four.classList.remove("showing");
four.classList.add("obscured");
};
four.onclick = function() {
four.classList.remove("obscured");
four.classList.add("showing");
three.classList.remove("showing");
three.classList.add("obscured");
};
An extra example:
img {
border-radius: 8px 8px 8px 8px 8px 8px;
position: relative;
right: 120px;
top: 30px;
}
#more {
position: absolute;
top: 8px;
right: 10px;
background-color: indianred;
color: white;
border-radius: 10px;
padding: 10px;
border: none;
}
h2 {
margin-top: 50px;
text-align: center;
}
#text {
text-align: justify;
padding-left: 10%;
padding-right: 10%;
}
body {
font-family: Cambria;
}
#banner {
height: 250px;
}
h2 {
font-size: 30px;
width: 300px;
}
#text {
font-size: 20px;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./index.css" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="main">
<div id="banner">
<img decoding="async" src="https://mimo.app/i/holiday.png" />
<button id="more">Know more</button>
<h2>The Caribbean</h2>
</div>
<div id="text">
<p class="blurb">The Caribbean is a region of the Americas that consists of the Caribbean Sea
of the Caribbean Sea, its islands and the surrounding coasts. The
region is southeast of the Gulf of Mexico and the North American
mainland, east of Central America, and north of South America.</p>
<p class="blurb">The climate of the area is tropical, varying from
tropical rainforest in some areas to tropical monsoon and tropical
savanna in others. There are also some locations that are arid
climates with considerable drought in some years, and the peaks of
mountains tend to have cooler temperate climates.</p>
</div>
</div>
</body>
</html>
