What is Cascade Style Sheet (CSS)?
- CSS stands for Cascading Style Sheets
- Styles define how to display HTML elements++
- Styles were added to HTML 4.0 to solve a problem
- External Style Sheets can save a lot of work
- External Style Sheets are stored in CSS files
Using CSS in a HTML document allows you to easily determine the style for the whole document. To give you some idea of what I mean and how it works, I will give you some examples.
<HTML>
<HEAD>
<TITLE>Cascade Style Sheet test</TITLE>
<STYLE TYPE="text\css">
<!--
td { font-family: arial; font-size: 9pt; font-weight: bold; color: #000000; }
//-->
</STYLE>
</HEAD>
With this little bit of code I have set that any text placed within a <TD>-tag has to be displayed in the font typeArial (font-family: arial;), in a size of 9 points (font-size: 9pt;), bold (font-weight:bold;) and black (color: #000000;).
You can extend it with:
<HTML>
<HEAD>
<TITLE>Cascade Style Sheet test</TITLE>
<STYLE TYPE="text\css">
<!--
td { font-family: arial; font-size: 9pt; font-weight: bold; color: #000000; }
a { color: #FF0000; text-decoration: none; }//-->
</STYLE>
</HEAD>
I have now added that all Anker Tags (links) should be displared in a shade of red (color: #ff0000;) and I disallowed the standard underlining of links (text-decoration: none;)
In Internet Explorer you can even add a mouse-over effect (a change of color when the the link is touched by the mouse pointer):
<HTML>
<HEAD>
<TITLE>Cascade Style Sheet test</TITLE>
<STYLE TYPE="text\css">
<!--
td { font-family: arial; font-size: 9pt; font-weight: bold; color: #000000; }
a { color: #FF0000; text-decoration: none; }
a: hover { color: #000000; }//-->
</STYLE>
</HEAD>
You can also create your own names to indicate a style:
<HTML>
<HEAD>
<TITLE>Cascade Style Sheet test</TITLE>
<STYLE TYPE="text\css">
<!--
#mystyle { font-family: arial; font-size: 9pt; font-weight: bold; color: #000000; }
//-->
</STYLE>
</HEAD>
I have changed the "td" to #mystyle. When you place a DIV-tag elsewhere in the document, you can use this to refer to the styling settings:
<DIV ID="mystyle">
my text
</DIV>
Any text placed within the DIV-tag will be shown in Arial, 9 points, bold and black.
The same result can be created in this manor:
<HTML>
<HEAD>
<TITLE>Cascade Style Sheet test</TITLE>
<STYLE TYPE="text\css">
<!--
.mystyle { font-family: arial; font-size: 9pt; font-weight: bold; color: #000000; }
//-->
</STYLE>
</HEAD>
With elsewhere:
<P CLASS="mystyle">
my text
</P>
Using CSS in a correct way saves you a lot of usage of the FONT tags. But a great way to reduce coding is to place CSS in a seperate file.
Just place the CSS code in an empty notepad file.
td { font-family: arial; font-size: 9pt; font-weight: bold; color: #000000; }
a { color: FF0000; text-decoration: none; }
#mystyle { font-family: arial; font-size: 9pt; font-weight: bold; color: #000000; }
Save the file as style.css and save it in the same loctaion as your HTML documents. You can link to the stylesheet within each HTML document. You do this within the HEAD-tag:
<HTML>
<HEAD>
<TITLE>Cascade Style Sheet test</TITLE>
<LINK rel="stylesheet" href="style.css" type="text/css">
</HEAD>
The great advantage of working with CSS is that you can change things like the color of your links in a matter of minutes. You just have to change that one .css file. The change will take a effect throughout the whole website!
You can also use CSS within HTML tags:
<H2 STYLE="background-color: #000000; color: #ffffff;">TEXT</H2>
With the above STYLE attribute we've just set the background color of the word TEXT to black and the text to white.
You can do the same with tables:
<TABLE>
<TR><TD STYLE="background-color: #000000; color: #ffffff;">text</TD></TR>
<TR><TD>more text</TD></TR>
</TABLE>
You have now set the background color of row 1 to black and the text to white.
How the work done by CSS
How will CSS work?
In this lesson you\'ll find out how to create your initial piece of paper. you\'ll get to grasp regarding the essential CSS model ANd that codes square measure necessary to use CSS in an markup language document.
Many of the properties utilized in Cascading vogue Sheets (CSS) square measure just like those of markup language. Thus, if you\'re wont to use markup language for layout, you\'ll presumably acknowledge several of the codes. allow us to investigate a concrete example.
The basic CSS syntax
Let\'s say we would like a pleasant red color because the background of a webpage:
Using HTML
style.css
The color property describes the foreground color of a part.
For example, imagine that we wish all headlines in an exceedingly document to be redness. The headlines ar all marked with the HTML part . The code below sets the colour of components to red.
Colors may be entered as positional notation values as within the example on top of (#ff0000), otherwise you will use the names of the colours (\"red\") or rgb-values (rgb(255,0,0)).
Back Ground Color
The background-color property describes the background color of components.
The part contains all the content of Associate in Nursing HTML document. Thus, to alter the background color of a whole page, the background-color property ought to be applied to the part.
You can additionally apply background colours to different components together with headlines and text. within the example below, completely different background colours ar applied to and components.
In this lesson you\'ll find out how to create your initial piece of paper. you\'ll get to grasp regarding the essential CSS model ANd that codes square measure necessary to use CSS in an markup language document.
Many of the properties utilized in Cascading vogue Sheets (CSS) square measure just like those of markup language. Thus, if you\'re wont to use markup language for layout, you\'ll presumably acknowledge several of the codes. allow us to investigate a concrete example.
The basic CSS syntax
Let\'s say we would like a pleasant red color because the background of a webpage:
Using HTML
<body bgcolor="#FF0000"> With CSS Same result:
body {background-color: #FF0000;} Apply CSS to an HTML
Applying CSS to AN hypertext mark-up language document
There square measure 3 ways you\'ll apply CSS to AN hypertext mark-up language document. These ways square measure all printed below. we have a tendency to suggest that you just specialise in the third methodology i.e. external. Method 1: In-line (the attribute style)
One way to use CSS to markup language is by mistreatment the markup language attribute vogue. Building on the on top of example with the red background color,it will be applied like this: <html><head><title>Example</title></head><body style="background-color: #FF0000;"><p>This ispagered </p></body></html>
Method 2:Another way CSS codes using the html tag
<html><head><title>Example</title><style type="text/css">body {background-color: #FF0000;}</style></head><body><p>This ispagered</p></body></html>
Method 3: External (link to a mode sheet)
The suggested methodology is to link to a supposed external sheet. Throughout thistutorial we are going to use this methodology altogether our examples.
An external sheet is solely a document with the extension .css. like several different file, you\'ll place the design sheet on your net server or hard disc.
For example, to Illustrate that your sheet is called vogue.css and is found in a very folder named vogue. things will be illustrated like this: <link rel="stylesheet" type="text/css" href="style/style.css" />
Try It: index.htm
<html><head><title>My document</title><link rel="stylesheet" type="text/css" href="style/style.css" /></head><body>
style.css
body {background-color: #FF0000;}
Now place the 2 files within the same folder. bear in mind to save lots of the files with the correct extensions (respectively \".htm\" and \".css\")
Open default.htm along with your browser and see however the page contains a red background. Congratulations! you have got created your initial vogue sheet! Back Ground Color with CSS
The color property describes the foreground color of a part.
For example, imagine that we wish all headlines in an exceedingly document to be redness. The headlines ar all marked with the HTML part . The code below sets the colour of components to red.
h1 {
color: #ff0000;
} Colors may be entered as positional notation values as within the example on top of (#ff0000), otherwise you will use the names of the colours (\"red\") or rgb-values (rgb(255,0,0)).
Back Ground Color
The background-color property describes the background color of components.
The part contains all the content of Associate in Nursing HTML document. Thus, to alter the background color of a whole page, the background-color property ought to be applied to the part.
You can additionally apply background colours to different components together with headlines and text. within the example below, completely different background colours ar applied to and components.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
0 comments:
একটি মন্তব্য পোস্ট করুন