CSS3 Tutorial 105 – Web Development

Hey!! Colleagues, we are back again with a new article of tutorial CSS3 Tutorials. Here, we will start from where we left in the previous post. In this, we are going to cover the Advanced part of the CSS3 Tutorial. The advanced feature is a little long, which will take two more articles.

If you missed the previous post of CSS3, then check once CSS3 Tutorials 104.

What’s inside in this article:

CSS Visual Formatting
Display
Visibility
Position
Layers
Float
FAQS

CSS Visual Formatting

The CSS visual formatting design is an algorithm that prepares and transforms each element of the document to make one or more boxes that conform to the CSS Box Model.

CSS Box Generation of processed elements −

Block-level Elements and Block Boxes

The Block-level elements of CSS3 are elements that are formatted visually like blocks with a line break before and after the element.

For example:

Divisions (<div>), Heading (<h1> to <h6>), etc.

Inline-level Elements and Inline Boxes

The Inline-level elements are those elements of the source document that do not form new blocks of content;

For example: Spans (<span>), Strong element (<strong>)

The Inline elements commonly may only contain text and other inline elements.

CSS Display

The display property is the essential property of CSS for controlling layout.

CSS Display Property

The Display property of CSS defines how the components(div, hyperlink, heading, etc.) are going to be placed on the web page.

Syntax:

display: value;

Changing the Default Display Value

The default display value of an element is an essential implication of the display property.

Display Block

The display block always begins on the new line. It holds-up the entire available width (stretches out towards left and right as much as these elements can). A display block element is a <div> element.

Some example of display block elements are as below:

<div> ,<form>, <section>, <footer> and so on

Display Inline

This property of CSS is the default property of anchor tags. It is used to place the div inline, i.e., in a horizontal manner. The inline display property ignores the height and the width set by the user.

The <p> and <li> elements are inline-level elements:

<!DOCTYPE html> 
<html> 
<head> 
<title>CSS Display property</title> 
<style> 
#main{ 
height: 200px; 
width: 200px; 
background: teal; 
display: inline; 
} 
#main1{ 
height: 200px; 
width: 200px; 
background: cyan; 
display: inline; 
} 
#main2{ 
height: 200px; 
width: 200px; 
background: green; 
display: inline; 
} 
.blog { 
margin-left:20px; 
font-size:42px; 
font-weight:bold; 
color:blue; 
} 
.tech { 
font-size:25px; 
margin-left:30px; 
color: aqua;
} 
.main { 
margin:50px; 
} 
</style> 
</head> 
<body> 
<div class = "blog">technicalblog</div> 
<div class = "tech">display: inline; property</div> 
<div class = "main"> 
<div id="main"> BLOCK 1 </div> 
<div id="main1"> BLOCK 2</div> 
<div id="main2">BLOCK 3 </div> 
</div> 
</body> 
</html> 
CSS Display property
technicalblog
display: inline; property
BLOCK 1
BLOCK 2
BLOCK 3

Display Inline Block

This is an inherited property of Inline and block property means. This feature uses both properties mentioned above, block and inline.

Examples of inline elements:

  • <span>
  • <a>
  • <img>
<!DOCTYPE html> 
<html> 
<head> 
<title>CSS | Display property</title> 
<style> 
#main{ 
height: 100px; 
width: 200px; 
background: red; 
display: inline-block; 
} 
#main1{ 
height: 100px; 
width: 200px; 
background: cyan; 
display: inline-block; 
} 
#main2{ 
height: 100px; 
width: 200px; 
background: yellow; 
display: inline-block; 
} 
.gfg { 
margin-left:220px; 
font-size:42px; 
font-weight:bold; 
color:#009900; 
} 
.blog { 
font-size:25px; 
margin-left:210px; 
color: deepskyblue;
} 
.main { 
margin:50px; 
} 
</style> 
</head> 
<body> 
<div class = "gfg">technicalblog.in</div> 
<div class = "blog">display: Inline-block; property</div> 
<div class = "main"> 
<div id="main"> BLOCK 1 </div> 
<div id="main1"> BLOCK 2</div> 
<div id="main2">BLOCK 3 </div> 
</div> 
</body> 
</html> 
Output of following code

Display: none;

display: none; uses in JavaScript to hide and show elements without deleting and recreating them.

The <script> element uses display: none; as default.

CSS Visibility

A property called visibility allows us to hide an element from view. We can use this CSS visibility property along with JavaScript to create a very complex menu and very complex webpage layouts.

Sr.No.Value & Description
1Visible This property is used to the box, and its contents are shown to the user.
2Hidden By using the box and its content are made invisible, although they still affect the layout of the page.
3Collapse It is for use only with dynamic table columns and row effects.

CSS Position

The position Property

This property defines the type of positioning method uses for an element.

