Box Sizing

  • The CSS box-sizing property allows us to include the padding and border in an element's total width and height.

  • Without the CSS box-sizing Property

    By default, the width and height of an element is calculated like this:
    • width + padding + border = actual width of an element
    • height + padding + border = actual height of an element
    This means: When you set the width/height of an element, the element often appears bigger than you have set (because the element's border and padding are added to the element's specified width/height).
    The box-sizing property solves this problem.
  • The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not.

    Syntax : box-sizing: content-box|border-box|initial|inherit;

    Value Description
    content-box Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included
    border-box The width and height properties (and min/max properties) includes content, padding and border
    initial Sets this property to its default value.
    inherit Inherits this property from its parent element.
  • EX:
    <!DOCTYPE html> <html> <head> <style> div.container { width: 100%; border: 2px solid black; } div.box { box-sizing: border-box; width: 50%; border: 5px solid red; float: left; } </style> </head> <body> <div class="container"> <div class="box">This div occupies the left half</div> <div class="box">This div occupies the right half</div> <div style="clear:both;"></div> </div> </body> </html>
    Try this code once, and remove box-sizing: border-box; and try again to see the difference.

CSS Shadow Effects

  • With CSS you can add shadow to text and to elements with following properties.
    • text-shadow
    • box-shadow

CSS Box Shadow

  • The CSS box-shadow property applies shadow to elements.

  • Syntax : box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

    Value Description
    none Default value. No shadow is displayed
    h-offset Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box
    v-offset Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box
    blur Optional. The blur radius. The higher the number, the more blurred the shadow will be
    spread Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow
    color Optional. The color of the shadow. The default value is the text color.
    inset Optional. Changes the shadow from an outer shadow (outset) to an inner shadow
    initial Sets this property to its default value.
    inherit Inherits this property from its parent element.
  • Examples: 
                  
  /* shadow with blur effect */
  #example1 {
    box-shadow: 10px 10px 8px #888888;
  }

  /* Define the spread radius of the shadow */
  #example2 {
    box-shadow: 10px 10px 8px 10px #888888;
  }

  /* Define multiple shadows */
  #example3 {
    box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
  }

CSS Display

  • The display property is the most important CSS property for controlling layout.
  • The display property specifies if/how an element is displayed.
  • Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

  • Block-level Elements

    A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

    Examples of block-level elements:
    • <div>
    • <h1> - <h6>
    • <p>
    • <form>
    • <header>
    • <footer>
    • <section>
    EX: 
                  
  span {
    display: block;
  }

  • Inline Elements

    An inline element does not start on a new line and only takes up as much width as necessary.

    Examples of inline elements:
    • <span>
    • <a>
    • <img>
    EX: 
                  
  li {
    display: inline;
  }

  • Display: none;

    Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there.

    visibility:hidden; also hides an element.
    However, the element will still take up the same space as before. The element will be hidden, but still affect the layout.

    EX: 
                  
  li {
    display: none;
  }
  h1 {
    visibility: hidden;
  }

  • The display: inline-block Value

    • Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
    • Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.
    • Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
    • EX:
      <!DOCTYPE html> <html> <head> <style> span.a { display: inline; width: 100px; height: 100px; padding: 5px; background-color: aliceblue; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; background-color: aliceblue; } span.c { display: block; width: 100px; height: 100px; padding: 5px; background-color: aliceblue; } </style> </head> <body> <h2>display: inline</h2> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="a">Aliquam</span> <span class="a">venenatis</span> gravida nisl sit amet facilisis. </div> <h2>display: inline-block</h2> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="b">Aliquam</span> <span class="b">venenatis</span> gravida nisl sit amet facilisis. </div> <h2>display: block</h2> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="c">Aliquam</span> <span class="c">venenatis</span> gravida nisl sit amet facilisis. </div> </body> </html>

