The long-awaited CSS post is ready for your reading pleasure! This will be a several-part series because there is so much to learn about CSS! This first article will cover a few basic elements so you can get familiar with CSS and how it works. Future articles will cover specific elements in greater detail. This series of articles is not intended to teach you how to create CSS from scratch, but will teach you how to update and edit current style sheets that are already created.
Style Sheets come in 3 varieties: internal, external, and inline. For our purposes, this article covers items relating mostly to internal and external style sheets, as these are the most common.
What is CSS?
CSS stands for Cascading Style Sheets and is a markup language primarily used to define fonts, colors, and layout of web pages. CSS was developed as a way to separate the content of a site (written in HTML or XHTML) from the styling (written in CSS). This makes for less complex coding in web pages and more control over the layout and styling of a web document.
Why should I know CSS?
CSS is something all graphic designers should learn, for the obvious reasons. What about virtual assistants? Well, if you have a Wordpress-based website or blog, you have already seen what CSS can do! Why not get familiar with the different elements of the CSS language so you can make changes to your own website's layout and styling?
CSS Basics
Learning CSS is much like learning HTML. There are several basic items to become familiar with before we go into detail.
Syntax: Selectors, Properties, and Values
Selectors define which HTML elements in the web page you will be altering with the CSS code. The typical CSS statement looks like this:
SELECTOR { PROPERTY: VALUE }
"PROPERTY" is the CSS element you wish to alter and "VALUE" represents the value of the property that you wish to see on your web page.
For example, if you wish to define a value for your paragraphs, the statement would look like:
p { PROPERTY: VALUE } "p" for paragraph
So what does CSS do to the HTML code?
Here’s an example:
When the CSS code looks like:
|
Code:
|
p.one{ color: blue; }
p.two{ color: red; }
The HTML code looks like:
<html>
<body>
<p>This is a normal paragraph.</p>
<p class="one">This is a paragraph that uses the p.one CSS code.</p>
<p class="two">This is a paragraph that uses the p.two CSS code.</p> |
It displays as:
This is a normal paragraph.
This is a paragraph that uses the p.one CSS code.
This is a paragraph that uses the p.two CSS code.
This bit of code uses what is called a “
class selector,” meaning that you can define two different styles for the same HTML element. Note the "p.xxxx" This indicates paragraph one and paragraph two.
You can use this information to make changes to the style sheets applied to your own website.
For example, you may see:
|
Code:
|
html, body
{
background-color: #FF9933;
font-family: tahoma, verdana, sans-serif;
font-size: 12px;
color: #663300;
line-height: 18pt;
} |
These values can be changed to reflect the styling you want. Your font can be larger or smaller, the background color can be changed, and the font family can be change to something with a serif. You can even substitute other hexadecimal (web) colors to change the background color and font color to something that tickles your fancy!
In the example above, "html, body" is the selector, "background-color, font-family, font-size," etc. are the properties, and "#FF9933, 12 px," etc. are the values applied to those properties. The code is written in this format to make it more readable, but note that the properties can all go on one line within the { }.
Selectors can also be grouped. For example:
|
Code:
|
h1,h2,h3,h4,h5,h6
{
font-family: “sans-serif”
} |
This would make the headings on your site all show in a sans-serif font.
Note: when the value contains two words, they must be in “ quotes“.
There is also a selector called an “
ID Selector.” These are used to apply a value to exactly one element, where as class selectors can be applied to one or more elements on a page.
The CSS code would look like this:
|
Code:
|
h1#title
{font-family: “sans-serif”
} |
And the HTML would look like:
|
Code:
|
<h1 id=”title”>This is a title.</h1> |
This title would show on the page in a sans-serif font.
************
That does it for today’s installment of CSS and Wordpress! Study the CSS styling used on your own web pages and even change a few things if you’re feeling brave!
Feel free to post questions and I’ll answer them as soon as I can!
Stay tuned for the next installment!
...