WordPress Words: CSS

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.
World Wide Web Consortium (W3)

Example: “The CSS in this part of the code is not coded correctly. Are you sure that the color of that Page is correct in the CSS?”

According to the W3C (or World Wide Web Consortium), Cascading Style Sheets, or CSS, is a mechanism used in web development to style certain elements of a website. CSS originally applies to web coding alongside other languages, such as Hypertext Markup Language (HTML) and JavaScript/jQuery/jQuery Mobile. Currently the latest version of CSS, CSS3, is being used for many websites today.

What is the history behind CSS development? In Chapter 20 of Cascading Style Sheets, designing for the Web by Håkon Wium Lie and Bert Bos, both Lie and Bos delineate the origins of CSS from 1994 to their present year in 1999. Looking back over twenty years ago, it is easy to see how much of a struggle it was to establish CSS as a fundamental part of web browsers and the construction of the World Wide Web in general.

However, in 1994, Cascading Style Sheets were proposed as one out of the other proposed languages for style sheets:

… But CSS had one feature that distinguished it from all the others: it took into account that on the Web the style of a document couldn’t be designed by either the author or the reader on their own, but that their wishes had to be combined, or “cascaded,” in some way; and, in fact, not just the reader’s and the author’s wishes, but also the capabilities of the display device and the browser. … CSS was perceived by some as being too simple for the task it was designed for. They argued that in order to style documents, the power of a full programming language was needed. CSS went in the exact opposite direction by making a point out of being a simple, declarative format.
Håkon Wium Lie and Bert Bos, Cascading Style Sheets, designing for the Web – Chapter 20: The CSS saga

Cascading Style Sheets can be seen as the unity of stylistic and functional viewpoints between “the author and the user,” but “cascading” can also refer to the actual function of CSS. When coding CSS, something interesting happens when you code down in the style sheet itself. In the example below, there is a coded heading with a pair of <h1> tags:


<h1>This is a Heading</h1>


But what happens when you code two different font colors for the same heading tag?

h1 { color: black; }
h1 { color: blue; }

When this code appears in the web browser, the black font color for the heading will not appear. Instead, by virtue of being the most recent (bottom-most) typed code in the style sheet hierarchy, the heading will be blue instead. In a sense, the stylistic effect needed for the heading was applied after the browser cascaded down through the style sheet to find the most recent code for the heading. Although this CSS code is valid, it is improper to code a heading style like this. So, if certain changes are made, the heading will remain black while all of the other headings (specifically with <h1> tags) will be blue in either of these ways:

#id h1 {color: black;}
h1 {color: blue;}

#id > h1 {color: black;}
h1 {color: blue;}

Why use CSS in the first place? Besides the fact that they are a huge part of web development today (HTML5 and CSS3 are quite a pair), there are a number of notable points made by W3C on another one of their informative pages, Using Style Sheets. Some of these points include that style sheets help contain all the styles for every HTML page they connected to, the HTML can be changed and cleaned up easily by referring to one Style Sheet, and the browser will even “[cache] the style sheet, which saves download time.”

Since CSS is a big part of the Internet today, naturally WordPress uses style sheets. In WordPress, each WordPress Theme has one or more style sheets, and the core style sheet is called style.css. The CSS file changes the way a Theme looks, as CSS does to any HTML web page.

WordPress has a a set of guidelines for the Theme style sheet in WordPress. A couple notable points within the guidelines are that the CSS files must feature a comment at the top of the file that hooks into the WordPress interface for users to learn more about the Theme, the CSS must follow CSS coding standards, and the CSS must also be valid.

CSS code for web development.

CSS code in the WordPress Core code.

WordPress makes it easy to change the look of Themes with CSS. There is a plethora of resources located on the Site Design and Layout page on the WordPress Codex for editing the design of various Themes. To understand more what a Theme is and how to get cracking into the code, visit Using Themes article on the WordPress Codex.

In the YouTube video below, Meri Winchester demonstrates how easy it is to change a Child Theme for WordPress using CSS.

More Information and Resources on CSS

For more information about CSS with regards to WordPress, here are some helpful links below:

Below are also some related ClarkWP WordPress Magazine articles on CSS and WordPress:

Other Related Aritcles:

Advertisements

2 thoughts on “WordPress Words: CSS”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s