Scribd
Upload
1K views

HTML Notes Class 10th Cbse

Computer applications

Uploaded by

Jone's Food feast
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1K views

HTML Notes Class 10th Cbse

Computer applications

Uploaded by

Jone's Food feast
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

CHAPTER-5

Revision Notes

HTML BASICS
➢ HTML was invented in November 1990 by a scientist called Tim Berners Lee. The
purpose was to make it
easier for scientists at different universities to gain access to each other’s research
documents.
➢ HTML is a format that tells a computer how to display a web page. The documents
themselves are plain text files with special “tags” or codes that a web browser uses to
interpret and display information on your computer screen.
➢ The World Wide Web Consortium (W3C) has given a set of standards while building
the HTML language. The W3C uses some special words to define an action. A tag is a
special word enclosed in angle-brackets
< >.
➢ A tag tells the browser to perform an action as asked by the special word. The special word
may be written either in lower case or upper case. The browser will respond to both
the cases equally.
➢ The characteristics or the features of a tag are defined by an attribute. An attribute is
used inside a tag. An attribute always takes a value to help the browser perform the
specific task in a particular direction. There may be more than one attribute used inside
a tag. An element is a combination of a start tag, the text (we also use text to insert
graphics) and the end tag.
➢ The basic structure of HTML document is shown below:

<HTML>
<HEAD>
<TITLE> The Structure of HTML
Document</ TITLE>
</HEAD>
<BODY>
The Body of the HTML Document
</BODY>
</HTML>
➢ The basic structure of the HTML document is divided into two sections namely, the
head and the body. The browser enters the first section after executing the start tag of
HTML (telling the browser to begin interpreting the HTML commands) and start tag
of HEAD. The first section helps in changing the heading on the title bar of the HTML
document (the webpage). The starting of the heading is shown after the start tag of
<TITLE> and the end is shown by </TITLE>.
➢ The end tag of <HEAD> i.e. </HEAD> tells the browser that the end of first section
has come. The second section begins with the start tag of <BODY>. The data on the
webpage is displayed through the tags used in this section. The end tag of <BODY>
i.e.</BODY> tells the browser that the end of webpage has come.
➢ A container tag has both the start and the end tag. The text or the graphic is inserted
inside the beginning and end tag of the container tag. For example:<HEAD> and
</HEAD>
➢ The empty tag is a stand-alone tag. This implies that such a tag has beginning but
no ending tag. For example: <BR> The tag is used for adding one line break. Such a tag
does not need an end so as to tell the browser, that end of line break has come because
there is no need. Such a tag is called empty tag. <HR> is another empty tag. This tag is
used to insert a horizontal rule on the web page. Comment tag is also an empty tag.
The text inside this tag is ignored by the browser. Comment tag is denoted by <!---.. >.
This
tag is used to increase the readability of the HTML source code. With this tag, you can
insert a description about a command.
➢ The attributes that are used with BODY tag are listed below in the table:

Attributes of the Descripti


<body> tag on
BGCOLOR The background of the webpage is displayed with a color that
has been tak- en as value by this attribute.
BACKGROUND The background of the webpage is displayed with an image
whose address is taken as value by this attribute.
TEXT Specifies the color of the text in the document.
LINK Defines the color of the link in the document
ALINK Defines the color of the active link in the document
VLINK Defines the color of the visited link in the document

➢ Heading tag is used to display the heading or the main topic on the web page. This tag
varies from H1 to H6. This is a container tag. The heading tag shows the heading with
the largest font size. As you increase the number in the heading tag, the font size goes
down.
➢ The FONT tag is a container tag that has a number of attributes listed below in the table

Attributes of the <font> Descripti


tag on
FACE Sets the text to the name of the font used as its value.
SIZE Decides the scale of the text. It can range between 1 to 7
and the default size is 3
COLOR Changes the color of the text written inside the container
tag.
➢ A paragraph can be written on the web document using the <P> tag. This is a container
tag, though the closing tag is optional. It uses one attribute called align that takes the
value left, right or center.
➢ To make the text boldface, italics and underlined,

Tag Meaning
s
<B>, </B> Bold text
<I>,</I> Italics text
<U>, </U> Underlined text
➢ The <HR> element is used for horizontal rules that act as dividers between sections.
➢ SUB and SUP Tags: Subscript <SUB> and Superscript <SUP> tags allow the web
author to place specified text either slightly below <SUB> or above <SUP> the rest
of the text in a particular line. An example is shown below-

