CSS- CASCADING STYLE SHEETS

-

 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>

Comments

Post a Comment

Popular posts from this blog

CLASS 8 PRACTICAL PAPER

-
  PRACTICAL EXAM 2023-24 CLASS VIII HTML Q1. Write the HTML Code for the following:- a.       A. India    B. Srilanka    c. Australia          OR   b.     10. History           11. Geography            12.    Civics Q2.       Write HTML Code for the following:-      A. ·       BIRDS ·       REPTILES ·       OMNIVORES OR   B.            P. Sun                   Q.   Moon                 R.   EARTH   Q3. Write HTML code to create th...
Read more

HTML FORMS

-
Image
                                                                      HTML FORMS Form: It provides an easy way to collect required information from web page visitors. Web page forms have three important parts: atag, form input elements, and a submit button An Input control is a type of input mechanism on a form. A form may contain several different types of input controls. • Text Input Controls (Text Box, Password Box) • Data Input Controls (Check Box, Radio Button, List Box, Combobox) • Button Controls (Submit Button) HTML forms are set of different form elements that allow to interact with the user by your HTML web page and collect the data and information from user. HTML Form fields HTML supports certain fields to collect different information from user. These fields are as following: 1.   ...
Read more

Organising and enhancing Webpages CLASS VIII

-
Image
  Chapter 6 Organising and enhancing Webpages 1.             Which of the following is not a type of bullet in an unordered list  (C)   Number 2.            Which attribute is used to display a list of items from the last to the first?     (a)  Reversed 3.           Which of these is used to create a definition list?     (d)  all of these 4.            Which of these is used to define a table heading?    (c) <th> 5.            Which of the following elements can you insert in a webpage using HTML?  (d)   Image, Audio, video   (B) T/F 1. The start attribute is used to decide the start value of the first item in an unordered list 1. FALSE 2. The bgcolor attribute ...
Read more