CSS Position

  • 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.
    • EX: 
                        
  div.static {
    position: static;
    border: 3px solid #73AD21;
  }

  • position: relative;

    • An element with position: relative; 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. Other content will not be adjusted to fit into any gap left by the element.
    • EX: 
                        
  div.relative {
    position: relative;
    left: 30px;
    top:20px;
  }

    • position: fixed;

      • An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
      • A fixed element does not leave a gap in the page where it would normally have been located.
      • EX: 
                              
  div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
  }

    • position: absolute;

      • An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
      • However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
      EX:
      <!DOCTYPE html> <html> <head> <style> div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #149ddd; } div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #149ddd; } </style> </head> <body> <div class="relative">This div element has position: relative; <div class="absolute"> This div element has position: absolute; </div> </div> </body> </html>

    • position: sticky;

      • An element with position: sticky; 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).
      • EX: 
                              
  div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: #149ddd;
  }

    • CSS z-index

      • The z-index property specifies the stack order of an element.
      • An element with greater stack order is always in front of an element with a lower stack order.
      • z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).
      • Syntax : z-index: auto|number|initial|inherit;
        Value Description
        auto Sets the stack order equal to its parents. This is default
        number Sets the stack order of the element. Negative numbers are allowed
        initial Sets this property to its default value.
        inherit Inherits this property from its parent element.
      • EX: 
                              
  img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
  }

  • All CSS Positioning Properties

    Property Description
    bottom Sets the bottom margin edge for a positioned box
    left Sets the left margin edge for a positioned box
    position Specifies the type of positioning for an element
    right Sets the right margin edge for a positioned box
    top Sets the top margin edge for a positioned box
    z-index Sets the stack order of an element

CSS float and clear

  • The CSS float property specifies how an element should float.
  • The CSS clear property specifies what elements can float beside the cleared element and on which side.
  • The float property can have one of the following values:
    • left - The element floats to the left of its container
    • right - The element floats to the right of its container
    • none - The element does not float (will be displayed just where it occurs in the text). This is default
    • inherit - The element inherits the float value of its parent
  • EX:
    <!DOCTYPE html> <html> <head> <style> div { float: left; padding: 15px; } .div1 { background: red; } .div2 { background: yellow; } .div3 { background: green; } </style> </head> <body> <div class="div1">Div 1</div> <div class="div2">Div 2</div> <div class="div3">Div 3</div> </body> </html>

Clear Property

  • When we use the float property, and we want the next element below (not on right or left), we will have to use the clear property.
  • The clear property specifies what should happen with the element that is next to a floating element.
  • The clear property can have one of the following values :
    • none - The element is not pushed below left or right floated elements. This is default
    • left - The element is pushed below left floated elements
    • right - The element is pushed below right floated elements
    • both - The element is pushed below both left and right floated elements
    • inherit - The element inherits the clear value from its parent
  • When clearing floats, you should match the clear to the float: If an element is floated to the left, then you should clear to the left.
  • EX:
    <!DOCTYPE html> <html> <head> <style> .div1 { float: left; padding: 10px; border: 3px solid #73AD21; } .div2 { padding: 10px; border: 3px solid red; } .div3 { float: left; padding: 10px; border: 3px solid #73AD21; } .div4 { padding: 10px; border: 3px solid red; clear: left; } </style> </head> <body> <h2>Without clear</h2> <div class="div1">div1</div> <div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div> <br><br> <h2>With clear</h2> <div class="div3">div3</div> <div class="div4">div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div> </body> </html>

CSS Overflow

  • The CSS overflow property controls what happens to content that is too big to fit into an area.
  • The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.
  • The overflow property has the following values:
    • visible - Default. The overflow is not clipped. The content renders outside the element's box
    • hidden - The overflow is clipped, and the rest of the content will be invisible
    • scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
    • auto - Similar to scroll, but it adds scrollbars only when necessary

  • overflow values

    Value Description Example
    overflow: visible By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box. 
                            
div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}
    overflow: hidden With the hidden value, the overflow is clipped, and the rest of the content is hidden. 
                            
div {
  overflow: hidden;
}
    overflow: scroll Setting the value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need it). 
                            