HTML Backgrounds
➢ The tag has two attributes where you can specify backgrounds. The background
can be a color or an image.
 Bgcolor: The bgcolor attribute specifies a background-color for an HTML page.
The value of this attribute can be a hexadecimal number, an RGB value, or a color
name:
<body bgcolor=“#000000”>
<body bgcolor=“rgb(0,0,0)”>
<body bgcolor=“black”>
All the above lines set the background-color to black.
 The background attribute can also specify a background-image for an HTML page.
The value of this attribute is the URL of the image you want to use. If the image is
smaller than the browser window, the image will repeat itself until it fills the entire
browser window.
<body background=“clouds.gif”>
<body background=“http://profdevtrain.austincc.edu/html/graphics/clouds.gif”>
Color Values
➢ Colors are defined using a hexadecimal notation for the combination of red, green, and
blue color values (RGB). The lowest value that can be given to one light source is 0 (hex
#00). The highest value is 255 (hex #FF). This table shows the result of combining red,
green, and blue:
➢ Note: Only 16 color names are supported by the W3C HTML 4.0 standard (aqua, black,
blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and
yellow). For all other colors, we should use the Color HEX value.

IMAGES
➢ You can insert an image using the <IMG> tag. This tag does not have an end tag.
➢ The basic syntax of <IMG> tag is given below:

The SRC Attribute


➢ The address or the path to the image is taken as value by SRC attribute.
➢ Case1: If you have saved “Rain.jpg” in “Documents” folder, then the address would be:
“C:\My documents\ My Pictures\ Rain.jpg”
➢ Case2: If you have saved “Rain.jpg” in the same folder as the HTML document, then
the address would be: “Rain.jpg”
➢ Case3: If “Rain.jpg” is not in your computer but is saved in folder ‘images’ of the web
server of google, then the address would be: “http://www.google.com/images/
Rain.jpg”
The ALT Attribute
➢ The alt attribute is used to define an alternate text for an image. The value of the alt
attribute is author- defined text:
➢ <img src=”graphics/rain.gif ” alt=”Raining Skies “>
➢ The alt attribute tells the reader what he or she is missing on a page if the browser can’t
load images. The browser will then display the alternate text instead of the image. It is
a good practice to include the alt attribute for each image on a page, to improve the
display and usefulness of your document for people who have text-only browsers or
use screen readers.

Image Dimensions
➢ The width and the height attributes define the boundaries of image. The value can be
an absolute number (recognised as pixels) or in percentage (in proportion to the size
of web window).
For example:
An image of height 150 pixels and width 200 pixels is inserted on webpage as:
<img src=”flower.jpg” width=”200” height=”150”>
Note: The image is made of pixels. When you increase the size of the image, the
resolution of the image gets decreased. This makes the image less clearer to view. The
width and height aren’t strictly necessary but help to speed the display of your web
page.
Longdesc
➢ If the description is too long, you can even attach an html file, in another attribute,
called “longdesc”. This attribute is complementary to “alt” attribute, as shown:
For example:
<img src=”flower.jpg” width=”200” height=”150” alt=”White Roses”
longdesc=”abc.html”>
Align
➢ You can use the “align” attribute to place the image on left or right side of the webpage.
If the align attribute is set to left, the image floats to the left margin. If it is set to right,
the image floats to the right margin.
For example :
<P>
<img src=”flower.jpg” alt=”White Roses” width=”32” height=”21” align=”left”>
The image will be flowed to the left side of the webpage and this text will therefore be
placed on right side.
</P>
➢ In the above code, the paragraph tag <p> helps in forming the paragraph to be
displayed along with the image on the webpage. “alt” attribute describes the image
when the image cannot be displayed by the browser. “height” and “width” attributes
decide the area of the image on the web page and the “align” attribute defines the
position of the image on the web page. Since the image is set to the left side, the text
flows towards the right side.

Know the Terms


➢ HTML – Hyper Text Mark-up Language
➢ Hypertext – The text that contains graphics and text
➢ Container tag – An HTML element requiring start as well as end tag
❑❑
CHAPTER-6
HTML ADVANCED-TABLES, LISTS
& LINKS

Topic- Lists and Links


1

Revision Notes
➢ HTML lists
Lists provide the information in a structured and easy to read format. The data item
on the webpage can be catalogued or indexed. The index that is formed using numbers
like 1,2,3,…, letters like a, b, c, ... or symbols like →,circle, square, disc is called a List in
HTML. These lists help in formatting the data and put them in a particular order. There
are three types of lists that you can use in HTML.These are:
• UL - creates an unordered or bulleted list
• OL - creates an ordered or numbered list
• DL - creates a definition or glossary list
➢ Unordered list <ul> ….</ul> It classifies the data items that have equal importance
i.e. none of the data items are ranked. They are identified by a symbol. It may be a 
square, a o circle or a ⚫ disc.
➢ Ordered lists <ol> … </ol> It classifies the data items that do not have equal
importance. All the data items are ranked. The ranking can be done using the
numbers, the roman numerals or letters.
➢ Definition lists <dl> …. </dl> These are the list elements that have an array of tags.
The list prepared by <dl> tag is similar to a dictionary. The other tags used with this
tag are <dt> to defines the definition term and <dd> defines the definition of the list
item.
➢ Inserting audio or video
When you prepare a webpage, an audio or a moving picture makes the page
impressive and pleasing. When you want to show the operations of your business, you
can do so by inserting a movie. Both the audio and video can be inserted using a plug-
in. A plug-in is a small computer program that extends the standard functionality of
the browser. You can insert such plug-in using the <embed> tag. The embed tag acts
as container to non-HTML resources.
• The <embed> element is used to insert audio. The <embed> tag defines a container for
external (non-HT- ML) content. The non-HTML contents are the objects other than the
text and the graphics used in HTML. They are sound effects, the video clips and moving
pictures. If you want to insert a song at the background of the webpage, use the following
code to embed a MP3 file in the webpage.
<embed height=”50” width=”100” src=” roar.mp3”>
➢ The above code displays an audio player (of the dimensions as specified in the code)
on one corner of the web page . The songs begin to play, the moment the webpage gets
opened. However, the user can stop or pause the song whenever desired. If you want
to place the audio player in the center, you can use the center element since it does
not have another attribute to place it in center of the window.
• The “autoplay” attribute of <audio> specifies that the audio will start playing as soon as it is
ready. The song inserted at the background of the webpage, use the following code to embed
and auto play a MP3 file in the webpage.
<audio controls autoplay> <embed height=”50” width=”100” src=”roar.mp3”>
</audio>
➢ The above code displays an audio player on one corner of the web page and the
songs begin to play automatically, the moment the webpage gets opened.
➢ Inserting video
A video file is recognized by the extension .mp4 or .avi.
<body> <center>
<embed height=”250” width=”320”
src=”movie.mp4”>
<br> <hr> </center>
</body>
➢ Inserting video using “preload” attribute
This attribute was formerly known as “autobuffer ” and it was a boolean attribute as
“controls”.
• none - does not buffer video file automatically.
• metadata - only buffers the metadata of video
• auto - buffer video file before it gets played. Use the following code to insert the video

<body> <center>
<video controls preload=”none”> <embed height=”250” width=”320” src=”movie.
mp4”> </video> </center> </body>
movie in the web- page, you can use the “preload” attribute with embed tag as shown
below:
➢ LINKS
An anchor element is used to create a hyperlink in a webpage. The word anchor has
come from the function performed by anchor in a ship. As an anchor supports the ship
when it reaches the shore, similarly, the linked document supports the text or the
picture on the homepage.
An anchor element consists of three parts.
1. The start tag <a> containing the attribute like href (mandatory), target (optional),
name (optional)
2. The text or the image to be hyperlinked
3. The end tag </a>.
➢ The basic syntax of anchor tag is:
<a href = “Address of the supporting web page” target = “_blank or _top” name =
“text”> text acting as hyperlink </a>
➢ The attributes of anchor tag are href, name and target.
• To link to a named anchor, add a hash mark (#) to the end of the Uniform Resource Locator
of the webpage followed by the name of the section.
• We can create an e-mail link on our webpage. The browser will read an e-mail link, using
the value starting with “mailto:” rather than http://, with your e-mail address rather than a
web address. The syntax is given below: <A HREF=”mailto:
ABC@oswaalbooks.com”>Contact Us </A>

Know the Terms


➢ Definition lists – Lists showing definition and descriptions ( like a dictionary)
➢ Ordered lists – Indented lists having numbers or letters in front of every list item
➢ Unordered lists – Bulleted lists

Topic-2 Tables
Revision Notes

➢ The data on the webpage can be represented in tabular form. In HTML, the format can
be defined using
<TABLE > tag. The <TABLE > tag arranges the data items on the web page in rows
and columns.
➢ The structure of table is formed using the Table tag. The rows of the table are formed using
the TR tag. The data in the cells of the rows are inserted using either the TH tag or the
TD tag. The TH tag encloses the Header object and makes the data boldface and center
aligned. The TD keeps the data in regular font and left aligned by default. The TH and
TD tags are nested inside the TR tag and the TR tag in turn is nested within the TABLE
tag.
➢ HTML Table Tags

Ta Descripti
g on
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a table for formatting.
<col> It is used with <colgroup> element to specify column properties for each
column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.

S.N Description Tags and Attributes Value


o. s
1. Define Table <TABLE ></TABLE>

2. Table Border <TABLE BORDER=?>


</TABLE>
3. Desired Width <TABLE WIDTH=?> (in pixels)
4. Width Percent <TABLE WIDTH=”%”> (percentage of page)
5. Table Row <TR></TR>
Alignment <TR ALIGN=LEFT|RIGHT|
6.
CENTER|MIDDLE|BOTTOM>
7. Table Cell <TD></TD> (must appear within table
rows)
Table Header <TH></TH> (same as data, except
8. bold & centered)
9. Alignment
<TH or TD
ALIGN=LEFT|RIGHT|
CENTER|MIDDLE|BOTTO
M>
10. No Linebreaks <TH or TD NOWRAP>

11. Desired Width <TH or TD WIDTH=?> (in pixels)

12. Width Percent <TH or TD WIDTH=”%”> (percentage of table)


13. Cell Color <TH or TD
BGCOLOR=”#$S$$$$”>
14. Columns to <TH or TD COLSPAN=?>
Span
15. Rows to Span <TH or TD ROWSPAN=?>

16. Table Caption <CAPTION></CAPTION>


17. Alignment <CAPTION ALlGN=TOP| (above/below table)
BOTTOM>
➢ ILLUSTRATION
1. Border : This attribute is used to insert the lines on four sides of the table. The inside
lines show the rows and columns of the table and the outside lines display the
dimensions of the table. This attribute takes the value as a number starting from 1
to any number.
<html>
<body>
<h4>Table headers:</h4>
<table border=”1”>
<tr>
<th>Name</th>
<th>Telephone</th>
</tr> <tr>
<td>Bill Gates</td>
<td>555 77 854</td></tr>
</table>
<h4>Vertical headers:</h4>
<table border=”4”>
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
</table>
</body>
</html>
2. Align : The align attribute helps in placing the table on the webpage. If you want to
place it in the center of the webpage, use the “center ” value, for right side use “right”
and for the left side of the web page, use the value “left”.
<html> Table headers :

<body>
<h4>Table
headers:</h4>
<table
border=”1”
align=”center
”>
<tr>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
</tr>
</table>
</body>
</html>
3. Width :The width attribute helps in identifying the breadth of the table in
comparison to the webpage. It accepts the value as a number (in pixels) or in
percentage (in proportion to the width of the webpage).
4. Border color: The colour of the lines inside and outside the table can also be changed
using the “Border Color ” attribute. It accepts the value as name of the colour. If you
omit this attribute, the colour of the table border is set to its default grey.

<html>
<body>
<h4>Table Example:</h4>
<table border=”1” width=”30%”
bordercolor=”red”>
<tr>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
</tr>
</table>
</body>
</html>
5. Bgcolor : The background color of a table can be set using the attribute bgcolor. This
attribute takes the name of the colour or hexadecimal number as value.
6. Background : If you want to place an image or a picture at the background of the
table, you can do so
using the background attribute. This attribute takes the value as the address or the
path of the picture. The picture may be a bitmap or a graphic image.
7. Cellpadding : It is used to specify the space between the borders of cell and contents
of the cell.
8. Cellpacing : It is used to set the distance between two cells.
➢ TD and TH element
The TH element or <TH> tag helps in identifying a table header. Correspondingly,
TD element or
<TD> tag identifies the table data cell. The text inserted using the TH element is in
boldface and cen- tred by default. Compared to this, TD element or the <TD> tag is
aligned to the left and the text is in regular font. The attributes used with <TD> or
<TH> tag are: Align, Colspan, Nowrap, Rowspan, Valign.
Align: The align attribute is similar to that of table, except that it aligns the text inside
the cell rather than the table. <insert as new bullet point>
Valign : Valign takes the value top, middle, bottom to vertically align the text inside a
cell.
Nowrap: The Nowrap attribute does not allow the text to flow to the next line in the
cell. If the sentence is wider than the width of the cell, nowrap will show the sentence
in one straight line.
Colspan: The colspan attribute helps in merging the columns of a row. This
attribute is not used with table tag but with the <TH> or the <TD> tag.
Rowspan :When the table’s cells span across more than one row, it is called
rowspan If we want to give the table a nice sidebar, this attribute is used. The
rowspan appears as merged cells.
Caption The <caption> tag is used to provide a text to the table so as to explain
the contents of the table. It is generally in bold, at center with respect to the table.
❑❑
CHAPTER-7

HTML FORMS AND


Topic-1 CSS

FORMS

Revision Notes

➢ In HTML, a form is a window that consists of the elements of a form called the form
fields. These fields may be text field, text area, drop-down box, radio buttons,
checkbox and/or a command button. HTML
forms are used to pass data to a server. A form can be inserted in HTML documents
using the HTML form element which acts as a container for all the input elements. All
the information collected by a form can be submitted to a processing agent (a file
containing a script made to process this information) that is usually specified in the
“action” attribute of the Form tag.
➢ The FORM tag has two important attributes: –
• ACTION – A URL specifying where the information is sent
• METHOD – How the data is sent (GET or POST)
• The basic syntax of a form is:
<form method ="get|post" action=" ">
<input>
<input>
</form>

Value Descripti
on
Get Default. Appends the form-data to the URL in name/value pairs:
URL?name value&name value
Post Sends the form-data as an HTTP post transaction
• Forms should use METHOD=”GET” when the form does not modify anything on the
server.
• Forms should use METHOD=”POST” when the form changes the state of the server
or sends a large
amount of data.
• GET and POST transport the form data in different ways.
➢ Controls
The devices that allow input of data into a form are
called the controls These include –
• Checkboxes and Radio buttons
• Menus
• Text inputs
• File selectors
• Hidden controls
• Buttons
➢ The INPUT Tag
• The INPUT tag is a multipurpose tag that creates many different types of controls
• The type of input is controlled by the TYPE attribute – It can be TEXT, PASSWORD,
CHECKBOX, RA- DIO, SUBMIT, RESET, FILE, HIDDEN, IMAGE, or BUTTON
• Almost all of these should have a NAME attribute
• Their initial state can be set with a VALUE attribute
• They can all be disabled with DISABLE
• An INPUT tag is never closed
➢ Checkbox
• It provides a checkbox on the form. The uses can choose more then one items from the
list.
• <input type=”checkbox” ...>
• The NAME attribute names this checkbox
• The CHECKED attribute (with no value) is used to indicate a pre-checked checkbox
• The VALUE attribute specifies the value bound to name if this checkbox is submitted
(default = ON)
Check all that apply:<br> Check all that apply:
<input type=”checkbox” name=”dogs”
checked>I like dogs<br> ✓ I like dogs
<input type=”checkbox” name=”cats” ✓ I like
checked>I like cats<br>
<input type=”checkbox” name=”pigs”>I cats I
like pigs
like
pigs
➢ Radio Button
• It provides a radio button on the form. Only one radio button of a group can be selected
at one time.
• <input type=”radio” ...>
• Used when user is to select one of many mutually exclusive options
Select one of the following:<br> Select one of the
<input type=”radio” name=”agree”
value=”a” checked >I agree following: I
completely<br> agree
<input type=”radio”
name=”agree” value=”b”>I
completely
agree a little<br> I agree a little
<input type=”radio” I disagree a little
name=”agree” value=”c”>I I disagree completely
disagree a little<br>
<input type=”radio”
name=”agree” value=”d”>I
disagree completely<br>
➢ Text Boxes
• <input type=”text” ...>
• Allows entry of one line of text
• Attribute SIZE specifies the width (in characters)
• Attribute MAXLENGTH specifies the maximum number of characters

User’s full name:


<input name=”fullname” type=”text” User's full name: Pavithra
size=”30” maxlength=”50”>
Karthik
➢ Password
• <input type=”password” ...>
• Identical to a text box, but text typed into the box is not readable
• Useful for submitting sensitive information (like passwords)
➢ Buttons
• <input type=”submit” ...> – Creates a button that submits the form to the server
• <input type=”reset” ...> – Creates a button that resets all form fields to their default state
• <input type=”button” ...> – Creates a button that does nothing

➢ Image Buttons
• <input type=”image” ...>
• Displays an image that behaves like a submit button
• The SRC attribute specifies the location of an image file
• The ALT attribute specifies some text to render if the image is not display
<input type=”image” src=”button.png” alt=”Submit”>

➢ Hidden Control
• <input type=”hidden” ...>
• Creates a control similar to a text control
– User does not see control
– User can not easily change the value
• Useful for keeping track of data as the user traverses a collection of pages
➢ TEXT AREA tag
• The TEXTAREA tag provides a multiline text entry area
• The ROWS and COLS attributes are required and they specify the number of rows and
number of columns
<textarea rows=”10” cols=”50”
name=”bigtext”> The preformatted initial text is
sandwiched within the tag.
The preformatted initial text is
sand- wiched within the tag.
</textarea>
➢ Lists
• Drop-down lists are created using the SELECT tag
• Attribute SIZE determines how many rows to display at once
• Each option is enclosed in an OPTION tag

<option value=”A”>India</option>

• The MULTIPLE attribute of the SELECT tag creates menus that allow multiple
selections
➢ Combo box
• Combo box in HTML is used to display a drop down list of some options from which one
can be selected.
• <OPTION> tag is used inside the <SELECT> tag that displays the options in the list.

➢ Labels
• The LABEL tag specifies that the enclosed item is a label for the named form element
• For example, clicking the label will shift the focus or change the state of the
associated form element

<br>

<br>

➢ Fieldsets
• The FIELDSET tag is used to group together a set of related form elements
• The LEGEND tag assigns a caption to a field set

First
Name:
Last
Name:
Date of
<br> Birth:
Topic- Cascading style sheets (CSS)
2

Revision Notes

➢ Cascading Style Sheet (CSS) is a style sheet language used for describing the look and
formatting of a document written in a markup language. It is a way to provide style to
HTML. Whereas the HTML is the meaning or content, the style sheet is the
presentation of that document.
➢ Cascading Style Sheet (CSS) is a simple mechanism for adding style (e.g., fonts, colors,
spacing) to Web documents.
➢ The advantages of using CSS are:
• It controls layout of many documents from one single style sheet.
• It has more precise control of layout.
• It applies different layouts to different media-types.
• It has numerous advanced and sophisticated techniques to be applied on web pages.
➢ The limitations of CSS are:
• CSS is very limited in browser compatibility.
• When you design a web page, you want it to display exactly as you like it.
• The problem with CSS is that it displays webpages very different in the different
browsers.
➢ Embedded CSS -The <style> Element
You can put your CSS rules into an HTML document using the <style> element. This tag
is placed inside the
<head>...</head> tags. Rules defined using this syntax will be applied to all the
elements available in the document. Here is the generic syntax:
<head>
<style type=”text/css”
media=”...”> Style Rules
............
</style>
</head>
➢ Inline CSS -The style attribute
You can use style attribute of any HTML element to define style rules. These rules will
be applied to that element only. Here is the generic syntax:
<element style=”...style rules ”>
➢ External CSS -The <link> Element
The <link> element can be used to include an external stylesheet file in your HTML
document. An external style sheet is a separate text file with .css extension. You define
all the Style rules within this text file and then you can include this file in any HTML
document using <link> element.
Here is the generic syntax of including external CSS file:
<head>
<link type=”text/css” href=”...” media=”. ” />
</head>
➢ Font

Property Descripti
on
font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-size Specifies the font size for text
font-style Specifies the font style for text
font-variant Specifies whether or not a text should be displayed in a small-caps font
font-weight Specifies the weight of a font
All the different font properties can be combined in one single property.
For example, to apply different font-properties for <p> tag following code can be
used:
p { font-
style: italic;
font-
weight:
bold; font-
size: 30px;
font-family: arial, sans-serif; }
➢ The order of values for font properties is: font-style | font-variant | font-weight |
font-size | font-family
➢ Text properties

Property Descripti
on
color Sets the color of text
direction Specifies the text direction/wanting direction
letter- Increases or decreases the space between characters in a text
spacing
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text- Specifies the decoration added to text
decoration
text-indent Specifies the indentation of the first line in a text-block
text-shadow Specifies the shadow effect added to text
text- Controls the capitalization of text
transform
text-overflow Specifies how overflowed content that is not displayed should be signaled
to the user
unicode-bidi Used together with the direction property to set or return whether the
text should be overridden to support multiple languages in the same
document
vertical-align Sets the vertical alignment of an element
white-space Specifies how white-space inside an element is handled
word- Increases or decreases the space between words in a text
spacing
➢ An Example of CSS Syntax
Let’s use a block of CSS to clarify what each of these items is.
h1 {
color: red;
font-size: 3em;
text-decoration: underline;
}
In this example, h1 is the selector. The selector is followed by a declaration block that
includes three declarations. Each declaration is separated from the next by a semicolon
(;). The tabs and line breaks are optional but used by most developers to make the CSS
code more human-readable.
• By using h1 as the selector, we are saying that every level 1 heading on the web
page should follow the
declarations contained in this rule set.
➢ The rule set contains three declarations:
• Color: red;
• Font-size: 3em;
• Text-decoration: underline;
color, font-size, and text-decoration are all properties. There are literally hundreds of
CSS properties you can use, but only a few dozen are commonly used.
We applied the values red, 3em and underline to the properties we used. Each CSS
property is defined to accept values formatted in a specific way.
For the color property, we can either use a color keyword or a color formula in Hex,
RGB or HSL format. In this case, we used the color keyword red. There are a few
dozen color keywords available in CSS3, but millions of colors can be accessed with
the other color models.
We applied the value of 3em to the property font-size. There are a wide range of size
units we could have used including pixels, percentages and more.
Finally, we added the value underline to the property text-decoration. We could
have also used overline or line-through as values for text-decoration. In addition,
CSS3 allows for the use of the line-styles solid, double, dotted, dashed, and wavy as
well the specification of text-decoration colors. We could have applied all three
values at once by using a declaration like this:
text-decoration: blue double underline;
That rule would cause the h1 in our initial example to be underlined with a blue
double line. The text itself would remain red as defined in our color property.
➢ CSS Comments
Comments are used to explain the code and may help when you edit the source code
at a later date. Comments are ignored by browsers. A CSS comment starts with /* and
ends with */. Comments can also span multiple lines: Example:
P{
color: red;
/* This is a single-line
comment */ text-align:
center;
}
/* This is a multi-line comment */
➢ CSS Rules
CSS Rules are the styles that we have to create in order to create style sheets. These
rules define appearance of associated HTML element. The general form of CSS
syntax is as follows:
➢ Selector {property: value;}
• Selector is HTML element to which CSS rule is applied.
• Property specifies the attribute that you want to change corresponding to the
selector.
• Property can take specified value.
• Property and Value are separated by a colon (:).
• Each declaration is separated by semi colon (;).
➢ Following are examples of CSS rules:
P { color: red;}
h1 (color: green; font-style: italic;
body { color: cyan; font-family: Arial; font- style: normal;}
• The property font-family is used to apply prioritized list of fonts in a web page.
• The property font-style defines the chosen font either in normal, italic or oblique.
• The Font-variant property is used to select normal or small-caps variants of a font.
• The Font-weight property describes how bold or “heavy” a font should be
presented. A font can either be
normal or bold.
• The font-size property is used to set the size of a font.
• The text-indent property allows you to add effects to text paragraphs by applying
an indent to the first line of the paragraph.
• The text-align property gives the same effect as attribute align gives in old versions
of HTML. The text can either be aligned to the left, to the right or center of the
screen.
• The text-decoration property makes it is possible to add different “decorations” or
“effects” to text.
• The Letter-spacing property is used to give the specified spacing between the text
characters.
• The text-transform property controls the capitalization of a text. You can choose to
capitalize, use uppercase or lowercase effects to be applied on text in the HTML
code.
• The color property describes the foreground color of a text to be displayed in
browser.
• The background-color property describes the background color of browser window.
• The background-image property is used to insert a background image in a web
page.
• The background-repeat property repeats the image set as a background for the web
page.
❑❑

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy