Introduction to CSS
CSS (cascading style sheets) is a stylesheet language that is used to define the presentation of a document written ina markup language such as HTML and XHTML, but the language can be applied to any kind of XML document. Forexample, it can be used to define the colors, fonts and layout of a web page. A cascading style sheet has a fileextension of ".css".The CSS specifications are maintained by the World Wide Cosortium (W3C).
There are 3 ways to apply CSS to HTML
•
internal styles (embedded)
•
external style shees
•
in-line styles
Internal Style Sheets
An internal style sheet is only placed within the web page which they are intended for.The styles are placed within the openning and closing <head> tags and the openning and closing <style> tags encloseall of the styles for the web page.The following HTML and CSS code is an example of an internal style sheet that will make the text within theparagraphs on that web page red.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>this is the title of the web page</title><style type="text/css">p{color: red;}</style></head><body><p>the text in this paragraph will be red</p><p>the text in this paragraph is also going to be red</p></body></html>
External Style Sheets
External style sheets are styles that can be applied to as many web pages as you like that are on the same website.With external style sheets there are at least 2 documents: the document that the styles are on and the the web pagethat the styles apply to (of course you can apply the styles to multiple web pages on the same site).The web page(s) need to link to the style sheet by using the following code within the openning and closing <head>tags.<link rel="stylesheet" type="text/css" href="mystylesheet.css" />Now open a new (blank) document and copy and paste below HTML code into the document and save it as"whatever.html".<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>this is the title of the web page</title><link rel="stylesheet" type="text/css" href="mystylesheet.css" /></head><body><p>the text in this paragraph is red</p><p>I now know HTML and CSS</p></body></html>After you have saved the above HTML code as "whatever.html", open another new (blank) document and copy andpaste the following CSS code.p{color: red;}Now upload both files to your website. The web page should have the following 2 paragraphs in it and the color of the text should be red.note: if you are not connected to the internet, you should link to the style sheet something like:file:///C:/Documents/mystylesheet.css depending on where on your computer the file is located.the text in this paragraph will be redI now know HTML and CSS
In-line Styles
To use in-line styles you place the "style" attribute within the relevant HTML tag. The style attribute can contain anyCSS property.An in-line style can apply to a whole HTML element or it can apply to a selected area within that element. Forexample it can apply to a whole paragraph or it can apply to only a string of text within the paragraph.The following HTML and CSS code shows you how to apply in-line styles.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>this is the title of the web page</title> </head><body><p
style="color: red"
> the text in this paragraph is red </p><p> this is the
<span style="color: red"
>best CSS and HTML tutorial
</span>
available on the world wide web</p></body></html>The above HTML and CSS code will make a web page with the following 2 paragraphs.the text in this paragraph is redthis is thebest CSS and HTML tutorialavailable on the world wide web
CSS Background Code Tutorial
You can define the background effects of an HTML element with the use of CSS background properties.
How to set the background color with CSS
The following HTML and CSS code example shows you how to set the background color of an element.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>this is the title of the web page</title><style type="text/css">body {background-color: yellow;}h1 {background-color: #00ff00;}h2 {background-color: red;}p {background-color: rgb(250,0,255);}</style></head><body><h1> This is a level 1 header </h1><h2> This is a level 2 header </h2><p> This is a paragraph </p></body></html>
of 00
Introduction to CSS
364 Reads
Info and Rating
| Category: | Uncategorized. |
| Rating: | |
| Upload Date: | 08/18/2009 |
| Copyright: | Attribution Non-commercial |
| Tags: |
Leave a Comment