div {
  overflow: scroll;
}
    overflow: auto The auto value is similar to scroll, but it adds scrollbars only when necessary. 
                            
div {
  overflow: auto;
}
    overflow-x
    overflow-y    		 The overflow-x and overflow-y properties specifies whether to change the overflow of content just horizontally or vertically (or both).
    • overflow-x specifies what to do with the left/right edges of the content.
    • overflow-y specifies what to do with the top/bottom edges of the content.
    		 
                            
div {
  /* Hide horizontal scrollbar */
  overflow-x: hidden; 
  /* Add vertical scrollbar */
  overflow-y: scroll; 
}

CSS Flexbox

  • Before the Flexbox Layout module, there were four layout modes:

    • Block, for sections in a webpage
    • Inline, for text
    • Table, for two-dimensional table data
    • Positioned, for explicit position of an element
    The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
  • EX :
    <!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; flex-wrap: wrap; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> <p>Try resizing the browser window.</p> </body> </html>

  • CSS Flex Container

    The flex container becomes flexible by setting the display property to flex
    EX : 
                  
  .flex-container {
    display: flex;
  }
    The flex container properties are:
    • flex-direction
    • flex-wrap
    • flex-flow
    • justify-content
    • align-items
    • align-content
    Property Description Example
    flex-direction The flex-direction property defines in which direction the container wants to stack the flex items.
    • The column value stacks the flex items vertically (from top to bottom).
    • The column-reverse value stacks the flex items vertically (but from bottom to top).
    • The row value stacks the flex items horizontally (from left to right).
    • The row-reverse value stacks the flex items horizontally (but from right to left).
    		 
                            
  .flex-container {
    display: flex;
    flex-direction: column;
  }
    flex-wrap The flex-wrap property specifies whether the flex items should wrap or not.
    • The wrap value specifies that the flex items will wrap if necessary.
    • The nowrap value specifies that the flex items will not wrap (this is default).
    • The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order.
    		 
                            
  .flex-container {
    display: flex;
    flex-wrap: wrap-reverse;
  }
    flex-flow The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties. 
                            
  .flex-container {
    display: flex;
    flex-flow: row wrap;
  }
    justify-content The justify-content property is used to align the flex items.
    • The flex-start value aligns the flex items at the beginning of the container (this is default).
    • The flex-end value aligns the flex items at the end of the container.
    • The space-around value displays the flex items with space before, between, and after the lines.
    • The space-between value displays the flex items with space between the lines.
    		 
                            
  .flex-container {
    display: flex;
    justify-content: space-between;
  }
    align-items The align-items property is used to align the flex items.
    • The center value aligns the flex items in the middle of the container.
    • The flex-start value aligns the flex items at the top of the container.
    • The flex-end value aligns the flex items at the bottom of the container.
    • The stretch value stretches the flex items to fill the container (this is default).
    • The baseline value aligns the flex items such as their baselines aligns.
    		 
                            
  .flex-container {
    display: flex;
    height: 200px;
    align-items: center;
  }
    align-content The align-content property is used to align the flex lines.
    • The space-between value displays the flex lines with equal space between them.
    • The space-around value displays the flex lines with space before, between, and after them.
    • The stretch value stretches the flex lines to take up the remaining space (this is default).
    • The center value displays display the flex lines in the middle of the container.
    • The flex-start value displays the flex lines at the start of the container.
    • The flex-end value displays the flex lines at the end of the container.
    		 
                            
  .flex-container {
    display: flex;
    height: 600px;
    flex-wrap: wrap;
    align-content: center;
  }

  • CSS Flex Items

    The direct child elements of a flex container automatically becomes flexible (flex) items.
    EX:
    <!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; background-color: #f1f1f1; } .flex-container > div { background-color: DodgerBlue; color: white; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </body> </html>

    The flex item properties are:
    • order
    • flex-grow
    • flex-shrink
    • flex-basis
    • flex
    • align-self
    The following table lists all the CSS Flexbox Items properties:
    Property Description Example
    align-self Specifies the alignment for a flex item (overrides the flex container's align-items property).
    It has three values (center, flex-start, flex-end). 
                            
  div{
    align-self: flex-end
  }
    flex A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties. 
                            
  div{
    flex: 0 0 200px
  }

    Make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels
    flex-basis Specifies the initial length of a flex item. 
                            
  div{
    flex-basis: 200px
  }
    flex-grow Specifies how much a flex item will grow relative to the rest of the flex items inside the same container.
    The value must be a number, default value is 0. 
                            
  div{
    flex-grow: 1
  }
    flex-shrink Specifies how much a flex item will shrink relative to the rest of the flex items inside the same container.
    The value must be a number, default value is 1. 
                            
  div{
    flex-shrink: 0
  }
    order Specifies the order of the flex items inside the same container.
    The order value must be a number, default value is 0. 
                            
  div{
    order: 3
  }

CSS Media Queries

  • The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.
  • Examples: You could have one set of style rules for computer screens, one for printers, one for handheld devices, one for television-type devices, and so on.
  • Media queries in CSS3 extended the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.
  • Media queries can be used to check many things, such as :
    • width and height of the viewport
    • width and height of the device
    • orientation (is the tablet/phone in landscape or portrait mode?)
    • resolution
  • Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).

  • Media Query Syntax

                  
  @media not|only mediatype and (expressions) {
    CSS-Code;
  }
    • The result of the query is true if the specified media type matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
    • Unless you use the not or only operators, the media type is optional and the all type will be implied.

  • CSS Media Types

    Value Description
    all Used for all media type devices
    print Used for printers
    screen Used for computer screens, tablets, smart-phones etc.
    speech Used for screenreaders that "reads" the page out loud

  • Media Queries Examples

                  
  @media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left: 216px;}
  }

