start learning
Image 1
2854

CSS Styling elements

Styling elements with CSS involves applying visual properties to HTML elements to modify their appearance.

Here are some common ways to style elements :


Colors


button {
  background-color: blue;
  color: white;
}


Fonts


p {
  font-family: Arial, sans-serif; /* Set the font family to Arial or sans-serif */
  font-size: 16px; /* Set the font size to 16 pixels */
  font-weight: bold; /* Set the font weight to bold */
  font-style: italic; /* Set the font style to italic */
}

Test

Margins, padding, and borders


div {
  margin: 10px; /* Set the margin to 10 pixels */
  padding: 20px; /* Set the padding to 20 pixels */
  border: 1px solid black; /* Add a 1 pixel solid black border */
  border-radius: 5px; /* Set the border radius to 5 pixels */
}

Test

Width and height


img {
  width: 200px;
  height: 150px;
}


Text formatting

  • Step 1 : In the html editor , Choose the element to style, for example, a <h2>Test</h2> heading.
  • Step 2 : In the CSS code area, Utilize properties like text-align, line-height, and text-decoration to format the text. For example:
  • 
    h2 {
      text-align: center; /* Set text alignment to center */
      line-height: 1.5; /* Set line height to 1.5 */
      text-decoration: underline; /* Add underline text decoration */
    }
    

    Test

    Display and positioning

    
    div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    

    Test


    Transitions and animations

    
    button {
      background-color: blue; /* Set the background color to blue */
      color: white; /* Set the text color to white */
      transition: background-color 0.3s, color 0.3s; /* Add a transition effect for background-color and color */
    }
    
    button:hover {
      background-color: red; /* Change background color to red on hover */
      color: black; /* Change text color to black on hover */
    }
    

  • Step 3 : Paste the css style to your HTML document.
  • Result : When hovering over the <button> element, the background color will transition from blue to red, and the text color will transition from white to black in a smooth animation.
  • Test

    Pseudo-classes and pseudo-elements

  • Step 1 : In the html editor , Identify the element you want to style, such as an <a>Test</a> link.
  • Step 2 : In the CSS code area, Use pseudo-classes and pseudo-elements to style specific states or parts of the element. For example:
  • 
    a {
      color: blue; /* Set the text color to blue */
      text-decoration: none; /* Remove text decoration */
    }
    
    a:hover {
      color: red; /* Change text color to red on hover */
    }
    
    a::before {
      content:  '>> '; /* Add content '>> ' before the link */
    }
    

    Test
    ×