Monday, November 21, 2005
Putting CSS on your webpage
Putting CSS on your page
is placed into the <BODY> section along with the tags immediately before its desired effect on text. It is good for overriding the “main” SS in specific parts of the web page, BUT not good in terms of separating presentation from content or SEO, also the style attribute is depreciated in XHTML 1.1 and is completely gone from the current Working Draft of XHTML 2.0, … so use sparingly or better yet use ‘class’ (later in lessons) for deviating from your “main” CSS. Also it only works once on the tag, so has to be rewritten every time, greatly increasing the file size/download time of your webpage.
This may be what is already on your page, so you have been using CSS without realizing it, BUT what you want to do is isolate it from the HTML or content.
<body>
<h1 style="font: 10em">A big h1 heading for just this heading</h1>
<h1>back to normal h1 heading</h1>
<p>content</p>
</body>
Embedded
or internal, is placed in the <HEAD> section and applies to that one page only. It is placed between <style> and </style>tags – see below for an example of wording required. It can be used if you have a one page website, or if a particular page has a look different to the rest of your web pages.
Also it can be used if starting out with CSS then you can change CSS codes on the page and see it’s effects immediately without perhaps opening a CSS editor etc and tabbing between windows, later on when you are satisfied with the outcome and overall look to the page, change to external SS and so applying it to all pages to give a corporate/uniform look to all webpages.
<html>
<head>
<!—
body { color : red ; background : yellow; }
p { font-family: "new century schoolbook”, courier, serif }
-->
</style>
<body>
<p>content</p>
</body>
</html>
The <!—and --> are optional and hide the CSS code from older, non CSS compliant browsers.
In p above the 1st choice for font is NCS, 2nd is courier if NCS not available on users computer, final choice (if 1&2 unavailable) is a generic font which will be selected by users computer e.g. Times if available. It is good to finish with a generic font.
is stored in a text file on the server and called upon when the page/s downloads. Its beauty is that all pages can link to it and act upon it’s instructions, so even in a thousand page site one little change in external CSS will change all pages in your site. It is best to use a relative URL linking to a CSS file on your server so the file downloads quickly and sets the page out quickly. The CSS file you link to doesn’t have to be on your server, with a full URL you can link to anyone’s CSS style sheet (with their permission!) but it’s not recommended.
<html>
<head>
<body>
<p>content</p>
</body>
</html>
If made in Notepad it is “saved as” filename with a “.css” extension instead of “.txt” so that the computer knows how to handle the file (like changing a file to a “.html” extension so the computer knows it is web page and uses a browser to open and read it), and uploaded as normal (on the root directory in the above example) to your server via FTP or a web interface etc.
It is then accessed by your webpage through the link command above and applied to your page before being displayed accordingly on the users computer screen.
p { font-family: “comic sans”, serif; text-indent: 1em; line-height: 1.33em;}
h1, h2, h3, h4, h5 {text-align: center; text-decoration: underline; letter-spacing: 6px; color: black;}
What the C in CSS means
h3 {color: red; text-align: centre; font-size: 1.2em}
h3 {text-align: right; font-size: 1.5em}
color: red only defined in external SS
text-align: right internal SS overrides external as rendered on page
font-size: 2em inline SS overrides embedded as acted upon last
The CSS Command
The CSS Command
Most *basic* CSS commands are made up of 3 parts:
1. Selector e.g. HTML elements like <p>, <h1>, <body> etc but without the “<” and “>”
2. Property e.g. color, font-family
3. Value e.g. green, “Times New Roman” - if there is white space in the value, the whole value must be quoted.
2&3 are jointly called declarations and are enclosed within squiggly brackets and separated by a colon, after the value there is a semi-colon:
Selector { property : value ; }
e.g. body { color : red ; }
Note: spaces are not necessary but used here for ease of reading.
[Later on, we will talk about Classes which are written differently.]
The end semi-colon is not compulsory, but “desirable“ especially as you change or add onto your CSS.
Many declarations for a single selector can be enclosed within the brackets, which must be separated by semi-colons.
e.g. body { color : red ; background : yellow; }
Some people find putting each pair on a separate line helpful for readability and later amendment e.g.
body {
color : red ;
background : yellow;
}
Comments can be added to explain your code or remind you at a later date of your intentions, comments are placed between: /* and */
Selectors can be grouped to have a common declaration, separated with commas e.g
h1, p {color: red;} /* means headings 1 and <p> are red in color.*/
<h1>red heading</h1>
<p>red coloured content …. </p>
<h2>not a red sub heading</h2>
<p>red coloured content …. </p>
If on the same SS the following is declared:
h1 {font-size: 2em;} /* 1em is a font size equal to the current size of “m” in browser */
NOW <h1> will now be red and 2em in height.
Semantic Markup
Always use appropriate selectors and assign them appropriate CSS coding for their type e.g. use ‘h’ for headings and also make <h1> bigger than <h2> etc, for 2 reasons:
1. So that if CSS is turned off or if an older browser is used the page still renders well; and
2. For SEO <h1> headings carry more weight than <h2> headings and so on, in determining SE indexing.
So, use:
* h1 though h6 for headings instead of b or font.
* ul for lists and li for list items, for navigation and other link lists instead of br or td. Don’t worry they won’t appear like bulleted lists once your have played around with them in CSS (later on)
* q and blockquote for quotes rather than adding quote characters directly.
CSS is SO powerful that it is possible to define any element like another e.g. a <p> like a <h1> thus (an exaggerated example):
p {font-size: 3em; color: red; text-align: center; text-decoration: underline; text-transform: capitalize; letter-spacing: 6px; font-weight: bolder; }
BUT DON’T this for the above two reasons.
Sunday, November 20, 2005
Introduction to CSS
Introduction
Cascading Style Sheets (CSS) is a means of separating presentation elements (like bold, italic, underline and many more) from the actual content of a webpage, and gives many more presentation options compared to HTML (which was never intended for presentation).
CSS when defined correctly overrides the viewers browser's default settings for displaying HTML tags like p, hr, table, a, headings etc. Properties such as color, background, margin, border, and many more can be applied to elements making them more versatile and attractive than with HTML alone.
Finally it adds new attributes such as text spacing, line–height, different border types and styles, padding, margins and list attributes to name bit a few. New attributes are added as CSS is updated … CSS3 is the latest …. although CSS1 is most widely implemented and some CSS2 is used in more updated versions of the browsers, although unfortunately with some inconsistencies among different browsers.
See http://www.corecss.com/properties/full-chart.php for a very comprehensive list of CSS properties implemented by different browsers.
A single small text file of styles can control the appearance of all pages on a website linked to that external file, without CSS each of these pages would be partly comprised of formatting codes that would have to be downloaded with each page, adding greatly to data transfer. It is less cluttered, and making it easier with a few keystrokes in your style sheet to change all the pages’ presentation no matter how many pages on your site. It also makes it easier to change the content of the page as you don’t have to hunt out your content sections amongst the formatting codes needed without CSS, and with appropriate naming for classes and divisions you can easily find a section of text you may need to change.
In these posts I have used "[" instead of "<" so as not to confuse the browser into thinking what follows is a style statement. So just swap "[" and "]" for "<" and ">".
For example, while you could use [hr width="75%" size=”2” align=”center”] for every horizontal rule, this is a lot of work. With style sheets, you only need to specify the values once in a file (style sheet), and the style can be applied to an entire site. And if you decide that width="90%" would be better, then you only need to change the value in one place – the style sheet.
With style sheets, authors can use the text-indent property to indent text, rather than resorting to [img src="blank.gif" width=”10” alt=""] work-around.
CSS is intended by its creators (W3C) to replace HTML table-based layouts, frames, and other presentational hacks. In fact purist CSS users discourage the use of tables for anything but the presentation of tabular data i.e. no tables to ensure you page with images etc presents properly on screen.
It is also enables you (or will in the future) to create aural style sheets for the sight impaired, which give the speech capable browser commands to follow e.g. Pitch, Volume and Speech rate. Style sheets made for printers makes a printer friendly version of the page like margins, page breaks set to suit A4 paper for example.
In terms of SEO it means your page is full of content, not [font], [centre], [color] etc, so a search engine robot can do its job properly, picking up on important words.
CSS is here to stay as HTML 4.01 has depreciated some elements in favour of the equivalent CSS command.
CSS was introduced with IE3, NN4 and OPERA 3 versions, and currently versions above IE5, NN6, FF1 and OP5 support all CSS1 implementations.
Versions 6 of most browsers support many BUT NOT ALL CSS2 implementations, and different browsers differ in what and how they interrupt CSS2. This leads to a whole culture (in internet discussion groups) of work-arounds, making alternate CSS for different browsers or Operating Systems (NN v IE v Opera v Firefox, MAC’s v Windows), “IE white-space bugs”, “3px-text-jog bug” etc, all of which is deviating from the “beauty and simplicity” of CSS.
This tutorial series is BASIC CSS so I won’t go into this. There is a whole lot of basic CSS that IS implemented correctly by the modern browsers, and hopefully it will get better as browsers catch up to W3C implementations.
What does it look like?
---------------------------
HTML tags have a default style and display according to some basic rules.
One way (see below for other) they can be overridden is via an inline style using the STYLE attribute on the tag, which many of you may already use is.
[p style="font-color:black; font-size:2;font-family:sans-serif;"]Some text.[/p]
However, this method only affects that particular instance of a tag, therefore each occurrence must be styled, and on a big page it can look a mess. Style sheets provide ways to apply styles to all instances of a given tag, or to named subsets.
the same HTML page with CSS might look like this:
[p]content content content[/p]
The content will appear the same on both web pages ***when an appropriate CSS file is used in the second page***
with something like this in it :
p {font-family: sans-serif; font-size: 12px; color: black;}
and downloaded ONCE with the page.
Notice above how the 2nd CSS example is sooo much smaller and simpler:
[p][font color=”black" size="2" face="sans-serif"]content content content[/font][/p]
verses
[p]content content content[/p]
