Span and div

From Wikipedia, the free encyclopedia

Jump to navigationJump to search

In HTML,  span  and  div  elements are used to define parts of a document so that they are
identifiable when a unique classification is necessary. Where other HTML elements such
as  p  (paragraph),  em  (emphasis), and so on, accurately represent the semantics of the content, the
additional use of  span  and  div  tags leads to better accessibility for readers and
easier maintainability for authors. Where no existing HTML element is
applicable,  span  and  div  can valuably represent parts of a document so that HTML attributes such
as  class ,  id ,  lang , or  dir  can be applied.[1][2]
span  represents an inline portion of a document, for example words within a
sentence.  div  represents a block-level portion of a document such as a few paragraphs, or an
image with its caption. Neither element has any meaning in itself, but they allow semantic attributes
(e.g.  lang="en-US" ), CSS styling (e.g., color and typography), or client-side scripting (e.g.,
animation, hiding, and augmentation) to be applied. [1][2]
A CSS pseudo-element is used to style specified parts of an element. For example, it
can be used to: ... Insert content before, or after, the content of an element.

What are Pseudo-classes?

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

 Style an element when a user mouses over it

 Style visited and unvisited links differently
 Style an element when it gets focus

Mouse Over Me
Syntax
The syntax of pseudo-classes:

selector:pseudo-class {
  property:value;
}

The position property specifies the type of positioning method used for an

element (static, relative, fixed, absolute or sticky).

The position Property

The position property specifies the type of positioning method used for an
element.

There are five different position values:

 static
 relative
 fixed
 absolute
 sticky

Elements are then positioned using the top, bottom, left, and right properties.
However, these properties will not work unless the position property is set first.
They also work differently depending on the position value.

position: static;
HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right
properties.
An element with position: static; is not positioned in any special way; it is
always positioned according to the normal flow of the page:

This <div> element has position: static;

Here is the CSS that is used: