Simple styling with CSS demonstrated at an example

bymaraca

119 followers

Updated 12 years ago

Update: not everything is good practice here, you shouldn't edit the style.css, it's better to use a custom css file, also when I say below X belongs to class Y, this is not accurate, actually X is the child of a node belonging to class Y.

I wanted to display only the flags of the language chooser (qTranslate plugin) and the flags should be horizontally one after each other, not vertically. The solution: almost everything to style a site can be done with CSS. (Note for beginners: you don't have to use CSS if you don't want to.)

With CSS (cascading stylesheets) you can set the properties that you would usually set in style attribute for a pure HTML site. But CSS let's you do much more than this, to get an impression visit http://www.csszengarden.com/ and select different designs, all those designs are purely done in CSS with the same HTML code. It's good practice to seperate between content (HTML) and the layout (CSS). You'll find more information about CSS on w3schools or google.


Simple CSS example for beginners (real example below):

Go to Appearance -> Editor and select the file style.css. At the bottom of the file you can make a new section:

/* custom styles */
body {
background-color: yellow;
}

Safe and reload the page and you'll see the effect (unless your background is completely covered with something else).

Explanation:
The first line is a comment (everything between /* ... */, it helps to make the file more readable. On the next line we say to what we want to apply styles: to the body tag. Between the brackets the styles are specified, in this case the background is set to yellow.


Horizontally listed flags for the qTranslate language chooser:

First we have to know to what we want to apply a style. I highly recommend the Firebug addon for Firefox for this. After installation you can right-click anywhere on a site and investigate the element with firebug. We are looking for the tags, ids (# operator in css) or classes (. operator in css, see below). It turned out the text is in spans and belongs to the class qtrans_flag_and_text (there is no flag only option, so I've chosen this one) and the flags are in a list and belong to the class qtrans_language_chooser, which leads to the following modifications:

.qtrans_flag_and_text span {
display: none;
}

.qtrans_language_chooser li {
display: inline;
list-style-type: none;
padding-right: 20px;
}

Explanation:
For all the span tags that belong to the class qtrans_flag_and_text (can belong to more than one class) display is set to none, so this gets us rid of the language text. By setting the first two properties for the li tags in the language chooser we get a horizontal list and with the padding-right:: 20px; we say that the flags should have a distance of 20 pixels from one to another.