Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login

You must be logged to download. Click here to login


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Wordpress CMS: How to edit PHP, HTML and CSS

In this article I will discuss about the editing part of the WordPress content management system which consists of PHP, CSS and HTML.

PHP (Php-Hypertext Preprocessor), CSS (Cascading Style Sheet), HTML (Hypertext markup language) all are interrelated with the Software development as well as Webpage Development. HTML is used for design the page and CSS is used to give the design style of the page. PHP is also used for database programming or event driven programming for creation of dynamic webpage.

The WordPress is a Content Management System. Normally it is written in php coding but PHP coding also use CSS and HTML. At the time of creation of normal Page with Table, Frame and other part is created via HTML coding. This types of coding is very easy way to set out WordPress Page, just remember some tag like <table>, <head>, <title>, <body>, <img src>, etc. On the other hand if we wish to define these types of tags then we think about the CSS (Cascading Style Sheet) because through this CSS (Cascading Style Sheet) we define the tag with our own way. Suppose if we think of same color, font, style we can use different tag, then it is too much complicated for us. So we use CSS (Cascading Style Sheet) through this system and we can easily define more than one tag in a single tag and link with different process.

Brief preamble to HTML (Hypertext Markup Language):

HTML is like the resources that are going to build a Webpage. So it is the content that makes up a webpage or website by itself without form. We can easily build up a webpage with HTML and it will be entirely usable. Though this process can gently develop a page but it is not more attractive or gorgeous.

Brief preamble to CSS (Cascading Style Sheet):

We know that CSS stand for Cascading Style Sheet. It is like the blueprints that tell the construction team basically how to assemble and build the material. At the time of creating a webpage some question will arise the questions are:

  • How big should the letters be?
  • What about the headings of the page?
  • What color are the links?
  • What do they do when you hover over them?
  • Where should this section of content be located?

These types of questions will be arising when we are developing our Website or Webpage. Suppose that if we want to change the color of the header then select the tag color Green and after some time if the Header is required for next time then it is required to set the color again. To avoid these types of problem we look at the advantages of CSS, or cascading style sheets.

Using Style Sheets

The “blueprints” for a site are retained in a separate file other hand that referenced in the header of each page by including something like this mentioned below.

<link rel="stylesheet" type="text/css" href="">. 

In the stylesheet that we can try to apply the styles to elements directly is the following way:

Listing 1: Showing header color

    color: green;

We can also specify the classes that get used by multiple HTML elements, such as:

Listing 2: Showing class color

    color: green;

Any element tagged as class="green" in our HTML page that will be green. We can also change .green to color: blue through our CSS process and everything with that class in our HTML will now be blue. So it is no doubt that a concept of function that we can implement in our project globally.

If we use the IDs, it also work in a similarly way but it can be applied to only one element and cannot be reused in future program. For that reason we consider that it totally in a non-technical manner For example the code is given bellow:

Listing 3: Showing Ids

#logo {
     font-size: 24px;

This ID process is written like that <h1 id="logo">Welcome to Computer Educational Institution</h1> 20 pixels in size. After using the page we can’t be able to use id="logo" on any other HTML element or other pages.

Specificity & the Cascade

As the name Cascade that implies of the styles in a stylesheet cascade. That means if we write the following code:

Listing 4: Showing cascade effect

h1 {
   color: green;
h1 {
   color: blue;

In the above way, the system of our h1 elements will be blue. The last defined style will take priority. To complicate this slightly, styles that are more specific take precedence, even if they are mentioned earlier in the stylesheet. Generally the elements that like h1 and are the least specific then classes, then IDs.

Listing 5: Showing precedence

.orange {
    color: green;
H1 {
    color: blue;

This would cause <h1 class=" green "> to be green for that reason the classes are more specific than general elements.

To complicate things a bit more we can nest elements, classes and IDs (#logo .green) to deliver more specificity. So we should try to write our stylesheets with the least amount of specificity possible.

Custom CSS

The CSS (Cascading Style Sheet) is the editor which allows the administrator to modify the visual style of our webpages. Different types of themes are present in Word press. This template cannot be modified. The Custom CSS gives us the power to make our own webpage design. If it is impossible to use, then the Template page of the Custom CSS is helpful for us.

The CSS Editor can easily be found under Edit CSS in the appearance menu of our dashboard. It is blank consists of two button.

CSS editor

Figure 1: CSS editor

After the editing we just click on Update file option and it displays the file is edited successfully.

Save option after editing is complete

Figure 2: Save option after editing is complete

We can edit our CSS and show the preview of the changes without affecting the public view of the site while experimenting with new styles. In order to change CSS and publish them to our site we have to acquisitions the Custom CSS upgrade. We can also edit and save our stylesheet as often as we want to make it properly. We can use uploaded Figure s as like that of backgrounds. After that we can also modify an existing theme or start from scratch with the Sandbox theme.

Brief Intro to WordPress

At the time of creation of normal webpage we must use manual coding procedure but this manual webpage design is not preferable in modern web technology platform so we are thinking about Content Management System which is very suitable for us.

WordPress and other content management systems provide templates for commonly shared content like the header, footer, blog posts, and so on. Using a programming language that are generally called PHP, WordPress pulls page content from a database and also adds it to the templates as well as compiles it into HTML dynamically when someone tries to access it.

Point should be remembered that we update and share content once instead of repeatedly.

Word Press with CSS:

WordPress Themes are used with combination of templates , tags and CSS files to develop our website. For generating the site we must follow the following process:

Template Files Template files are the building blocks which come together to create our web site. It is made through the Theme structure, the header part; sidebar, content and footer are all contained within individual files. We join together to create our page. This allows us to customize the building blocks.
Template Tags The Template tags are the bits of code which are provided to instructions and requests for information and stored within the WordPress database. Particular of these are highly configurable and allowing us to customize the date, time, lists, and other elements which is displayed on our website. We can know more about template tags in Stepping Into Template Tags.
Stylesheet The CSS file is where it combines together. On every template file within your web site there are HTML elements wrapped around your template tags and content. In the stylesheet each Theme has rules to control the design and layout of each HTML element. Without these instructions the page would simply look like a long typed page. Through these instructions we can move the building block structures around and making our header very long and filled with graphics or photographs it is very simple and narrow. Our site can "float" in the middle of the viewer's screen with space on the left and right to spring across the monitor by filling the whole page. Our sidebar can be on the right or left, or even start midway down the page.


PHP, HTML, CSS all are interrelated with each other for the time of the creation of gorgeous Webpage design. Now we know that these three parts are used for different process. In the first process PHP is used for dynamic coding of the pages or we can set database programming through the PHP coding. Second part is that HTML is also responsible for the time of creating design with HTML format like table, frame etc. After that Cascading Style Sheet plays a vital role for every design part of the Webpage through the CSS we define the tag as per our choice which we are already defining as above. So it is clear that the WordPress is a part of Content Management System (CMS) but Coding part is required for us that coding part is fulfilled after knowing the PHP,HTML and CSS.

See also

Website: Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!

> More info about MrBool Credits
You must be logged to download.

Click here to login