CSS Combinators

  • A combinator is something that explains the relationship between the selectors.
  • A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
  • There are four different combinators in CSS:
    • descendant selector (space)
    • child selector (>)
    • adjacent sibling selector (+)
    • general sibling selector (~)

  • combinators in CSS

    Selector Description Example
    Descendant Selector (space) The descendant selector matches all elements that are descendants of a specified element. 
                            
  div p {
    background-color: yellow;
  }

    The following example selects all <p> elements inside <div> elements.

    Child Selector (>) The child selector selects all elements that are the children of a specified element. 
                            
  div > p {
    background-color: yellow;
  }

    The following example selects all <p> elements that are children of a <div> element.
    Adjacent Sibling Selector (+) The adjacent sibling selector is used to select an element that is directly after another specific element.
    Sibling elements must have the same parent element, and "adjacent" means "immediately following". 
                            
  div + p {
    background-color: yellow;
  }

    The following example selects the first <p> element that are placed immediately after <div> elements.
    General Sibling Selector (~) The general sibling selector selects all elements that are next siblings of a specified element. 
                            
  div ~ p {
    background-color: yellow;
  }

    The following example selects all <p> elements that are next siblings of <div> elements.

CSS Attribute Selectors

It is possible to style HTML elements that have specific attributes or attribute values.


Attribute Selectors Description Example
CSS [attribute] Selector The [attribute] selector is used to select elements with a specified attribute. The following example selects all elements with a target attribute: 
                    
a[target] {
  background-color: yellow;
}
CSS [attribute="value"] Selector The [attribute="value"] selector is used to select elements with a specified attribute and value. The following example selects all elements with a target="_blank" attribute: 
                    
a[target="_blank"] {
  background-color: yellow;
}
CSS [attribute~="value"] Selector The [attribute~="value"] selector is used to select elements with an attribute value containing a specified word. The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower": 
                    
[title~="flower"] {
  border: 5px solid yellow;
}
CSS [attribute|="value"] Selector The [attribute|="value"] selector is used to select elements with the specified attribute starting with the specified value. The following example selects all elements with a class attribute value that begins with "top": 
                    
