What is CSS and how to use it in WordPress

What is CSS?

CSS is short for Cascading Style Sheets. While HTML is used to describe the content of a web page, CSS is used to control how the content is displayed. A single CSS file can be used to control multiple web pages, which allows you to easily update the look of your website.

Styling WordPress

WordPress themes use template files, template tags, and CSS to create the look and feel of WordPress sites. Template files are individual components of a site, such as the header, footer, content, and sidebar. Template files can be created, deleted, and arranged to customize your site. Template tags are short pieces of code in template files that call and display dynamic information stored in the database, such as post author, date, and post category. Your theme’s CSS file, or stylesheet, contains the instructions for how the HTML generated by the template files and template tags will look in a web browser. For example, the size of headers, the font used in linked text, and whether images include borders are all controlled in a CSS file. There are also several WordPress-generated classes used for aligning images, block elements, and captions.

Custom CSS

Custom CSS was introduced in WordPress 4.7. This feature includes a live preview and allows you to safely add CSS to your theme without directly editing the CSS files. To add custom CSS, log in to your WordPress dashboard and go to Appearance Customize, then click Additional CSS.

Enter your custom CSS in Additional CSS. As you add CSS code, the result is previewed on the right. In the example below, we’ve added a CSS class called .note and specified that any HTML element with class=”note” will be displayed with a 2 pixel blue border and 3 pixel padding between the text and left border. When you’re happy with the CSS you’ve added, click Save & Publish.

More information

For more information about CSS and WordPress, see the following:

If you have any questions or need help, you can always contact HostPapa Support by opening a support ticket. Details about how to open a support ticket are here.

Was this article helpful?

  • Was this article helpful ?

  • yes   no

Related Articles

Leave A Comment?