The CSS positionproperty defines the type of positioning method used for an element.
Demo:
Syntax:
position: static|absolute|fixed|relative|sticky;
static (default) – elements render in the order, as they appear in the document flow (static positioned elements are not affected by the top, bottom, left, and right properties).
fixed – the element is positioned relative to the browser window (is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled).
Example:
relative – the element is positioned relative to its normal position (setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position).
sticky – the element is positioned based on the user’s scroll position (a sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport – then it “sticks” in place (like position:fixed)).
Having easy-to-use navigation is very important for any website. Today you can learn how to create a top navigation bar with CSS.
With CSS you can transform boring HTML menus into good-looking navigation bars. The navigation bar can be vertical, or horizontal.
With CSS you can transform boring HTML menus into good-looking navigation bars. The navigation bar can be vertical, or horizontal. A navigation bar needs standard HTML as a base. A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense (you can review your knowledge about HTML list tags here.)
The CSS opacity property sets the opacity of an element. The opacity property can take a value from 0.0 to 1.0 (default 1).
Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #e76f51;
opacity: 0.5;
}
</style>
</head>
<body>
<p>The following div element's opacity is 0.5. Note that both the text and the background-color are affected by the opacity level:</p>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</div>
</body>
</html>
Output:
The following div element’s opacity is 0.5. Note that both the text and the background-color are affected by the opacity level:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit…
When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you don’t want to apply opacity to the child elements, use RGBA colour values (more about colours in HTML/CSS you can here and here.)
Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #2a9d8f;
padding: 10px;
}
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
</style>
</head>
<body>
<p>Note: The opacity property adds transparency to the background of an element, and to all of its child elements as well. This makes the text inside a transparent element hard to read:</p>
<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>
</body>
</html>
Output:
Note: The opacity property adds transparency to the background of an element, and to all of its child elements as well. This makes the text inside a transparent element hard to read:
The opacity property is often used with the :hover selector to change opacity on mouse-over:
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="https://lenadesign.org/wp-content/uploads/2021/05/cycling-animation.jpg" alt="bike" width="170" height="100">
<img src="https://lenadesign.org/wp-content/uploads/2020/03/birthday-cake.jpg" alt="cake" width="170" height="100">
<img src="https://lenadesign.org/wp-content/uploads/2021/02/blog-rocket.jpg" alt="computer" width="170" height="100">
</body>
</html>
Output:
The opacity property is often used together with the :hover selector to change the opacity on mouse-over:
To create the text in transparent box, first, create a <div> element (class=”background”) with a background image, and a border. Then we create another <div> element (class=”transbox”) inside the first <div>. The <div class=”transbox”> have a background colour, and a border – the div is transparent. Inside the transparent <div>, we can add some text inside a <p> element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div.background {
background: url(14.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
How to add the link to the HTML document, you can find in my previous posts (click here to see the post). To improve the look of your web page you can style your links in CSS.
*to see the code of the CSS link animation above on the website click here.
Links can be styled with any CSS property like colour, font-family, background and etc…
Example:
<!DOCTYPE html>
<html>
<head>
<style>
a {
color: #2a9d8f;
}
</style>
</head>
<body>
<p><b><a href="" target="_blank">This is a link.</a></b></p>
</body>
</html>
The CSS box model is used to create the design and layout of websites. It consists of: margins, borders, padding, and the content itself. The CSS box model allows us to add a border around elements, and to define space between elements. The image below illustrates the box model:
Explanations of the different parts:
Margin Area – This area consists of space between the border and the margin. The margin is transparent.
Border Area – The border that goes around the padding and content. Its dimensions are given by the height and width of the border. Padding Area – It includes the element’s padding. The padding is transparent. Content Area – The content of the box, where text and images appear.
Example:
The CSS box model contains: borders, padding, margins, and content.
This CSS box model contains:
content(text),
padding: 20px,
margin: 10px,
border: 10px.
Width and height in the CSS box model:
In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.
To calculate the full size of an element, you must also add padding, borders, and margins.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<img src="https://lenadesign.org/wp-content/uploads/2019/12/female-web-dev.jpg" width="350" height="263" alt="web dev">
<div>The image above is 350px wide. The total width of this element is also 350px.</div>
</body>
</html>
Output:
Calculation:
320px (width) + 20px (left and right padding) + 10 px (left and right border) + 0 px (left and right margin) = 350 px
