Cascading Style Sheets (CSS) is a “style sheet language” that you can use to add design elements to your website. It allows separation of content and presentation through layout, colors, and fonts. CSS describes how HTML (and several other Markup Language) elements are to be displayed on your site. HTML was never designed to contain tags for formatting. CSS style definitions are usually saved in an external .css file, which allows easier alterations. You can change the look by changing one file without affecting any of the actual information on your site.
CSS can help to reduce complexity in your website code and can enable accessibility features for your users. WordPress does a great job of dividing your website into distinct sections, which enables you to use CSS more effectively for those areas.
CSS Syntax
CSS uses a lot of English words as keywords, and a fairly simple syntax. There are Rules, Selectors, and Declaration Blocks.
- Rules — A CSS rule contains a selector and a declaration
- Selector — A selector describes an element of the layout, like a header, widget, or body element
- Declaration — A declaration contains a property (like color) and a property value (like red or #7FFFD4)
How do I use CSS on my WordPress site?
Firstly, it is recommended that you do not add CSS directly to your WordPress theme’s stylesheet, but rather utilize your WordPress dashboard and open WordPress customizer. Here you will find the “additional CSS” option. This will open a blank text editor on the left, and you will be able to see your CSS Elements live on the page, without interfering with your theme. You will not have to navigate your way through the current style sheet to make changes, you can add your selectors into the editor and see which elements are adjusted. There is also a small safety net here via “validate” which will help to ensure you have not made any simple syntax mistakes. In your text editor you will type in some basics like:
- .h1 {
font-family: Arial;
} -Here you are Selecting your top level “header” (h1) and declaring the font for this element should appear in “Arial” font design. The brackets are part of the Syntax rules.
- .widget {
color: #7FFFD4;
border: 12px;
} – Here you are Selecting all “widgets” WordPress allows you to specify widgets or Widget Elements (like .widget_search or .widget_footer) and declaring that the color will be “Aquamarine” with a 12px border.
WordPress has its own specialized selectors, which contribute to the accessibility of WordPress. You can very easily select unique elements, which will only affect the active pages. For more comprehensive documentation on CSS Selectors, declarations, or interesting design choices, feel free to search Mozilla Developer Network, GitHub or any website you admire by opening “Tools” and selecting “Developer Tools.”
Almost all your favorite sites utilize CSS, it is one of the three “Cornerstones” of website design. There is more to this tool than could be written in 10 blogs. There is a chance for you, as a designer and website developer, to explore and learn from this technology. Go explore and immerse yourself, and don’t be afraid to try new things. You can always default back to your standard theme.
You should not have to worry about whether or not your host is dropping the ball on your beautiful website though. After hours, days, months, or years of precise website development, you should never have to compromise the integrity of your site because your host is not up to par. If you have any concerns at all, reach out to CanSpace Solutions. We are as reliable as we are responsive, and we will not hesitate to support you in all your online initiatives!
