CSS Layout - The display Property-The position Property,How to Style Links in CSS

Todaynews October 10, 2024

 

How to Style Links in CSS



With CSS, links can be styled in many different ways. You can also style links based on their interaction state. Below, we'll cover the four main link states in CSS and show you how to style them.

1. A– Unvisited Link

  • This is the default state for a normal, unvisited link.
  • Example:
    a:link {
  color: blue; /* Default link color */
}

2. A– Visited Link

  • This state applies once the link has been clicked and visited by the user.
  • Example:
    a:visited {
  color: purple; /* Changes color after link is visited */
}

3. A– Hovered Link

  • This state occurs when the user hovers their mouse over the link. Typically used to create an interactive effect.
  • Example:

    a:hover {
  color: orange; /* Changes color when mouse hovers */
  text-decoration: underline; /* Adds underline effect */
}

4. A– Active Link

  • This state applies at the exact moment the link is clicked.
  • Example:

    a:active {
  color: red; /* Changes color when link is clicked */
}



  CSS Layout - The display Property



  • This 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.

  1. 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). Ex : <div>,<h1>..<h6> etc.
  1. Inline Elements : An inline element does not start on a new line and only takes up as much width as necessary. Ex : <span>,<a>, <img>.



Common display Property Values:

  1. display: block;

    • The element takes up the full width available and starts on a new line.
    • Example:
       
      <div style="display: block;">This is a block element</div>

  2. display: inline;

    • The element takes only the necessary width and does not start on a new line.
    • Example:
       
      <span style="display: inline;">This is an inline element</span>

  3. display: inline-block;

    • The element behaves like an inline element but allows setting width and height.
    • Example:
       
      <div style="display: inline-block; width: 100px; height: 50px;">Inline-block</div>

  4. display: none;

    • The element is not displayed at all and does not affect the layout.
    • Example:
       
      <div style="display: none;">This is hidden</div>

  5. display: flex;

    • Turns the element into a flexible container, allowing its children to be laid out in a flexible way.
    • Example:
       
      <div style="display: flex;">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

  6. display: grid;

    • Turns the element into a grid container for arranging its children in rows and columns.
    • Example:


      <div style="display: grid; grid-template-columns: 1fr 1fr;">
    <div>Column 1</div>
    <div>Column 2</div>
</div>

  7.  run-in

    • Description: Displays the element as either block or inline, depending on the surrounding context.
    • Example:
       
      <div style="display: run-in;">This is a run-in element</div>
    • Effect: The element will behave as either inline or block, depending on the elements around it.

    8. table

    • Description: Makes the element behave like a <table> element.
    • Example:
       
      <div style="display: table;">
  <div style="display: table-row;">
    <div style="display: table-cell;">Cell 1</div>
    <div style="display: table-cell;">Cell 2</div>
  </div>
</div>
    • Effect: The element behaves like a table with rows and cells.

    3. table-caption

    • Description: Makes the element behave like a <caption> element (table caption).
    • Example:
       
      <div style="display: table-caption;">This is a table caption</div>
    • Effect: The element behaves like a table caption at the top of a table.

    4. table-column-group

    • Description: Makes the element behave like a <colgroup> element, which defines a group of columns in a table.
    • Example:
       
      <div style="display: table-column-group;">
  Column group
</div>

    5. table-header-group

    • Description: Makes the element behave like a <thead> element (table header).
    • Example:
       
      <div style="display: table-header-group;">
  Header group
</div>

    6. table-footer-group

    • Description: Makes the element behave like a <tfoot> element (table footer).
    • Example:
       
      <div style="display: table-footer-group;">
  Footer group
</div>

    7. table-row-group

    • Description: Makes the element behave like a <tbody> element (table body).
    • Example:
       
      <div style="display: table-row-group;">
  Row group
</div>

    8. table-cell

    • Description: Makes the element behave like a <td> (table cell).
    • Example:
       
      <div style="display: table-cell;">
  Cell 1
</div>

    9. table-column

    • Description: Makes the element behave like a <col> (table column).
    • Example:
       
      <div style="display: table-column;">
  Column
</div>

    10. table-row

    • Description: Makes the element behave like a <tr> (table row).
    • Example:
       
      <div style="display: table-row;">
  Row 1
</div>

    11. none

    • Description: Completely removes the element from the display, making it invisible and removing it from the DOM layout.
    • Example:
       
      <div style="display: none;">
  This element will not be shown
</div>



 ▶CSS Layout - The position Property



he position property in CSS is a crucial aspect of layout design, allowing you to control the positioning of elements on a webpage. It specifies how an element is positioned in relation to its normal position or its containing block. Here’s an overview of the different values for the position property and their functionalities:

1. static

  • Default value: All HTML elements are positioned static by default.
  • Behavior: Elements are placed according to the normal document flow. The top, right, bottom, and left properties do not affect a statically positioned element.
 
.example {
  position: static; /* Default */
}

2. relative

  • Behavior: The element is positioned relative to its normal position in the document flow. You can use the top, right, bottom, and left properties to adjust its position.
  • Effect: Other elements are not affected by the adjustment; they remain in their original positions.
 
.example {
  position: relative; /* Positioned relative to its normal position */
  top: 10px;          /* Moves the element down by 10 pixels */

}
3. absolute
  • Behavior: The element is positioned relative to its nearest positioned ancestor (an ancestor with a position of relative, absolute, or fixed). If there is no such ancestor, it is positioned relative to the initial containing block (usually the <html> element).
  • Effect: It is removed from the normal document flow, meaning that it does not affect the position of other elements.
 
.example {
  position: absolute; /* Positioned relative to the nearest positioned ancestor */
  top: 50px;          /* Moves the element down by 50 pixels */
  left: 20px;         /* Moves the element right by 20 pixels */
}

4. fixed

  • Behavior: The element is positioned relative to the viewport (the browser window). It remains fixed in that position even when the page is scrolled.
  • Effect: Like absolute, it is removed from the normal document flow.
 
.example {
  position: fixed; /* Fixed to the viewport */
  bottom: 0;      /* Sticks to the bottom of the viewport */
  right: 0;       /* Sticks to the right side of the viewport */
}

 

 

Example Usage

Here’s a simple example of how you might use different positioning values:

 
<html>
<head> 
    <title>CSS Position Example</title>
    <style>
        body {
            height: 2000px; /* Make the body tall for scrolling */
        }
        .static {
            position: static;
            background: lightblue;
            padding: 10px;
        }
        .relative {
            position: relative;
            top: 20px;
            background: lightgreen;
            padding: 10px;
        }
        .absolute {
            position: absolute;
            top: 50px;
            left: 50px;
            background: lightcoral;
            padding: 10px;
        }
        .fixed {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: lightyellow;
            padding: 10px;
        }
        .sticky {
            position: sticky;
            top: 0;
            background: lightpink;
            padding: 10px;
        }
    </style>
</head>
<body>

    <div class="static">Static Element</div>
    <div class="relative">Relative Element</div>
    <div class="absolute">Absolute Element</div>
    <div class="fixed">Fixed Element</div>
    <div class="sticky">Sticky Element</div>

</body>
</html>
Todaynews

Posted by Todaynews

Post a Comment

0 Comments

Post a Comment