In the early days of the internet, the only way to determine how text and other content on a website was displayed was to hand code it in HTML. Today, nearly all websites rely instead on something called CSS or Cascading Style Sheets.
If you’re familiar with Microsoft Word or Google Docs, then you’ll be familiar with Style settings which are similar to CSS. In essence, the CSS file determines how each part of the website will be displayed. For example, if the body text is displayed in Times New Roman size 12 using a dark blue color, that information will be stored in the CSS file.
In WordPress, every installation comes with a “style.css” file (inside the template directory) that contains all of the rules for formatting a page. The reason CSS is called “cascading” is that it is possible for subsections to also have their own CSS file with each one “cascading” to the next.
CSS, HTML, and PHP are the three formats that all WordPress developers must learn, but if you’re only interested in administering a WordPress site, then you won’t have to worry about learning CSS as that information is already contained in your website’s theme.
For developers, however, modifying CSS is an easy way to quickly change how a website is displayed. Some themes even let you modify the CSS file directly from the administration panel, but you must be using WordPress version 4.7 or later in order to access this function.
Note: If you change your theme, you will lose any modifications made to your CSS file(s).
CSS uses two terms called identifiers and classes to decide how formatting rules should be applied. This lets you fine-tune certain areas of the website to be displayed differently. WordPress comes built-in with several named classes and elements.
The Benefits of CSS
Separation of content and presentation
CSS rules can be provided in a file that is separate to the (content) HTML. If all pages link to this centralised CSS file, then the look of a website can more easily be updated. For example, the colour or size of all level-one headings can be changed by updating a single CSS rule.
Smaller webpage file sizes
As the code required to style content can be removed from individual webpages, the size of each webpage file is reduced. Depending on the benchmarks, file sizes may be reduced by up to 60%.
Improved webpage download speed
Once a stylesheet has been downloaded, it is typically stored on the user’s computer (cached). For each subsequent webpage viewed, only the HTML needs to be downloaded.
Improved rendering speed
Once a webpage has been downloaded, a browser processes the underlying code to determine how content should be displayed. This process is referred to as ‘rendering’. The time a webpage takes to render is affected by the complexity of the code the browser receives. Using CSS to control the layout of a page typically simplifies the the code structure making it ‘easier’ (faster) for the browser to render.
As less code is required for each webpage, both the likelihood of coding errors and time required to add content to a website are reduced.
Changing presentation for different devices
The CSS specification enables different rules to be used depending on the device used to access the web. For example, a different set of rules can be used to reformat a webpage for printing or viewing on a mobile phone.
Additional features can be added to webpages that provide ‘hooks’ for assistive technologies such as screen readers. (A screen reader is a program that reads aloud the interface to computer programs and computer-based content, including webpages). CSS-based techniques can be used to provide such hooks without impacting on the experience of mainstream users. For example additional headings can be added to content that will only be ‘seen’ by a screen reader. These headings can be used to provide additional contextual information that would otherwise be communicated by the visual design. As an example, the list of glossary terms at the foot of each glossary entry is preceded by the invisible heading: ‘Glossary Trivia’.
Prior to the introduction of CSS, multi-column layouts could only be created using HTML tables. Unfortunately, at a code-level, a table used for layout purposes cannot be differentiated from a table used to mark-up tabular data (such as statistics). This has the greatest impact on technologies that ‘read’ webpage content at a code, rather than visual, level. If the meaning of content is affected by how it has been marked-up, then using a table for layout purposes has the potential to change the meaning of the content. Utilising CSS-positioning, layout can be achieved without compromising content structure or meaning.
Advanced web browsing software enables the user to easily override the author-specified styles. Although admittedly requiring the user to know more about the mechanics of the web, content display can be completely customised.
Search engine optimisation
Search engines may assign greater relevance to content found first in the code, and/or limit the amount of content indexed on each page to a certain character-count. If content blocks are positioned using CSS, the order of webpage code does not need to match the display order. For example, the code for global navigation bars positioned at the top of the screen may come after the content in the source.