CSS Basic Tips For Website Owners
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 CSS tips 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.
Selectors, Classes, and IDs
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.
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. 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>
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.
