CSS stands for Cascading Style Sheets. CSS is a simple design language which enables to simplify the process of making web pages. It regulates how an HTML web page will be presented on a web browser. It saves a lot of time of the user while making website as one style sheet can be used with a number of web pages.
With cascading style sheet one can control the text color, background, paragraph spacing, column size, layout designs etc in web pages in short time period.
A CSS comprises of style rules that are interpreted by the web browser and then applied to the corresponding elements in a document. Its style rule is made of two parts: Selector and Declaration. Declaration can be further divided into two parts: Property and Value. Syntax is:
Selector {Property:Value}
- Selector: It specifies an HTML tag, to which a style will be applied. Selector could be any tag like <Table>, <H>, <P> etc.
- Property: It is a type of attribute of HTML tag such as text color, size, background image, paragraph spacing etc.
- Value: It is the value assigned to the property or attribute of the HTML tag. It is followed by 'Property' and separated by Colon (:) from the property.
A CSS declaration block is enclosed by curly braces ({}) and always ends with a semicolon (;). A declaration block may contain one or more declarations separated by semicolon.
Selectors can be defined in various ways. Some of the selectors are illustrated below:
H1{color:blue}
Here H1 is the selector and 'color' is a CSS property. In this case all elements of H1 will appear in blue color, Let us take another example:
P {
text-align : center;
color : red;
}
Here P is a selector and text align and color are CSS properties.
How To Link a Stylesheet:
There are three ways of inserting or linking a style sheet.
- External Style Sheet
- Internal Style Sheet
- Inline Style
External Style Sheet
By using external style sheet, look of an entire worksheet can be changed by updating just one CSS file. One CSS file can be used with many HTML documents.To do so, a web page must include a reference to the external style sheet file within a <Link> tag inside the <Head> tag. Syntax to use <Link> tag in the web page is as follows:
<HEAD>
<LINK REL="Stylesheet" TYPE="Text/CSS" HREF="Name of Style sheet">
</HEAD>
Let us create a web page using external style sheet.
Step 1: Type the following code and save the file with .css extension.
Step 2: Use the preceding CSS file in your web page with the help of HREF attribute of the <LINK> tag.
Step 3: When you open your web page web browser, you will get the following output:
Internal Style Sheet
Internal style sheet is applicable only with one web page in which it is used, because it is not an external CSS file rather it is written inside the HTML web page. So it is called Internal style sheet. <STYLE> tag is used inside the <HEAD> tag for an internal style sheet. Syntax is :
<STYLE>
SELECTOR
{
Property : Value;
}
SELECTOR{Property:Value;}
</STYLE>
Inline Style: Inline style is used to apply a unique style to a single element of a web page. Syntax to use inline style is as follows:
<element style = ".........style rules.........">
Background Color:
The background color property of style sheet is used to change the background color of an element. Syntax to apply background color in CSS is as follows:
<H1 STYLE ="background color : name of the color;"> text</H1>
CSS BORDER:
The CSS Border properties enables us to specify the style, width and colour of the border. Syntax to specify a border is
<BODY>
<P> STYLE ="BORDER-STYLE: Name of the border;">
Text
</P>
</BODY>
All the four sides of a border can also be individually customized to have different style of border.
- Border-Bottom-Style is used to change the style of bottom side of border.
- Border-Top-Style is used to change the style of top side of border.
- Border-Left-Style is used to change the style of left side of border.
- Border-Right-Style is used to change the style of right side of border.
BORDER COLOR:
The border-color property enables us to set the color of the border and different colors to all individual sides of a border. If color of the border is not specified, it inherits the color of the text which is surrounded by the border. Syntax to use 'border-color' property is as follows:
<P style="border-color:name of the color; border-style:name of the style;"
text
</P>
BORDER WIDTH:
The 'border-width' property is used to set the width of the border. All the four sides of a border can also be customized by different width of border. The value width could be either a length in 'px', 'pt' or 'cm' or it should be set to thin, medium or thick. Syntax to use 'border-width' property is as follows:
<P style= "border-width: value of width; border-style: name of the style;">
Write HTML code with the help of Inline Style Sheet concept to display the following content in a web page:
Ans. Write the following codes in Notepad:
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 Style="Background-color:yellow;">Quote of the Day</H1>
<H2 Style="Border-top-style:Dashed;
Border-bottom-style:Dashed;
Border-Left-style:none;
Border-Right-style:none;">
Honesty is the Best Policy</H2>
</BODY>
</HTML>
Save the file with extension '.html'.
Open it by double clicking the browser icon. You will find the below web page.
CSS MARGIN:
CSS 'Margin' property make us able to set the blank space around HTML elements or text area or outside the border. We can set set the blank space as we have desired around the text of a web page by giving the numerical value in "px" with margin attribute. In same way we can overlap the text also by giving negative numeric value with margin attribute. Properties to set margin around an element are:
- Margin: It specifies the top, right, left and bottom margin of an element.
- Margin-top: It is used to set the top margin of an element.
- Margin-bottom: It is used to set the bottom margin of an element.
- Margin-left: It is used to set the left margin of an element.
- Margin-right: It is used to set the right margin of an element.
Syntax to use the 'margin' property is as follows:
<P Style="Margin-top:Value; Margin-bottom:Value; Margin-left:Value; Margin-right:Value;">
Text
</P>
CSS HEIGHT AND WIDTH:
The height and width properties enable to set the height and width of an element. It is also used to set the height and width of the area inside the border, margin etc of element.
The height and width attributes followed by numeric values in 'px', 'cm' or in percentage with respect to the previous one.
Syntax to use height and width properties of CSS is as follows:
<P Style="height:value; width=value;">
Text
</P>
CSS OUTLINE:
An outline is a line that is drawn around an element to show it special one. An outline is differ from the border as it is drawn outside the border and it may overlap the other content. CSS has the following outline properties (attributes):
- 'Outline-width' propery is used to set the width of the outline.
- 'Outline -style' is used to set the style of the outline like: solid, dashed, dotted, ridge etc.
- 'Outline -color' is used to set the color of the outline.
- 'Outline -offset' is used to add the space between the outline and the border of an element.
- 'Outline' property is used to set the above four properties in a single statement.
Syntax to use the outline property of CSS is as follows:
<P Style= "Outline-width: Value of width;
Outline-color: Value of color;
Outline-style: Value;
Outline-offset:Value;">
Text
</P>
CSS font property is used to define the font family, font style and font size etc. of the text. Following are the properties of the CSS FONT:
- Font-Family is used to change the face of the font. The font family property works on the principal of 'fallback' system i.e. if the web browser is not compatible with the first font, it tries the next font and so on. If the name font family is more than one word, it must be quotation mark like"Times New Roma". More than one font family can be written as separated from each other by comma(,).
Font-Style is used to make the text mostly like 'italic'. Other types of font style are 'normal' and 'oblique'.
- Font-Size is used to increase or decrease the size of the font.
<P Style="Font-Family:value1, value2,value3;
Font-Style:value;
Font-Size:value;">
Text
</P>
ALIGNING TEXT:
The text align property of CSS is used to align the text in desired position. There are four kinds of align property:
- Text-Align-left property aligns the text to the left side.
- Text-Align-right property aligns the text to the right side.
- Text-Align center property aligns the text to the center.
- Text-Align-justify property aligns the text to both left and right sides.
Syntax to use the text align property is as follows:
<P Style="Text-Align:left;">
<P Style="Text-Align:right;">
<P Style="Text-Align:center;">
<P Style="Text-Align:justify;">
Text
</P>
CSS FLOAT:
The float property is used for positioning and formatting content. It wraps the text around the images. The value of float property can be left/right or none.
- Float:Right property positions the image to the right side of the text.
- Float:Left property positions the image to the left side of the text.
- Float:none property position the image without any property.
Syntax to use the float property is as follows:
<IMG Style="float:value;"
<P> Text </P>
Assignment & Activity:
Q. Write HTML code (Use CSS concept) to display web page as shown below:
Specification:
Top Margin=100px Left Margin=150px Height=170px
Width=320px Background Color=Pink Border Width=10px
Border Type=Solid Border Color=Black Outline Width=20px
Outline type=Ridge Outline Color=Red Font Style=Italic
Font Size=40px Font Family=Verdana Text Alignment=Center
Ans. Write the following HTML and CSS codes in notepad.
<HTML>
<HEAD>
</HEAD>
<BODY>
<P Style="margin-top:100px; margin-left:150px;
height:170px; width:320px; Background-Color:pink;
Border-width:10px; Border-style:Solid; Border-
color:black; Outline:20px Ridge red; Outline-
offset:10px; Font-style:italic; Font-size:30px;
Font-family:verdana; text-align:center;">
FRIEND IN NEED IS A FRIEND INDEED
</P>
</BODY>
</HTML>
