Everyone who has a website runs into a situation where they need to alter a coding line, a style, a color, or space. That isn’t mean that you need to be a web developer, writing out JavaScript and PHP functions like a pro. Moreover, you will need to tinker with HTML and basic CSS, the fundamentals of any webpage, WordPress or not. In this article, you’ll learn some basic website CSS coding tips & tricks that every website owner needs to know.
CSS (Cascading Style Sheets) dictates your website’s layout and visuals — colors, fonts, margins, sizes, etc. With a few CSS basics, you can change the appearance of all your pages and posts or hone in on individual pieces and make one-off changes.
Understand the Role of CSS in Web Design
Before diving into the tips, it’s important to understand what CSS is and why it’s crucial. CSS is responsible for how your website looks. While HTML structures the content, CSS styles it. For example, when you choose colors, fonts, layouts, or animations for your website, CSS is at play.
Understanding this basic premise is key because it allows you to make simple yet impactful tweaks to your website’s design without needing to rely on a developer for every small change. The good news is that you don’t need to be a programming whiz to implement CSS basics!
<link rel="stylesheet" href="styles.css">
Use External Stylesheets for Cleaner Code
One of the most common mistakes website owners make is placing their CSS code directly within HTML files. While this approach can work for small websites, it quickly becomes messy as your website grows. By using external stylesheets, you keep your HTML clean and make it easier to manage design updates across multiple pages.
An external stylesheet is a separate CSS file that you link to your HTML document. This approach allows you to apply uniform styles across your entire site. It also helps with page load speeds, as the browser can cache the stylesheet, leading to faster rendering times for your visitors.
Selectors, Classes, and IDs: Best CSS Basic Tips & Tricks
In CSS, the basis of everything is a selector. Simply put, it’s an abbreviation that tells the code what to target. You can target all the individual paragraphs on the site with a p {}. (Any code that applies to the selector between curly braces.) In many cases, these element selectors will line up to the HTML tags you build the webpage with (such as p {} targeting <p> or h2 {} and <h2>).
After that, you have classes. These are specific types of selectors that you (or your theme/WP itself) define. If you want to target only the H1 headings for posts. In addition, you might have .post-title {}. A CSS class selector is by the dot/period in front of the selector itself. These are used to target site-wide elements, but not the foundational elements such as a simple H1. Note that base selectors don’t have a dot or other indicator, meaning they are the base HTML.
IDs in CSS work the same as a class. So, except for two minor differences. A # indicates them in front of the selector, and they are named for a single, specific instance.
Class:
.btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
text-align: center;
border-radius: 5px;
}
IDs:
#header {
background-color: #333;
color: white;
padding: 20px;
}
How To Add Basic CSS On Your Site?
If you don’t have much (or any) CSS experience, that’s fine! You can accomplish a lot with a basic understanding of the fundamentals using CSS basic website tips & tricks. Moreover, with Jetpack’s Custom CSS feature, you won’t need to worry about modifying theme files or breaking your website.
- Firstly, on Visualmodo WordPress themes go to WP > Dashboard > Visualmodo > Theme Options > Custom Codes > CSS.
- Secondly, to enable Custom CSS, navigate to Jetpack > Settings > Writing in your site’s dashboard. So, scroll down to the Theme Enhancements section and toggle on the Enhance CSS Customization Panel option.
- Finally, to add CSS, go to Appearance > Customize > Additional CSS. Here’s where you’ll type in the actual CSS you want to add. In addition, the CSS editor uses color to make it easier to differentiate selectors, properties, and values.
CSS Basic Tips: Typography
One of the most common CSS uses for styling your site typography or fonts. So, to change both the color and size of titles (Heading 1, Heading 2, etc.) across your site, use this code and modify the values as desired:
h1 {
color: #FF5733;
font-size: 36px;
}
Secondly, the example above modifies Heading CSS Basic Tips 1. If you want to change the color and font size of a different heading. So, like Heading 3, swap the h1 selector with h3 and make the appropriate adjustments to size and color:
h3 {
color: #FF5733;
font-size: 25px;
}
In addition, to change the color of multiple headings, separate the selectors with commas:
h1, h2, h3, h4, h5, h6 {
color: #FF5733;
}
Finally, to make all your headings uppercase, for more impact, use this:
h1, h2, h3, h4, h5, h6 {
text-transform: uppercase;
}
Power of <li>
<li> a.k.a link list, is very useful when they are use correctly with <ol> or <ul>. So, particulary to style a navigation menu.
Use <div> Best CSS Website Basic Tips
One of the greatest advantages of CSS is the use of <div> to achieve total flexibility in terms of styling. Moreover, <div> are unlike <table>, where contents are ‘locked’ within a <td>‘s cell. It’s safe to say most <table> layouts are achievable with the use of <div> and proper styling, well maybe except massive tabular contents.