| |
SPAN and DIV Tags
All HTML tags, except for SPAN and DIV tags, apply meaning to the content they are applied on . Yet they are
used extensively in conjunction with CSS. SPAN and DIV tags are used to group a portion of the HTML code
and add some information on to that part.
There are some basic differences between SPAN and DIV tags.
SPAN tag is used to group inline elements to format them with styles and is usually used for a small portion
of code. It affects the style of the text it encloses. Inline elements include tags like A (Anchor), B (Bold),
BR (Break), Small, Strike, U (Underline) etc.
-
Text can be highlighted using SPAN tag.
-
Color can be added to the text.
-
Background image can be set for a text.
-
There is no closing tag for SPAN.
DIV element is Block line and is used to group larger portions of code. Div tag defines logical divisions
within the document. Whenever a <div> tag is encountered, it means the content enclosed in it is a
specific section of the page. Block level element include tags like Address, Center, DIR (Directory list),
HR (Horizontal Rule), H1, H2, H3, H4, H5, H6.
| |
| Summary |
| |
In this chapter you have learnt:
- The different methods of linking style sheets to your document
- Locating style sheets at different places
- Grouping various HTML elements through Span and Div tags
|
| |
| Review Questions |
| |
Fill in the Blanks
- _____ style sheets are also known as embedded style sheets.
- Style sheets are defined using _____ tag.
- _____ style sheets allow you to follow the same style in more than one web page.
- Pages are linked to the style sheet using _____ tag.
Solutions
- Internal
- Style
- External
- Link
State whether True or False
- Inline style sheet is applicable on more than one web page.
- Embedded style sheet is defined in the head section.
- Span tag is used to group various inline HTML elements.
- Text can be highlighted using span tag.
Solutions
- False
- True
- True
- True
| Exercise |
| Create an external style sheet and link it with 2 different pages. |
| Solution |
View code
|
|
|
Question
Which style sheet, among inline, external and embedded, is first recognized by the browser?
Solution
The browser first tries to apply an external style sheet, then an embedded and finally the style information that appears inline.
|
| |
| |
| What's Next |
The next chapter will acquaint you with the concepts of text formatting applicable on your web page. It will also tell you about different style options along with their various properties and possible values.
Hop over to the next chapter to get a close-up of various style sheets.
|
| |
|
