Custom CSS (Cascading Style Sheets) in WordPress.
As you can see on this page, I have already made changes in the “look and feel” of this page by making changes to an area called “Additional CSS”. This is easily accessible by going into the WordPress Desktop. However I find making changes here bit tricky. More on that later.
Every WordPress install has a “Theme” and each theme has a style, such as layout, font types, font sizes and colors. To find these, you have to go into a site editor such as cPanel – File Manager, or you have to use FTP to get into your website structure.
Here is a screenshot taken after cPanel – File Manager was opened, showing the location of the Theme “Twenty Ten” and its style sheets.
Downloading and studying them in an editor is acceptable, however altering them to customize your website style is not advised. The complexity of these Style Sheets is high. Note: Every time you update your Theme your changes will be overwritten, and you will lose all your work.
What I have found is that WordPress applies “styles” in several layers. First is uses the Theme Style Sheets. Next it looks at Child Style Sheets (if a developer has created them) Then it looks at CSS applied in the Custom CSS area called “Additional CSS”, then in the individual Block CSS settings and finally it looks at HTML tags style information inside HTML blocks.
The first “safe” area to experiment with CSS is the “Additional CSS” panel. To get there you will have to login as the website administrator. You can find it on the “Dashboard” under “Appearance” – “Customize” – “Additional CSS”. In my WordPress site I have added a series of statements shown below.
img {
max-width: 100%;
height: auto;
}
body.page{
background-color: #DCDCDC;
}
div#wrapper {
background: #DCDCDC ;
}
.page-id-320 #content h1{
color: #65000f;
}
.page-id-320 #content h2{
color: red;
}
.page-id-320 #content p{color:blue}
.page-id-320 #content p{font-family: “pt sans pro”, helvetica, sans-serif;font-size:30px}
The first statement “img{}” was written to fix a problem with image uploads being distorted in the default installation of WordPress. I had to do a internet search to find this solution. The second statement “body.page{}” is to make my page backgrounds light grey. The third statement “div#wrapper{}” is to make the borders and other areas around the page the same color. These statements alters the color from stark white to more pleasant light grey. The statements that start with “.page-id-320” are specific to this particular page only.
This “Additional CSS” area is a great place to experiment with additional CSS for your web pages.
In this example I am going to try to alter some of the styles for this specific page. Each page in WordPress has a unique identifier. You can find it by right clicking the web page and selecting “Inspect(Q)” in the Firefox web browser. The same for Google Chrome or Microsoft Edge web browsers. Look for the <body class ….> tag. Inside this long tag, on the right hand side you will see a unique WordPress page identifier such as, in this case, “page-id-320”
Testing header H2
Some “inline” style statements (font-family: “Brush Script MT”, helvetica, sans-serif;) This style statement implements first the Brush Script MT font. However if it is not available it will substitute the helvetica font and if that is not available the very standard sans-serif font.
<p style=”font-family: arial;font-style: italic;font-size:44px; line-height:50px”> implements a large (44 pixel size) arial font in italic style and because the font itself is so large a line height of 50 pixels in order for the fonts not to overlap in subsequent lines.
<p>Custom CSS (<u style="color:red;">Cascading Style Sheets</u>) in WordPress. </p>
The line above was used in the first sentence on this page. It was used in a HTML block. The part inside the <u bracket styles the string “Cascading Style Sheets” with an underline and changes the color inside the longer string to red. WordPress gives precedent to the styling information in the final HTML string on the web page, ignoring all previous style sheets embedded in the theme or “Additional CSS” sections.
Here is some useful style information embedded in the paragraph tag. This style information is executed last, so it trumps all other CSS style instructions. <p style="font-family: georgia;font-style: italic;font-size:18px;line-height:25px">