This website stores cookies. Click here to accept them.cookie information page

"css" category

1st January 1970
link to this post - ExecScalar called by unknown with SELECT COUNT(commentid) AS comments FROM oww_blogcomment WHERE approved = 1 AND articleid = AND repldeleted IS NULL and error is You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'AND repldeleted IS NULL' at line 4.  |   Add your comment

What is CSS?

22nd November 2011
Categories: basics, css

CSS (or cascading style sheets) is a language that enables you to tell a web browser how a webpage should look. Whilst HTML is a language describing the structure and content of a page, CSS describes how that content should look.

The syntax of CSS is extremely simple, you declare which element/elements you wish to affect and then declare the styles that you want to apply to them contained within curly braces (“{}”)

The selector (the part of the block which defines WHAT to affect) can be a HTML tag, a HTML class attribute prefixed with a “.” or a HTML id attribute prefixed with a “#” (there are others but these are the most common)


color: red;

background-color: green;

font-weight: bold;
color: blue;

In this example we have three blocks, each with a single selector (a, .title and #branding). The “a” selector will affect all “<a ” tags on the page (also known as anchors or links). The “.title” selector will affect all tags on the page that have “title” as one of their classes (i.e. “class=title”) whilst the “#branding” selector will affect the element that has an id of branding (i.e. “id=branding”).

As you can see above, the style declarations themselves are extremely simple: what you want to change, a colon, what you want to change it to and then a semi-colon.

The cascading part of CSS refers to the fact that all the elements will inherit the styles of their parents, for instance say you had the following markup:

<div id=”branding”>

<span class=”title”>My Company</span>

<span class=”subtitle”><a href=”/about”>about us</a></span>


using the styles above the text “My Company” would be bold and green (it gets the 'bold' part from the branding div that contains it) whilst the “about us” link would be bold and red.

You aren't limited to just using one selector in CSS, you can chain them together as a set of rules that allow you more control over what to apply the styles to. For instance you can declare a style for any anchor tag that has an element with the 'menu' class as an ancestor (doesn't have to be a direct ancestor)

.menu a

color: orange;
text-decoration: none;

To limit the rule to only apply to direct parentage you use “>”


.menu > a
color: yellow;

This would mean that the parent of the anchor would have to have a class of “menu” for the style to be applied.

One last thing to cover is pseudo-classes. These are used for special effects and refer to a specific circumstance, for instance, hover-effects.

text-decoration: underline;

This would cause all anchor tags to become underlined when the mouse is hovered over them.

© Alberon Ltd 2019

8 Standingford House
26 Cave Street

01865 596 144

Oxford Web is a trading name of Alberon Ltd, registered company no. 5765707 (England & Wales).