Introduction
Cascading style sheets give we more control over the appearance and presentation of your pages. Using cascading style sheets, we can extend the ability to precisely specify the location and appearance of elements on a page and create special effects. We can also make your site more accessible for visitors with specialized browsers or output devices. There are many newly defined CSS elements in CSS 2.1 or CSS 3.0, and there is probability not to work on every browser. Opera is one of the browser, which supports highest level of CSS in browser market.
The contents of a style sheet
A cascading style sheet (CSS) defines the styles that we can apply to pages or page elements. Each style definition, or style rule, consists of a selector followed by the properties and values for that selector. The following are simple examples of style rules defined in a style sheet:
H1 { font-size: x-large; color: green }
H2 { font-size: large; color: blue }
.note { font-size: small }
#footer { font-family: serif }
In the example, H1 and H2 are selectors that modify the formatting properties of standard HTML tags. The selectors' properties and values are contained within the curly braces { } - font-size is a property, and x-large is the value of the font-size property. We can specify multiple properties for a selector by separating each with a semi-colon ( ; ). In the example, .note is a class selector, and #footer is an ID selector.
Using cascading style sheets, we can set a wider range of properties than using standard HTML or XHTML alone, including:
- Font effects, such as SMALL CAPS and expanded character spacing.
- Paragraph properties, such as indentation, line spacing, and spacing before or after.
- Borders and shading properties, such as boxes and background colours.
- Positioning properties, such as text wrapping around page elements, absolute or relative positioning of page elements, and z-order (front to back layering) of page elements.
Important constraint
It is mostly recommended to use all tags in upper letters to avoid any unusual usages.
Use a style sheet with a page
There are three ways we can use style sheets on pages in your web:
- Create an embedded style sheet on a page.
- Link a page to an external style sheet.
- Apply inline styles to individual page elements.
Each method has advantages and disadvantages:
- Use an external style sheet when we want to apply the same styles consistently across some or all pages in your web. By defining styles in one or more external style sheets and linking them to pages, we ensure consistency of appearance throughout those pages. If we decide to change a style, we need only make one change - in the external style sheet - and the change will be reflected in all of the pages linked to that style sheet. Typically, an external style sheet uses the .css file name extension, such as Mystyles.css.
- Use an embedded style sheet when we want to define styles only for the current page. An embedded style sheet is a type of cascading style sheet that's "embedded" within the <HEAD> tags of a page. Styles in an embedded style sheet can be used only on that same page.
- Use inline styles to apply cascading style sheet properties to individual elements on a page. If a page is linked to an external style sheet, the embedded or inline styles that we create for that page will either extend or override properties specified in the external style sheet.
Create or edit a style sheet
FrontPage 2000, 2003 now includes templates that we can use to create external style sheets for a web. We can start with a blank template or one that already contains a set of styles (for example, Arcs). When we save the style sheet, FrontPage uses the .css file name extension. To edit the style sheet, double-click it in the Folder List.
When we create or modify a style for a page using the Style command on the Format menu, FrontPage automatically creates an embedded style sheet (if it doesn't already exist), and saves the style as a class selector within the embedded style sheet.
We can use the Style dialog box to create new class selectors, modify or delete existing ones, or apply CSS formatting properties to standard HTML tags such as <H1>. When we click OK to close the dialog box, FrontPage writes the formatting characteristics back to the external or embedded style sheet using the proper syntax. Or, we can simply type the style information in proper CSS syntax. To type style information for an embedded style sheet, click the HTML tab in Page view.
If we select the Apply using CSS check box for a theme applied to a web, FrontPage creates an external style sheet named Theme1.css in the root of your web, where Theme is the name of the theme. If we modify the theme, FrontPage writes the changes back to the theme CSS automatically. We can also modify the theme by directly editing the theme CSS.
Use a style sheet
(i) Embedded Style Sheet (CSS)
<html>
<head>
<title>CSS Checking</title>
<style type="text/css">
H1.myclass {border-width: 1; border: solid; text-align: center}
</style>
</head>
<body>
<H1 class="myclass">
Hello
this is text with css
</H1>
<H1>
Hello
this is text without css
</H1>
</body>
</html>
(In below example only discussed id can use the css properties)
<html>
<head>
<title>CSS Checking</title>
<style type="text/css">
#myid {border-width: 1; border: solid; text-align: center}
</style>
</head>
<body>
<H1 class="myid">
Hello
this is text without css
</H1>
<H1>
Hello
this is text without css
</H1>
<H1 id="myid">
Hello
this is text with css
</H1>
<p id="myid">
this
is paragraph with same css
</p>
</body>
</html>
(One more example on div context)
<html>
<head>
<title>CSS Checking</title>
<style type="text/css">
div.mycss { text-align: center; color:blue }
</style>
</head>
<body>
<div>
text
without div css
</div>
<div class="mycss">
text
with div css
</div>
</body>
</html>
(An advance example on css)
<html>
<head>
<title>CSS Checking</title>
<style type="text/css">
H1.myclass {border-width: 1; border: solid; border-color: red; border-right-color:
green; border-top
color: #b54; text-align: center; font-size: 0.7em; color: blue; }
div {border-width: 1; border: solid; text-align: center}
p {border-width: 1; border: solid; text-align: right}
body {border-width: 1; border: solid; text-align: left}
</style>
</head>
<body>
this
is body text which is in center align
<div>
this
is div text which is right align
</div>
<p>
this
is paragraph text which is right align
</p>
<H1 class="myclass">
this
is heading 1 text which is in center align and font is red
</H1>
</body>
</html>
(ii) External file Style Sheet (CSS)
this is css file context and the name of the file is mystyle.css
.parag { text-align: Center; font-family: Verdana; color: #0000FF }
#myid {border-width: 1; border: solid; text-align: center}
<html>
<head>
<title>CSS Checking</title>
<LINK rel="stylesheet"
media="screen"
href="mystyle.css"
type="text/css">
</head>
<body>
<p class="parag">
this
is text
</p>
<div id="myid">
this
is text
</div>
</body>
</html>
(ii) Inline Style Sheet (CSS)
Inline Style Sheets is a term that refers to style sheet information being applied to the current element. By, this instead of defining the style once then is applying the style against all instances of an element as we can say that in <P> tag or in <DIV> tag like this. Actually, it is not actually a style sheet because it is used as attribute of any tag. Here is the example given below:
<P>
Here
is my text that has no any CSS
</P>
<P style= "font-size: x-large; color: #ff9900">
Here
is my text that has CSS; similarly we can do with all XHTML tags.
</P>
HAVE A HAPPY CODING!