[class|="top"] {
  background: yellow;
}
CSS [attribute^="value"] Selector The [attribute^="value"] selector is used to select elements whose attribute value begins with a specified value. The following example selects all elements with a class attribute value that begins with "top": 
                    
[class^="top"] {
  background: yellow;
}
CSS [attribute$="value"] Selector The [attribute$="value"] selector is used to select elements whose attribute value ends with a specified value. The following example selects all elements with a class attribute value that ends with "test": 
                    
[class$="test"] {
  background: yellow;
}
CSS [attribute*="value"] Selector The [attribute*="value"] selector is used to select elements whose attribute value contains a specified value. The following example selects all elements with a class attribute value that contains "te": 
                    
[class*="te"] {
  background: yellow;
}

Example:

<!DOCTYPE html> <html> <head> <style> input[type=text] { width: 150px; display: block; margin-bottom: 10px; background-color: yellow; } input[type=button] { width: 120px; margin-left: 35px; display: block; } </style> </head> <body> <form name="input" action="" method="get"> Firstname:<input type="text" name="Name" value="Ahmed" size="20"> Age:<input type="number" name="Age" value="32" size="20"> <input type="button" value="Example Button"> </form> </body> </html>

CSS Pseudo-classes

  • A pseudo-class is used to define a special state of an element.
  • Syntax : The syntax of pseudo-classes: 
                
  selector:pseudo-class {
    property: value;
  }
  • EX:
    <!DOCTYPE html> <html> <head> <style> p { display: none; background-color: yellow; padding: 20px; } div:hover p { display: block; } </style> </head> <body> <div>Hover over me to show the p element <p>Here I am!</p> </div> </body> </html>

  • All CSS Pseudo Classes

    Selector Example Example description
    :active a:active Selects the active link
    :checked input:checked Selects every checked <input> element
    :disabled input:disabled Selects every disabled <input> element
    :empty p:empty Selects every <p> element that has no children
    :enabled input:enabled Selects every enabled <input> element
    :first-child p:first-child Selects every <p> elements that is the first child of its parent
    :first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
    :focus input:focus Selects the <input> element that has focus
    :hover a:hover Selects links on mouse over
    :in-range input:in-range Selects <input> elements with a value within a specified range
    :invalid input:invalid Selects all <input> elements with an invalid value
    :lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it"
    :last-child p:last-child Selects every <p> elements that is the last child of its parent
    :last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
    :link a:link Selects all unvisited links
    :not(selector) :not(p) Selects every element that is not a <p> element
    :nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
    :nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
    :nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
    :nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
    :only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
    :only-child p:only-child Selects every <p> element that is the only child of its parent
    :optional input:optional Selects <input> elements with no "required" attribute
    :out-of-range input:out-of-range Selects <input> elements with a value outside a specified range
    :read-only input:read-only Selects <input> elements with a "readonly" attribute specified
    :read-write input:read-write Selects <input> elements with no "readonly" attribute
    :required input:required Selects <input> elements with a "required" attribute specified
    :root root Selects the document's root element
    :target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
    :valid input:valid Selects all <input> elements with a valid value
    :visited a:visited Selects all visited links

CSS Pseudo-elements

  • A CSS pseudo-element is used to style specified parts of an element.
  • Syntax : The syntax of pseudo-elements: 
                  
  selector::pseudo-element {
    property: value;
  }
  • EX:
    <!DOCTYPE html> <html> <head> <style> h1::after { content: ' after'; } </style> </head> <body> <h1>This is a heading</h1> </body> </html>

  • All CSS Pseudo Elements

    Selector Example Example description
    ::after p::after Insert something after the content of each <p> element
    ::before p::before Insert something before the content of each <p> element
    ::first-letter p::first-letter Selects the first letter of each <p> element
    ::first-line p::first-line Selects the first line of each <p> element
    ::marker ::marker Selects the markers of list items
    ::selection p::selection Selects the portion of an element that is selected by a user