Thanks to content management systems such as WordPress, it is now tremendously easy to create websites, let alone with the help of layout designers such as Divi or Elementor.
You don’t even have to learn to program, you simply install WordPress, a well-designed theme and customize your website at the click of a button.
All the code your website needs to function has already been developed by programmers in HTML, CSS, PHP and JavaScript, you just concentrate on customizing your website and creating content.
But it is also true that anyone who has a WordPress site, at some point might need to alter SOME code.
It is not that you are going to become a web developer, programming in PHP and JavaScript professionally, but knowing the basic HTML and CSS codes, which are the basics of any website, you will have a more complete control of your website, WordPress or whatever it is created with.
As we recently saw the basic HTML that every WordPress user should know, today we will focus on the basics of CSS, with tricks and ideas that will give you the tools to not have limitations when customizing your website.
Where the customization settings of your WordPress theme end, you will have all the potential of CSS to design your website without limitations.
If you found it easy to learn basic HTML, you will love CSS, because the impact on the look of your website will be immediate.
Today you are going to take the most important leap of your life in your relationship with web creation!
But, let’s start at the beginning …
What is CSS?
CSS stands for Cascading Style Sheets. CSS is the language used by web designers to style a web page.
It controls the colors, font styles, backgrounds, column sizes, scalability and all other styles of a web page. Without CSS, web pages are flat, with no appeal and nothing to entice you to view or read them.
CSS is what we use to apply styles to the HTML of a website.
For example, a blog looks very different without CSS:
I think it is clear what CSS is for, isn’t it?
Given this, and the importance of CSS for the web as we know it, in which the appearance, the presentation is everything or almost everything, let’s learn the main elements of it so you can start now to apply styles with CSS.
Selectors, classes and IDs
Selectors
In CSS the basis of everything is the selector, which is an abbreviation that indicates the code to which the style will be applied.
You can point to specific paragraphs in the site with a p {}. (Any code that applies to the selector is enclosed in curly brackets.) In many cases, these element selectors will point to HTML tags that you create your web page with (such as p {} that applies to <p> or h2 {} and <h2>).
Classes
Then we have classes, which are specific types of selectors that you define. For example, if you want to style only the H1 headers of posts you would have something like .post-title {}.
A CSS class selector is identified by a dot or other indicator in front of the selector. They are used to apply to elements throughout the web, but not to base elements like an H1. While we’re at it, notice that the selectors will not have a dot, or other indicators, in front of them, which means they apply to the base HTML.
IDs
CSS IDs work exactly like classes, except for two small differences.
They are preceded by a # symbol in front of the selector, and that their name is given by a very specific, unique or very limited instance of an element that needs some special styling. For example #contact-form {} or #subscription-box-end-of-posts {}.
These IDs indicate that, instead of applying to an element type, they refer to specific individual elements.
Example of use:
p {
color: red; //Red color in all paragraphs
}
.class {
color: white; //White color in the element type class
}
#id {
color: blue; //Blue color in the specific element id
}Code language: PHP (php)Other selectors
As we are looking at the basics of CSS we are not going to get into more complex selectors, but they do exist.
You can apply pseudo-classes, which can be applied, for example, only when hovering over a link. Or an attribute selector, which will only be applied to elements that have a specific parameter. Also, you can trigger CSS that is relative to the position of an element using p::after or img::before.
It can be incredibly advanced and complex to get it right, so for learning the basics, it’s not something you need to worry about. However, I did want you to know that there are much more specific ways to interact with the HTML document.
Colon and semicolon
I said before that all CSS code goes inside curly brackets, right? But inside these brackets, each line of customization must end with a semicolon (;). This tells the browser that that particular style is complete.
By the way, spaces don’t matter in CSS, except for readability, but the semicolon is mandatory at the end of each customization, yes or yes.
Also, between the CSS style and the value you have to put a colon (:), and again, no spaces matter.
Example of use:
.main-content .article{
font-family: Arial, Helvetica, sans-serif;
}
.main-header{
margin-top: 20vh;
}Code language: CSS (css)Note that, although you can leave spaces, usually the right thing to do is not to do it. Of course, even if there are, then, with the minimizing techniques currently offered by both themes and plugins, all those spaces are removed.
CSS Comments
If you need to include documentation in the CSS code you can do it with comments.
CSS comments are opened and closed with the symbols /* and */ respectively.
Commenting the code is not only important for you, in case you need to review the CSS later to know what each style is for, but also for other developers.
Generally, CSS comments are used to indicate what a particular style customization does.
Example of use:
/* This is a CSS comment */
img {
display: none;
}Code language: CSS (css)It is a good practice to always get into the habit of commenting out your CSS code, as your styles will change over time, so you will always know what each applied style does.
!important
You can’t imagine how common and important the !important tag can be in CSS. It is, in fact, one of the most used, sometimes even overused, elements in CSS.
The !important tag added to any customization line omits any other style for that selector, no matter where it is in the stylesheet.
Thus, if you want to make sure that a particular element always has a particular color, for example, you should use !important to achieve this.
The !important tag should always go between the value and the semicolon, not before.
Example usage:
#comment-title {
color: blue;
}
/* In the following line we omit the default blue color of the comment title and force it to be red with !important */
#comment-title {
color: red!important;
}Code language: CSS (css)display: none;
This CSS element is one of the most important elements that every CSS beginner should learn.
What it does is to make any element to which you apply it disappear. For example, if you need a page to have no header menu, you simply put this code:
/* Remove header navigation menu */
.header-nav {
display: none;
}Code language: CSS (css)Note that, from now on, I will always put comments in the CSS, so you can get used to it.
Doing this with a class that appears on all pages would remove it from the entire site, so be careful.
The most common is to use it only on specific posts or pages, to remove specific elements, such as meta data from posts. For example, with Divi, you can customize the blog module to have no excerpts using this code:
/* Do not display content excerpts in Divi blog modules */
.home-page-blog .post-content {
display:none;
}Code language: CSS (css)visibility: hidden;
Another CSS code you can use to not display an element on the screen is visibility:hidden;, but note the difference between using visibility:hidden; and display:none;.
The display:none; code will completely remove the element from the page, the browser will not render the element, as if you have completely deleted it, whereas with visibility:hidden; the code still loads with the page, but it is not visible. The functionality is there, but the user cannot see it.
This is important, as you should understand that this code should only be used if you need the functionality of something but don’t want it to show, such as a tracking pixel or any other type of element that interacts with other elements on the page but you don’t want it to be visible.
Example of use:
/* Hide Facebook pixel */
#fb-tracking-pixel {
visibility:hidden;
}Code language: CSS (css)Margin and padding
It is quite common to make a mistake at the beginning of learning CSS with margins (margin) and padding (padding), they seem the same, but once you know them well you will see that they are totally different.
Margin
Margin is the space around an element. It is invisible and transparent, and can even be negative.
A larger margin on the left pushes the element to the right, a larger margin on top pushes the element to the bottom.
A negative margin does the opposite. For example, a negative top margin will pull the element up.
Padding
The padding limits the size of the element. A padding on the left will enlarge the background of the element on the left.
There is no negative padding.
Example usage:
When using these codes you can use as units pixels (margin:12px) or viewport (padding:1vw) for even spacing around the selector.
You can also use margin-top, margin-left, margin-right or margin-bottom to affect only that side and have different levels each. The same for padding, with padding-left, and so on.
/* h2 headers with 25 pixel bottom margin and 15 viewport left padding */
h2 {
margin-bottom:25px;
padding-left:15vh;
}Code language: CSS (css)Colors
Changing the colors of some elements is almost certainly the first thing you will want to change the first day you have a website.
With CSS you can define a color in two ways.
The most common way is to use 6-digit hexadecimal codes, like #ffffff for white or #000000 for black, for example. With hexadecimal codes you can define any RGB color, and you don’t have to learn them by heart, it would be impossible, there are lots of tools to get them.
The other way is to use a predefined word for a color. The basic colors, like blue, yellow or red are already predefined (in English), and you can use them without having to remember their hexadecimal codes. But if you need colors other than the main ones, then you have to resort to hexadecimal codes.
How to use color codes
When it comes to using color codes there are several ways to do this.
For example, if you want to change the color of all text simply use color:#black and any text within the selector will be changed to the one you specify. You can do the same with headings, type H1 or H2.
Example of use:
/* white text color and black background color in paragraphs */
p {
color:white;
background-color:#000;
}
/* H3 border in dark blue and background in green */
h3 {
background:green;
border: #001ddf;
}Code language: CSS (css)Changing things like background-color:red; or background:green; of an element is just as easy.
You can also use color:#000; values for a:hover type selectors that will change the color of links when you hover over them, or border:blue; to put a colored border around any element.
Typographies
Another very common element that you will want to change almost as soon as you create your website will be the fonts, the fonts or typefaces used in different parts of your website.
Sometimes your WordPress theme will allow you to customize and change them, but almost always there will be a selector that you will want to customize to your liking … and there will not be a button to change just that font.
Here, again, CSS comes to the rescue, because changing fonts with CSS is very easy, and you only need to know – to start with – two fundamental CSS codes: font-family and font-size.
Example of use:
/* Paragraph font change to Verdana in 20 pixels */
p {
font-family: verdana;
font-size: 20px;
}Code language: CSS (css)How to add or modify CSS in WordPress?
Once you’ve learned the basic CSS codes you’ll want to apply them, right?
WordPress customizer Additional CSS
In WordPress you have several ways to apply your knowledge, and the first one is the customizer. Just go to your WordPress administration and access Appearance → Customize → Additional CSS to start applying your custom CSS codes. Any CSS code you add will be applied by overriding the existing theme CSS styles, and if not, you can always add !important.
Just start writing your CSS code in the box you will find.
This customizer has some features that will help you when writing CSS, such as automatic line numbering, automatic closing of square brackets or warning of code errors.
WordPress Theme Editor
Another place where you can modify or add CSS code is in the WordPress built-in theme editor.
Once there simply select the theme, then the file to edit, which normally the main one will be style.css, and start applying your custom CSS.
Here you should always be careful not to directly modify the CSS of the main active theme, because when you update the theme the modifications will be lost.
The way to avoid this is to create a child theme and edit the CSS there. But my advice is to always use the customizer, as we have seen before, there it is safe to apply CSS changes, they will not be lost when you update the theme and you don’t have to create a child theme.
Inline CSS
Another way to add CSS code is to do it embedded in the HTML, which is known as inline.
Basically what is meant by this term is that the CSS is written inside the specific HTML to which it will be applied.
This is especially useful when you want to apply some CSS customization not to a selector type, not even to a specific selector, but to a specific and unique instance of an element.
For example, if you want a specific paragraph of text to have a different color than the one defined by the CSS, you can edit it as HTML and add the embedded CSS, inline.
<h1 style="color: white; text-align: center;">Different header from the others</h1>
Code language: HTML, XML (xml)Code editor
Even if you normally use the WordPress customizer to customize your CSS I recommend that you always have on hand and start getting used to using a code editor.
My favorite is Visual Studio Code, available for free for all operating systems, but there are many, both free and paid.
These code editors go far beyond a simple box to write code, they offer generic and even WordPress-specific code help, all kinds of programming languages, code debugging tools, organization by projects, everything a professional programmer needs, but easy to use also for the beginner.
To modify or add CSS with your own code editor you first have to access the file to edit using an FTP application.
To summarize
Although we have already seen that HTML is the basis of the web, only when you learn CSS you will see the infinite possibilities of customization to which you will have access, without depending on your WordPress theme or any layout designer.
CSS code is very satisfying because you see the results instantly, that add value and design to your website, and that with very little effort and some basic knowledge can allow you to jump right into web design, to continue learning and improving, at your own pace.
Want to continue learning CSS?
Want to learn more values that you can change on your website? Here you have an essential link to continue learning:
