Home Tutorials Videos Q&A MCQ Shortcuts Exercises Appointment Login
Lesson 37 of 50
74% Complete
74%

HTML and CSS in WordPress

HTML and CSS are important technologies for customizing WordPress websites. HTML defines the structure of webpage content, while CSS controls its appearance, including colors, spacing, fonts, borders and responsive layouts.

Learning Objective: Understand how HTML and CSS work in WordPress, add custom HTML blocks, style website elements, use CSS classes and IDs, and customize a website safely.

1. What Is HTML?

HTML stands for HyperText Markup Language. It is used to structure webpage content using elements such as headings, paragraphs, links, images, lists and buttons.

Example: HTML Code 
<h1>Welcome to Our Institute</h1>

<p>We provide professional computer courses.</p>

<a href="/courses/">View Courses</a>

This code creates a heading, a paragraph and a link.

2. What Is CSS?

CSS stands for Cascading Style Sheets. It controls the visual presentation of HTML elements.

Example: CSS Code 
h1 {
    color: blue;
    font-size: 36px;
}

p {
    color: #333333;
    font-size: 18px;
}

The heading becomes blue and 36 pixels in size. Paragraph text becomes dark gray and 18 pixels in size.

3. Difference Between HTML and CSS

HTML CSS
Defines webpage structure. Controls webpage appearance.
Creates headings and paragraphs. Changes fonts, colors and spacing.
Creates links and images. Styles links and images.
Uses elements and attributes. Uses selectors and declarations.
Example: <h1>Hello</h1> Example: h1 { color: red; }

4. Where Can You Use HTML in WordPress?

WordPress allows you to add HTML in different places depending on your theme, editor and permissions.

Custom HTML Block
Add a Custom HTML block in the WordPress block editor to insert supported HTML markup into a post or page.
Theme Templates
Developers can use HTML markup in theme template files to control how website content is structured.
Widgets and Blocks
Some themes and widget areas allow HTML or custom markup through supported blocks and controls.
Custom Plugins
Developers can create plugins that output HTML for reusable features such as forms, notices or content sections.

5. Add HTML Using the Custom HTML Block

Step-by-Step Instructions
  1. Log in to the WordPress dashboard.
  2. Open an existing page or create a new page.
  3. Click the plus (+) button to add a block.
  4. Search for Custom HTML.
  5. Add the Custom HTML block.
  6. Enter your HTML code.
  7. Preview the page if the option is available.
  8. Save or publish the page when ready.

Example HTML for a Business Page

HTML Code 
<section>
    <h2>Welcome to Soopro Pathshala</h2>

    <p>
        Learn computer skills and programming
        with practical training.
    </p>

    <a href="/courses/">Explore Our Courses</a>
</section>

6. Where Can You Add Custom CSS?

The method for adding CSS depends on your WordPress theme.

Common CSS Locations
  • Classic themes: Appearance → Customize → Additional CSS, when available.
  • Block themes: Some themes offer styling options in Appearance → Editor. Custom CSS options vary by theme and setup.
  • Child theme: Use the child theme's stylesheet for persistent custom styles.
  • Custom plugin: Developers can enqueue a stylesheet for plugin-specific features.

7. Example: Change the Heading Color

Suppose you want to make the main heading blue. You can use a CSS selector to target the heading.

CSS Code 
h1 {
    color: blue;
}

This rule targets all h1 elements matched by the stylesheet. If you want to change only one particular heading, use a suitable class or ID instead.

8. Understanding CSS Selectors

A CSS selector identifies the HTML elements that should receive a particular style.

Selector Example Purpose
Element p Selects matching paragraph elements.
Class .course-card Selects elements with the course-card class.
ID #main-heading Selects the element with that ID.
Descendant .content-box p Selects paragraphs inside matching content boxes.
Hover a:hover Applies styles when a link is hovered over.

9. Use a CSS Class in WordPress

Classes are useful when you want to style multiple elements consistently. You can assign a class through the block's settings when the editor supports it.

HTML Example 
<div class="course-card">
    <h2>Web Development</h2>
    <p>Learn HTML, CSS and JavaScript.</p>
</div>
CSS Example 
.course-card {
    background-color: #f0f8ff;
    border: 1px solid #0d6efd;
    padding: 20px;
    border-radius: 10px;
}

.course-card h2 {
    color: #0d6efd;
}

.course-card p {
    color: #333333;
}

10. Use an ID in HTML and CSS

An ID identifies a particular element in a document. IDs should be unique within the page.

HTML Example 
<h2 id="main-heading">
    Our Popular Courses
</h2>
CSS Example 
#main-heading {
    color: green;
    text-align: center;
    font-size: 30px;
}

11. Create a Button Using HTML and CSS

You can combine HTML and CSS to create a styled link that looks like a button. In this example, the button opens a courses page.

HTML Code 
<a class="course-button" href="/courses/">
    View Courses
</a>
CSS Code 
.course-button {
    display: inline-block;
    background-color: #198754;
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
}

.course-button:hover {
    background-color: #146c43;
    color: white;
}

12. Responsive CSS in WordPress

Responsive CSS helps a website adapt to different screen sizes. Media queries let you apply styles under particular viewport conditions.

Responsive CSS Example 
.course-card {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .course-card {
        max-width: 600px;
        margin: 0 auto;
    }
}

This example keeps the card within its container and limits its width on wider screens. Test your layout at several viewport sizes to ensure it works as intended.

13. Important Rules When Customizing WordPress

Best Practices
  • Back up your website before making major changes.
  • Test CSS changes on a staging site when possible.
  • Use a child theme when modifying a classic theme's files.
  • Avoid editing WordPress core files.
  • Use meaningful class names.
  • Check the mobile layout after styling changes.
  • Use valid HTML and CSS.
  • Do not add untrusted or unnecessary scripts to a page.

14. Common Problems and Solutions

Problem Possible Solution
CSS changes do not appear. Check the selector, stylesheet location and browser or caching plugin cache.
HTML markup is displayed as text. Check whether the code was entered in a code or preformatted block instead of a Custom HTML block.
Styles affect too many elements. Use a more specific class selector.
Design breaks on mobile. Check widths, spacing, image sizes and media queries.
HTML or script content is removed. Check user permissions, editor sanitization and applicable security restrictions.

15. Practical Assignment

Activity: Create a Styled Courses Section

Use a WordPress test page to complete these tasks:

  1. Add a Custom HTML block.
  2. Create a heading named "Our Popular Courses".
  3. Add three course descriptions.
  4. Assign a CSS class named course-card to your course sections.
  5. Style the cards with a background, border and padding.
  6. Change the heading color.
  7. Add a styled link to your courses page.
  8. Use a media query to adjust the layout for wider screens.
  9. Preview the page on desktop and mobile sizes.
  10. Save the page and verify that all links work.
Complete the exercise on a test page. Your theme may provide different CSS controls, and some HTML or script content may be restricted by WordPress permissions.

Lesson Summary

  • HTML defines webpage structure and content.
  • CSS controls colors, fonts, spacing and layout.
  • The Custom HTML block lets you add supported HTML to pages.
  • CSS can be added through theme-supported settings, child themes or plugins.
  • Classes and IDs help target particular elements.
  • Media queries help create responsive designs.
  • Use supported customization methods and avoid editing WordPress core files.

Lesson 37 Quiz

Choose the correct answer for each question.

Q1. What is the main purpose of HTML?
Q2. Which CSS selector targets a class named course-card?
Q3. What is the purpose of a CSS media query?

← Previous Lesson Next Lesson →