CSS structures a litte differently then HTML. When we work with HTML, we work with tags, CSS however,has selectors. Selectors are the names given to styles in embedded and external style sheets.
In this article,we will be focusing on CSS selectors, which are simply the names of HTML tags and are used to change the style of a specific tag.
Each selector has different properties. The various properties are noted inside curly brackets, which simply take the form of words such as color, font-weight or background-color and etc.
A value is given to the property following a colon and a semi-colons separate the properties from one another.
For example:
body {
font-size: 0.5em;
color: blue;
}
This will apply the given values to the font-size and color properties to the body selector. So basically, when this is applied to an HTML document, text between the body tags (which is the content of the whole window) will be 0.5 ems in size and blue in color.
Lengths and Percentages
There are many property-specific units for values used in CSS, but there are some general units that are used in a number of properties and it is worth remembering before continuing.
px (such as font-size: 10px) is the unit for pixels.
pt (such as font-size: 14pt) is the unit for points.
em (such as font-size: 3em) is the unit for the calculated size of a font. So “3em”, for example, is three times the current font size.
% (such as font-size: 90%) is the unit it percentages.
Other units include pc (picas), cm (centimetres), mm (millimetres) and in (inches).
When a value is zero, you do not need to state a unit. For example, if you wanted to specify no border, it would be body {border: 0;}.
A web page meant to be flexible and the user should be allowed to view the web page the way they like, which includes the styles, font size and the size of the screen.
Because of this, it is generally accepted that ‘em’ or ‘%’ are the best units to use for font-sizes (and possibly even heights and widths, which we shall come across in my other css articles, rather than ‘px’, which leads to non-resizable text in most browsers.
We will discuss basic CSS Coloring function on my next tutorial article.
I will be attending the Annual WordPress WordCamp in San Francisco Saturday May 30,2009.
I will share my experience and photos of the event later. More to follow…
Tags: WordCamp
In the series of articles follow, I will document a CSS tutorial covering the basic of CSS (Cascading Style Sheets), Information from this tutorial have been gathered from various CSS tutorial site. I hope you will find these information useful when you set up your Site.
CSS stands for Cascading Style Sheets. It allows you to store style presentation information (like colors and layout) separate from your HTML structure. This allows precision control of your website layout and makes your pages faster and easier to update.
There are three ways to apply CSS to HTML they are called In-line Style, Embedded Style and External Style.
IN-LINE STYLES
In-line Style are placed straight into a HTML page by using the style attribute in the HTML tags.
For Example:
<p styles=”color: blue”>text</p>
This will make the paragraph’s text all blue.
Please note that In-Line Style is not the best way to apply CSS to HTML because we are changing the HTML page tag by tag to apply the In-line style. It will be difficult if we need to change the style later. Moreover, the best-practice approach is that the HTML should be a stand-alone, presentation free document, and so in-line styles should be avoided wherever possible.
EMBEDDED CSS STYLE
Embedded styles are styles that affect the whole HTML page. This style is apply to Inside the head tags, the style tags are surrounded all of the styles for the page.
Example would look something like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>CSS Example</title>
<style type=”text/css”>
p {
color: blue;
}
a {
color: red;
}
</style>
The style tag will make all of the paragraphs in the page blue and all of the links red.
Embedded styles still try to apply css to HTML by modifying the actual HTML page Similarly to the in-line styles, We would still encounter problems when we try to modify the page later.
we should keep the HTML and the CSS files separate and the best way to do it is to use External Style CSS.
EXTERNAL STYLES
External styles are used for the whole, multiple-page website. There is a separate CSS file, which will simply
look something like:
p {
color: blue;
}
a {
color: red;
}
If this file is saved as “format.css” then it can be linked to in the HTML like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>CSS Sample Sheet</title>
<link rel=”stylesheet” type=”text/css” href=”format.css” />
In my later CSS Articles, I will present other ways of linking external style sheets, but for now we would keep it simple as is.
To get the most from this guide, it would be a good idea to try out the code as we go along, so start a fresh new
file with your text-editor I personnelly would use notepad for this purpose and save the document as “index.html” in the same directory as your css file.
Now change your HTML file so that it starts something like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>CSS Sample Sheet</title>
<link rel=”stylesheet” type=”text/css” href=”format.css” />
</head>
<body>
<p>CSS is the best styling tool on the market</P>
</body>
</html>
Save the HTML index.html. This now links to the CSS file, You will now notice the line color change to blue as specify in the CSS file. As
we work our way through the CSS tutorial, you will be able to add to and change the CSS file and
see the results by simply refreshing the browser window that has the HTML file in it, as we did before.
On the next tutorial. We will cover the basic of selectors. Stay Tune…
Tags: css, css styles, html