CAll Us: +1 888-999-8231 Submit Ticket

A Beginners Guide to WordPress CSS

You want your WordPress website to look great on every device and for every visitor but your out-of-the-box WordPress theme only gets you about 90% of the way there.

There are still a few things you’re concerned about — things that CSS could help you fix.

This beginner’s guide to WordPress CSS will give you a walk-through on how to edit CSS in WordPress to help you build a more beautiful, intuitive, and better-performing website. Most CSS classes for WordPress would take you through these same steps.

An Introduction to WordPress Editing

When using WordPress, you can customize CSS using one of three different editors that the service provides. 

Visual Editor

The visual editor is a post and page edit feature of the platform. It has been described as WYSIWYG (what you see is what you get). That means everything on the page, as you can see it, is exactly the way it will look to a website visitor.

This is an editor that will allow you to create content without coding. There is a toolbar at the top of the page that is similar to familiar programs like Microsoft Word. You can use the tools found there to alter your text and the appearance of the site. 

There is also an Add Media button which enables you to include images or videos in your post. WordPress plugin developers can also add buttons on your visual editor toolbar to help you create more features and styles for your live site. 

Drag-and-Drop Editor

A Drag-and-Drop Editor is one of the simplest ways to edit your site. It uses an elementary concept as the basis of its platform. You grab something, you pick it up, and you place it somewhere else. 

While drag-and-drop is not a standard WordPress feature, there are several editors that can be installed that will give you this easy-to-use editing platform. 

When using the Drag-and-Drop Editor, you can select an element of your site and drag it to a new location. You effectively drop the element in the desired location. If you’re unhappy with how that looks, you can start over again and move it somewhere else. 

Theme Editing

Theme editing refers to your ability to edit the theme or template of your WordPress website. 

There are two different kinds of themes that you would edit: Parent Theme and Child Theme. The Parent Theme is a full and complete WordPress theme, with all of the proper elements in place. A Child Theme has the look and feel of its Parent Theme, but it can be modified. 

The way you will edit your CSS WordPress theme differs based on which theme you’re using. Visual themes use the Visual Editor while drag-and-drop themes use the Drag-and-Drop Editor. 

For more on editing your WordPress theme, check out “Understanding the WordPress Theme Editor.”

What Does CSS Mean in WordPress?

Your WordPress website is built with a variety of languages including HTML, PHP, CSS, and MySQL. 

For now, we’re going to focus on HTML/CSS.

HTML acts as the content structure for your website (text, images and other media, hyperlinks, etc.) and CSS dictates how that content looks (e.g., colors, fonts, positioning of elements, margin, and padding). 

Let’s use a quick example. 

A simple line of text in HTML might use a <span> tag. But to change the visual characteristics you must use CSS. The <span> only defines the content, not how it should look. 

Here are some examples of visual properties we could change with CSS.

  • Font color
  • Font size
  • Font family
  • Background colors

Imagine it like a house. HTML represents the rooms, layout, and architecture. CSS represents the paint, choice of trim, and flooring. 

CSS gives the house its “look.” Every house has floors, rooms, and walls, but how you paint and arrange those floors, rooms, and walls is what makes the house uniquely yours. CSS can be used to add elements or take others away. You can hide page titles on WordPress with CSS.

Where Do I Find CSS in WordPress?

To find the CSS files for your WordPress theme, look under Appearance then select Editor and select the file marked style.css. 

From this window, you can edit the files directly and then Save

An Introduction to CSS Syntax and Selectors

CSS is comprised of style rules that are interpreted by the browser, and then applied to the elements of your document. 

The Parts of a Style Rule

  • Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table>.
  • Property − A property is a particular characteristic of an HTML tag that can be changed. An example of this might be “color” for text elements. 
  • Value − Values are assigned to properties. For example, color property can have value either red or #F1F1F1. View the complete Mozilla CSS reference to view all properties and possible values for each property.


The syntax of CSS is a series of rules consisting of a selector and a declaration block. 

The selector block points the code toward an HTML element. The declaration block changes the property of that selector based on a series of values. 

selector { property: value }

To add more rules (as many as you want), it is standard practice to give each property, value, and declaration its own line. That would look something like

