It is a language that describes the style of HTML document. You can set border properties,
font properties, background properties, margin properties of an HTML document using CSS.
CSS Terminology
Selector- A selector is an HTML tag at which style will be applied. This could be any tag like
<h1> , <p> or <font> etc.
Property- It is a type of attribute of HTML tag. Property includes color, background-color,
height, width, border-style, font-size etc.
Value- Values are assigned to the properties. For example- color: red
Declaration- A property and its value collectively known as declaration.
Example
Declaration Separator
Declaration
H1 {color: red; font-size: 20px}
Selector Property Value Property Value
Methods of Applying CSS
1. Inline:- In this method styles are embedded inside the HTML tag.
2. Internal:- In this method styles are placed within the header information of web page.
3. External:- In this method styles are coded as separate documents which is then referenced
from within the header of the web page..
CSS- CASCADING STYLE SHEETS
INLINE STYLES
Inline Style Sheets are included with HTML document i.e., they are placed inline with the
element. To add inline CSS, we have to declare style attribute which can contain any CSS
property. In inline Styles, declaration is enclosed in double quotes. The syntax is as follows:
<H1 STYLE= “COLOR: RED”>-------</H1>
PROGRAM TO SHOW WORKING OF INLINE STYLES
<HTML>
<HEAD>
<TITLE>CSS</TITLE>
</HEAD>
<BODY>
<H1 STYLE= “COLOR: RED”>COMPUTER</H1>
<P STYLE= “COLOR: BLUE” >
A computer is an electronic machine that works under the instructions given by
you
</P>
</BODY>
</HTML>
OUTPUT
INTERNAL STYLES
Internal Style Sheets are useful if website consists of a single page because you can change
both style rules and HTML in same file. Internal styles are defined within the <STYLE>
element, inside the <HEAD> section of an HTML page. The syntax is as follows:
<HEAD>
<STYLE TYPE= “text/css”>
H1{color:red}
</STYLE>
</HEAD>
PROGRAM TO SHOW WORKING OF INTERNAL STYLES
<HTML>
<HEAD>
<TITLE>CSS</TITLE>
<STYLE>
H1 {color: blue}
BODY {color: red}
</STYLE>
</HEAD>
<BODY>
<H1> COMPUTER</H1>
A computer is an electronic machine that works under the instructions given by
you
</BODY> </HTML>
No comments:
Post a Comment