CSS Code, Adding to a WordPress Website

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.

Key Simple Custom CSS into the search plugins box.

Click the Install Now button within the Simple Custom CSS search result.

Using Simple Custom CSS

After Simple Custom CSS has been installed & activated, make sure your WordPress dashboard is open. Go to Appearance > Customize > Additional CSS. Add the CSS code, click the blue Publish button at the top. Then click the tiny X in the upper left-hand corner to close the Customize panel.

If you go to tscsidesleeper.com/, you will see two animations I created for a client. I wanted to have one above the other on the right side of the page. So, I added them into a single-column table.

I wanted the two animated GIFs to be as close together as possible and to have no table borders. So, I used the CSS code in the pink box above.

Add the CSS code to the header

Border code

In 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

Collapsed. 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

Aesthetics is an essential part of web design. Aligning the cell content uniformly is an important aesthetic concept to follow. So, you must use terms liketop, 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.

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.