selector {
  property1: value;
  property2: value;


There are many different selectors you can identify through syntax in order to change the properties of an HTML element. 

Some of them include:

  • Type selectors
  • Universal selectors
  • Descendant selectors
  • Class selectors
  • ID selectors
  • Child selectors
  • Attribute selectors

How Do I Use CSS in WordPress?

You can use CSS in WordPress to control

  • Color, size, and style of text,
  • Spacing between paragraphs and headers,
  • How images and other media look,
  • How your site looks on different screen sizes, and more. 

1. Control the Color, Size and Style of Text

First, you would want to decide on a HEX or an RGB color value that matches the color you want. You can use a free tool like Canva to see a number of different values for colors on the spectrum.

To target all paragraph tags (<p>) we need to write the CSS rule so that the selector targets those <p> elements.

p {
  color: value-will-go-here;

Let’s pick a nice red out from a color wheel. We’ll use #ea1520. 

That would mean the rule is

p {
  color: #ea1520;

And we’re good to go! 

Add that to your theme stylesheet (style.css) and all the <p> tags should be red once you reload the page.

Now, what if we also want to change the size and the font style adding elements like bold or italics? We just need to write rules for all of those properties on their own lines in the same target above. 

p {
  color: #ea1520;
  font-size: 26px;
  font-style: bold;

The documentation for the font-size and font-style CSS rules can be found on their appropriate documentation pages at

2. Control Spacing Between Paragraphs, Headers, and More

The colors and sizes all look great — but what about the spacing? 

Is everything too cluttered? Or worse, is everything way too far apart and making the website hard for people to navigate?

This is where you want to embrace the use of the margin property. 

The margin is the space around an element, including the top, bottom, left and right. 

If you want more space between headings and the paragraph that comes after them, you would want to increase the bottom margin on that heading tag.

The Mozilla documentation for the margin property has an interactive example that lets you test several margin rules on a particular element to see how it reacts on the page. 

Once you understand the margin property well, let’s write a rule that adds margin-bottoms to every heading.

h3 {
  margin-bottom: 25px;

Now our H3 headings should have at least 25 pixels (px) of empty space below them for all screen sizes.

3. Control How Your Images Look

Through CSS you can affect the placement of your images along with the borders around them, how tall and wide they are, and more. 

Here are some examples of coding that you can use for the borders, scaling, and centering of your images.  

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;

<img src="" alt="Paris">

Image scaling:
img {
  max-width: 100%;
  height: auto;

Image centering:
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;

4. Control How Your Site Looks on Different Devices and Screen Sizes

You’re able to control the look of your site across various devices. That’s important in today’s climate with users accessing web content through their computers, cell phones, and tablets. 

Below is an example of CSS code that can rearrange your page for a device with a maximum page width of 480 pixels. 

@media only screen and (max-device-width: 480px) {
        div#wrapper {
            width: 400px;

        div#header {
            background-image: url(media-queries-phone.jpg);
            height: 93px;
            position: relative;

        div#header h1 {
            font-size: 140%;

        #content {
            float: none;
            width: 100%;

        #navigation {
            width: auto;

How Do I Edit CSS in WordPress?

You can edit CSS in WordPress manually via an FTP client or with the assistance of a plugin.

Adding CSS to WordPress Manually

In order to manually add CSS to WordPress, you’d have to be using a Child Theme which is more malleable than a Parent Theme and can be changed easily. Custom CSS that you add to a Child Theme will override the styles set down by the parent. 

Here’s how to add custom CSS to a Child Theme:

  • Use an FTP client like FileZilla to connect to the site. 
  • Locate the root folder. Usually, it’s called “www” or features your site’s name
  • Once there, navigate to the wp-content/themes directory where you’ll find folders for all of your themes. Select the Child Theme you set up. 
  • Right-click on the file and select View/Edit. The file will open with your text editor. 
  • Add your WordPress custom CSS directly to the theme. 
  • Save the changes and close the editor.

Adding CSS to WordPress With a Plugin

There are a number of plugins that you can use to add additional CSS to your WordPress site or defer unused CSS from WordPress. 

The Top 5 CSS Plugins for WordPress

  1. Yellow Pencil
  2. SiteOrigin CSS
  3. Simple CSS
  4. Theme Junkie Custom CSS
  5. Custom CSS Pro

Using any of these options, you’ll be able to gain access to the backend of your site and add your custom CSS WordPress code. Other plugins are able to complete advanced functions like optimize CSS delivery on WordPress using style.css files. 

In Conclusion

This walk-through to CSS for WordPress provides a simple guide for beginners much like early WordPress CSS classes would. 

With CSS, there’s always more to learn and more exciting ways you can use it. Our recommendation is to start small. For instance, make a simple change to your WordPress theme which defines the color of your footer’s background. If you find your WordPress CSS not updating, go back and re-read these sections to get a better handle on what went wrong. 

If you have any questions along the way, feel free to reach out to our CSS experts!

Source link

Hostdedi Magento Cloud vs. Magento Commerce

One of the misconceptions about Magento is that you have to use Magento Commerce for hosting. Or that they are one and the same thing. Magento Commerce hosting for your Magento store is built by Adobe and includes powerful features (modules) like page building progressive web applications (PWAs). Hostdedi Magento Cloud is hosting for your Magento store with features for professionals like high scalability, staging websites, and PCI compliance.

In this post we’re going to clear up the misconceptions between these two very different platforms.

Magento Commerce was created about two years ago after Magento was sold to Adobe. It’s their official solution for hosting Magento and it has a lot of good things going for it:

  • Magento Commerce includes common functionality for your Magento store
  • They allow progressive web apps (PWA)
  • They have a cloud based infrastructure for scalability

But it’s important to remember that Adobe, even though they own Magento, is the new kid on the block. They’re still learning how to build & optimize the infrastructure needed to power a Magento site.

Building a Solid Infrastructure

Magento Commerce is great at including product features. But they’re still building their entire stack on someone else’s infrastructure. What does that mean?

It means, if you have a problem you first have to bring it to Magento Commerce. And they have their standard Service Level Agreement (SLA) to respond to you. If in that time, they discover a problem with the underlying infrastructure, they’ll submit a ticket to the company that maintains their infrastructure.

So your SLA is built on top of the SLA from another company. That means solving any potential problems could take twice as long. Not great if you have a problem that negatively impacts your store and you lose money every minute it’s not fixed.

Hostdedi Magento Cloud is built on our own infrastructure. Hostdedi has one SLA, and because we own the infrastructure, we can solve all of the problems ourselves and we don’t need to rely on any other companies. This means less finger pointing, more informed support, and faster resolution.


The other big difference between Hostdedi Magento Cloud and Magento Commerce is that we aren’t brand new to this space. Magento was literally built on our servers back in 2007 – before Magento v1 was even released (Magento v1 was officially released March 2008). 

We saw the opportunity of Magento back in 2008 when brick & mortar stores first started moving online to avoid the worst of the Great Recession. We helped brand new stores get started with Magento and we learned a lot about it in the process, like exactly how many PHP workers were needed, what caching systems were most effective, and which Magento settings are worth enabling. We distilled everything we knew to create the very first Magento specific hosting solution. 

We also wrote the book on Magento Best Practices and shaped the Magento community by recommending Nginx instead of Apache (which for a company specializing in LAMP stack is pretty radical). We’ve improved and continued optimizing and put out a new book for Optimizing Magento 2.

Contributing Open Source Libraries

Besides optimizing hosting for lightning fast websites, Hostdedi also created Turpentine which was the first varnish cache for Magento. You can take advantage of this on any hosting that uses varnish. 

We also created security extensions and continue to contribute to Magento core.

Plan for Exploding Growth 

Most hosts, including Magento Commerce, give you a certain number of resources that you must remain within. If you go over a bandwidth threshold you might have to pay more – or if you have too many people on your site at a time, it slows down to a crawl. 

Hostdedi created our first Magento plan during a time when everyone was getting online and then immediately started outgrowing their small plans. We’ve also been around for over a dozen Black Fridays so we’re used to seeing retailers needing extra resources on demand. That’s why we built auto scaling into all of our plans.

If you have a post that goes viral or your Black Friday sales really take off, we have you covered with additional PHP workers which keep your website snappy and your visitors happy.


Adobe Magento Commerce includes a lot of nice product features and it can be easily managed in the cloud. But Hostdedi Magento Cloud is both more established and leads the way with the most efficient & affordable infrastructure you can find.

Source link