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.
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.
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.
There are three CSS Styles:
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 is implemented via rule-sets.
A CSS rule-set consists of a selector and a declaration block: h1 {color: blue;}
There are hundreds of these but here are some of the most commonly used:
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
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.