CSS (Cascading Style Sheets) CSS (Cascading Style Sheets)
A style sheet is a collection of rules that affect the appearance of a document. Currently, the most common type of style sheet is Cascading Style Sheets.
The Cascading style sheets can be divided into two types:
1. Internal
2. External
It also consists of two levels(versions)
1. Level one (css1)
2. Level two(css2)
CSS is primarily concerned with how a document should appear onscreen,when the viewer is using a graphical browser.
CSS uses style sheet rules to control about 50 different properties ,such as color, background, font face , border appearance, margins, alignment, and character spacing.
Internal Style Sheets
When the style sheet is declared inside the html page then it is termed as Internal CSS.
To create an Internal CSS we have to use a tag called style with attribute type.
<head>
<style type=”text/css”>
</style>
</head>
External CSS
When a css is declared outside HTML page and saved with the extension .css
then it is called an External css.
To use an external css we have to use
link tag with attributes rel and href.
<link rel=”stylesheets” href=”name of css file”>
This process is also called glueing css with html.
Making HTML and CSS work together
There are two types of glue : The first type is how you can attach a style sheet to an HTML document. The second type of glue is which HTML elements and attributes can help you work with style sheets.
There are four ways how we can associate a CSS style sheet with an HTML document.
1. Using Inline Style Sheets:
Example :<body style=”background:yellow”>
2. Embedding Style Sheets :
Example: <style type=”text\css”>
Body{background:color;}
3. Importing a Style Sheet: Here we import an external style sheets by placing “@import” statement at the top of the Style sheet.
4.Linking to External Style sheets : The best way of gluing an HTML style sheet is to link to an external style sheet using the link element .
There are three attributes for linking that must be set with two optional attributes:
i. The HREF attribute must point to the external style sheets file.
ii. The REL attribute must have a value of either “STYLESHEET” or “ALTERNATIVE STYLESHEET”
iii. The TYPE attribute must be “text/css”, unless you’ve set the default style sheet in the head section with meta command.
iv. Optionally, the TITLE attribute can indicate the name of the style sheet .
v. Optionally, the MEDIA attribute can indicate what media or medium this style sheet should apply to.
<HEAD>
<META HTTP-EQUIV=”Content-Style-Type” Content=’text/css”>
<LINK HREF=”ABC.CSS” REL=”STYLESHEET” TITLE=”CIT” MEDIA=”SCREEN”>
</HEAD>
APPLYING STYLES TO A CLASS WITH THE CLASS ATTRIBUTE
To create a style sheet class, use a period followed by the name you want for the class.
You can create classes that only apply to particular HTML elements by specifying that element, or you can create generic classes that can apply to every HTML element.
.a{ property:value}
Here “a” is a class which when applied with the HTML elements with attribute class “a”.
<p class=”a”>
Same thing can be used by using ID attribute. |