There are five different position values:

  1. Static
  2. Relative
  3. Fixed
  4. Absolute
  5. Sticky

Static Positioning

HTML elements are by default in a static position.

The statically positioned elements are not affected by the top, bottom, left, and right properties.

The position of any element which is static is not to stay in any particular way. It is always get positioned according to the normal flow of the page:

This <div> element has position: static;

For example:

div.static {
  position: static;
  border: 4px solid #73AD21;
}

Relative Positioning

A relative positioned element positions relative to its normal position.

In the related positioning scheme, the element’s box position is measured according to the normal flow. The box is then shifted from this normal position according to the properties — top or bottom and left or right.

.box { position: relative; left: 100px; }
css3 tutorial

Absolute Positioning

An element with position: absolute; is located relative to the most next positioned ancestor (instead of positioned relative to the viewport, like fixed).

For example:

.box {  position: absolute;  top: 300px;  left: 100px; }

Fixed Positioning

css3 tutorial

CSS Fixed positioning property is a subcategory of absolute positioning.

The only difference from other property is, the fixed position is fixed concerning the browser’s viewport, and it does not move when the page is scrolled.

Example:

div { position: fixed; top: 10px; left: 15px; }

CSS Layers

The CSS Elements, which moves outside of the normal flow of the document, can be caused to overlap other elements. To determine which of these positioned elements should be on top and which should be on the bottom, the z-index property is used.

The z-index property uses along with the CSS position property to create an effect of layers. We can designate which element should come on top and which part should come at the bottom.

A z-index property can help us to create more complex webpage layouts. The following is an example that shows how to create layers in CSS.

<html>
<head> technicalblog.in
</head>

<body>
<div style = "background-color:red; 
width:300px; 
height:100px; 
position:relative; 
top:10px; 
left:80px; 
z-index:2">
</div>
<div style = "background-color:yellow; 
width:300px; 
height:100px; 
position:relative; 
top:-60px; 
left:35px; 
z-index:1;">
</div>
<div style = "background-color:blue; 
width:300px; 
height:100px; 
position:relative; 
top:-220px; 
left:120px; 
z-index:3;">
</div>
</body>
</html> 
css3 tutorial
OUTPUT of Following code

CSS Float

The float property in CSS uses for positioning and layout on web pages.

The CSS clear property defines what elements can float beside the cleared element and on which side.

Float Property

css3 tutorial

The float property uses for positioning and formatting content, e.g., let an image float left to the text in a container.

It can have one of the following mentioned values:

  • Left – An element floats to the left of its container
  • right – An element floats to the right of its container
  • none – The element does not float. This is the default value.
  • Inherit – inherits the float value of its parent.

In its simplest use, the float property uses to wrap text around images.

How Elements Float

The float property of CSS places an element on the right or left side of its container; it is allowing text and inline elements to wrap around it horizontally, which means that an element can only be floated right or left, not up or down.

For example:

<!DOCTYPE html> 
<html> 
<head> 
<title>Float</title> 
</head> 
<body> 
<div class = "GFG" style = "font-size:50px; 
color: blue; float:left;"> 
technicalblog.in
</div> 
</body> 
</html>
css3 tutorial
OUTPUT of Following code

Turning off Float Using Clear Property

Elements that come after the floating element will flow around it. The clear property specifies which sides of an element’s box other floating elements are not allowed.

Now you know how to get an element to float, it’s important to know how to turn off the float. We can off the float property by using the clear property. You can clear left floats, right floats, or both.

For example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Clearing Floats</title>
<style>
.clear {
clear: left;
}
p {
float: left;
margin: 20px; 
padding: 20px;
background: #8cf0af;
}
</style>
</head>
<body>
<p>Floated to left.</p>
<p class="clear">No floated elements are allowed on left side.</p>
</body>
</html> 
css3 tutorial
OUTPUT of the following code

FAQS:

What is the CLASS selector?

The class selector is a “stand-alone” class to which a specific style is declared. By using this CLASS attribute, the declared style can then be associated with any HTML element.
syntax of using class in CSS:
.class name{ property: value;}

What is the ID selector?

The CSS id selector has used the id attribute of an HTML element to selecting a particular element.
The id of an element is always a unique one within a page, so it is obvious that an id selector is used to select one unique element!

Can we attach more than one declaration to a selector?

Yes. It can be possible. If we declare more than one declaration to a selector, we should be separated by a semicolon. e.g.:
Selector {declaration1; declaration2}
P {background: blue; color: black}

css3 tutorial, css3 tutorial, css3 tutorial

10 thoughts on “CSS3 Tutorial 105 – Web Development

  1. I love what you guys tend to be up too. This type of clever work and coverage!
    Keep up the wonderful works guys I’ve added you
    guys to blogroll.

Leave a Reply

Your email address will not be published. Required fields are marked *