CSS Code, Adding to a WordPress Website

(Last Updated On: July 4, 2017)

Add a custom CSS plugin

To start adding your CSS code to the header, make sure you have the right plugin.

  • Open WordPress dashboard.
  • Click Plugins > Add New.
  • Simple Custom CSS search resultKey Simple Custom CSS into the search plugins box.
  • Click the Install Now button within the Simple Custom CSS search result. 

Add the CSS code to the header

Border code

CSS code to make table linesIn the box to the right is a sample of CSS code.  The Simple Custom CSS plugin will insert this CSS code into the header.  That causes every table on the website to have 1 pixel-wide black borders around the entire table and around each cell.  Adjoining borders will be combined so that there are no double lines.

This style will add borders to all of the

  • Tables in the website (table),
  • To the cell headings (th) and
  • The data cells (td).

The border attributes determine that the borders will be

    • 1 pixel wide
    • Solid
    • Black
    • Table border collapseTable with double linesCollapsed.  I.e., they will be on top of each other.  For instance, two adjacent cells will have their borders in the same space as opposed to having 2 parallel lines.

The sample above on the left has parallel lines for adjacent borders.  The sample on the right has the same lines collapsed.

Vertical alignment code

Vertical alignAesthetics is an essential part of web design.  Aligning the cell content uniformly is an important aesthetic concept to follow.  So, you must use terms like top, middle or bottom in you CSS code.

Copy and paste this code into your header:

img.top {
    vertical-align: text-top;
}

Code for aligning within cell

Modify this code for aligning the data within the cells left, right or center.

<style>
td{
text-align:left;
}

Padding between data and border

If you text is flush against the border, it usually looks unprofessional.  So, add this code to your header:

td {
    padding: 15px;
}

This example is 15 pixels.  Change the padding to whatever number would look best.

Adding the CSS code to WordPress

  • Open the WordPress dashboard for the website with which you are working.
  • Click on Plugins > Installed Plugins.
  • Scroll down to Simple Custom CSS and
  • Click Add CSS.
  • Add the code below to the bottom of the code that is already there.
    <style>
      table, th, td {
          border: 1px solid black;
          border-collapse: collapse;
       }
    </style>
  • Click the blue Update Custom CSS button.
  • You are finished with the table border code.

More information about CSS code

For more detailed information, go to the W3Schools website.  If there is ANYTHING you want to know about HTML, CSS, etc., simply key w3schools plus your specific area of interest into a search engine window.  For instance, I wanted to know more about coding for table attributes.  I simply keyed w3schools table into a Google window.

 

 

 


Peter Enns has been developing websites since 1996. He is a social media blogger and author of the free YouTube video-creation tutorial called 7 Day YouTube.

tweets

Leave a Reply

Your email address will not be published. Required fields are marked *