CSS Styling Components

Previous Next

1. Styling Tables

CSS can enhance the appearance of HTML tables by adding borders, padding, hover effects, and background colors.

Example: Styled Table

<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background-color: #f2f2f2;">
      <th style="border: 1px solid #ccc; padding: 8px;">Name</th>
      <th style="border: 1px solid #ccc; padding: 8px;">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ccc; padding: 8px;">Alice</td>
      <td style="border: 1px solid #ccc; padding: 8px;">25</td>
    </tr>
    <tr style="background-color: #f9f9f9;">
      <td style="border: 1px solid #ccc; padding: 8px;">Bob</td>
      <td style="border: 1px solid #ccc; padding: 8px;">30</td>
    </tr>
  </tbody>
</table>

Name	Age
Alice	25
Bob	30

2. Styling Forms and Inputs

You can use CSS to style input fields, labels, and layout to improve the look and user experience of forms.

Example: Styled Form

<form>
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name" style="padding: 8px; width: 200px; border: 1px solid #ccc;"><br><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" style="padding: 8px; width: 200px; border: 1px solid #ccc;">
</form>

3. CSS Buttons

CSS allows you to style buttons with colors, borders, hover effects, and padding for better usability.

Example: Styled Button

<button style="background-color: #4CAF50; color: white; padding: 10px 20px; border: none; cursor: pointer;">
  Click Me
</button>

4. CSS Images and Image Effects

Images can be styled using CSS to change size, borders, shapes, and effects like hover or grayscale filters.

Example: Styled Image with Hover Effect

<img src="~/images/sampleimg.jpg"
     style="width: 150px; border-radius: 10px; transition: 0.3s;"
     onmouseover="this.style.filter='grayscale(100%)'"
     onmouseout="this.style.filter='none'">

If you have any questions, feel free to ask. Thank you for reading!

Previous Next

If you have any query or question, please contact through below form. Our team will be in touch with you soon.

Please provide your valueable feedback or suggession as well.