CSS
Content
This is the second in a series of posts looking at the coding languages that form a WordPress site. It features a quick overview of how CSS works on your site.
In general, when coding a site for WordPress, you should prioritize languages in this order. First, accomplish anything you can with HTML, the subject of the first article in the series. Then with CSS, the subject of this article, then PHP, the subject of the third article, then Javascript, the subject of the fourth article. Doing so will minimize the size of your webpages, speed up loading, and help your SEO, and user experience.
What is CSS?
While HTML provides your site's meaning and structure, CSS, first proposed by Håkon Wium Lie in 1994, provides its aesthetics. PHP and Javascript provide interactivity and functionality. They are the frontend languages used in WordPress. In other words, they control what is seen in the browser.
A page/post is a combination of PHP, HTML, Javascript, and MySQL statements laid out with CSS.
CSS controls how your website looks. It includes color schemes, fonts, the styling of text, borders, backgrounds, layouts, animation, buttons, and much more.
Cascading Style Sheets
CSS is an acronym for Cascading Style Sheets. Like HTML, CSS is a markup language that controls how HTML elements display on your website. It can even determine the layout of multiple web pages with an external stylesheet. You store stylesheets in CSS files that you link with your HTML and PHP files.
CSS Styles
There are three CSS Styles:
- Inline - You use inline CSS to style a specific HTML element within an HTML or PHP file. You add the style attribute to each HTML tag, without using selectors. While useful in some situations, this is not practical for your website in general.
- Internal - AKA as embedded CSS, requires you to add a <style> tag in the <head> section of your HTML or PHP file. Again this can be used on a single page but is not practical for a website.
- External - With external CSS, you link all your web pages to an external .css file. This CSS type is a more efficient method since by editing one file, you control your entire website. A WordPress theme uses this method with its style.css file. Themes built using the latest coding practices break CSS files up to correspond to the modules/segments/sections/blocks of the theme.
You can add CSS to your WordPress theme via the style.css file (recommend for developers only), under the Appearance menu in the WordPress dashboard (Edit CSS), or on individual posts and pages in some themes. It can even be added inline to customized HTML blocks or widgets.
CSS Rule-Sets
CSS is implemented via rule-sets.
A CSS rule-set consists of a selector and a declaration block: h1 {color: blue;}
- Its selector points to the HTML element you want to style. In this case the (h1) heading.
- The declaration block contains one or more declarations separated by semicolons. color: blue
- Each declaration includes a CSS property name (color) and a value (blue), separated by a colon. :
- Declaration blocks are surrounded by curly braces. { }
CSS Declaration Properties
There are hundreds of these but here are some of the most commonly used:
- color
- background-color
- font-style
- font-size
- font-family
- border-style
- margin
- padding
- height
- width
- list-style-type
- display
CSS3
CSS3 is the last version of the CSS language. It implemented things like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, and flexible box (Flexbox) or grid layouts (CSS Grid).
"After CSS3, the scope of the specification increased significantly and the progress on different CSS modules started to differ so much, that it became more effective to develop and release recommendations separately per module. Instead of versioning the CSS specification, W3C now periodically takes a snapshot of the latest stable state of CSS specification." Mozilla Developer Network
Wrapping Up
As you have seen CSS, is a much more extensive language than HTML, and there are entire websites and books devoted to it. Since we are only looking at a general overview in this article, here are some useful resources with more extensive information.
CSS Resources
- Introduction to CSS (How-Tos by Rule-Sets) - https://www.w3schools.com/css/default.asp
- Everything CSS via CSS Tricks - https://css-tricks.com/
- Smashing Magazine CSS Page - https://www.smashingmagazine.com/category/css
- CSS Guidelines - https://cssguidelin.es/
- Mozilla Developer Network CSS Page - https://developer.mozilla.org/en-US/docs/Web/CSS
- Why are we talking about CSS4 - https://www.smashingmagazine.com/2020/03/css4-pros-cons-discussion/
- What CSS developers do and why you need one - https://www.toptal.com/css/why-you-need-a-css-developer
- Can I Use? - CSS - https://caniuse.com/#cats=CSS
- CSS Basics - https://www.cssbasics.com/
- LAMP, the WordPress Software Stack - https://en.wikipedia.org/wiki/LAMP_(software_bundle)