UNIVERSITY INSTITUTE OF COMPUTING

UNIT-2
Bachelor of Computer Applications
Web Designing

INTRODUCTION TO BASICS OF HTML DISCOVER . LEARN . EMPOWER

 Syllabus
Unit-II
Introduction to Cascading Style Sheets

Need for CSS, introduction to CSS, basic syntax and structure using CSS, background images, colors and
properties, manipulating texts, using fonts, borders and boxes, margins, padding lists, Positioning using CSS,
CSS2, Overview and features of CSS3.

Self-Study: Working with lists and tables.

3
UNIT 2 Introduction to CSS
Chapter2.1 Need for CSS, introduction to CSS, basic syntax and structure, using CSS, background images,
colors and properties,
Chapter 2.2 manipulating texts using fonts, borders and boxes, margins, padding lists
Chapter 2.3 Positioning using CSS, CSS2, Overview and features of CSS3.
POSITIONING USING CSS2

The list of all the CSS properties related to Position defined in the World Wide Web Consortium's
Recommended Specification for Cascading Style Sheets, Level 2.
• CSS – bottom
The bottom property defines an offset of the bottom edge of an absolutely positioned element from the bottom
edge of its positioning context, or the vertical distance which a relatively positioned element will be
displaced.
Possible Values
length − A fixed distance from the bottom of the positioning context.
percent − Some percentage of the height of the positioning context, assuming that the height of the context has
been set explicitly. If not, then a percentage value for bottom is treated as though it were auto.
auto − Default. Lets the browser calculate the bottom position.
Applies to
All the HTML positioned element.

4
• CSS - clip
The clip property defines the area outside which an absolutely positioned element's content is not visible.
Possible Values
auto − The clipping region is equivalent to the content area of the positioned element.
shape − A shape descriptor. As of CSS2, there is only one valid shape: rect(top right bottom left).
Applies to
block-level and replaced elements.
• CSS – left
The left property defines an offset of the left edge of an absolutely positioned element from the left edge of its
positioning context, or the horizontal distance which a relatively positioned element will be displaced.
Possible Values
length − A fixed distance from the left of the positioning context.
percent − Some percentage of the width of the positioning context, assuming that the width of the context has
been set explicitly.
auto − Default. Lets the browser calculate the left position.
Applies to
All the HTML positioned element.
5
• CSS - overflow
The overflow property determines how content which overflows its element's content area should be handled.
Possible Values
visible − Overflowing content should be displayed.
hidden − Overflowing content should not be displayed.
scroll − Overflowing content should not be displayed, but the user agent should provide some means of
accessing the hidden content (e.g., a set of scrollbars).
auto − The behavior caused by this value is dependent on the browser.
Applies to
All the HTML elements.

6
• CSS – right
The left property is used in positioning an element. The right property allows you to specify how far the element
is offset from the left of its containing block (for absolute positioning), or from the right of where the element
itself would normally have been (for relative positioning).
Possible Values
length − A fixed distance from the right of the positioning context.
percent − Some percentage of the width of the positioning context, assuming that the width of the context has
been set explicitly.
auto − Default, the browser calculate the left position.
Applies to
All the HTML positioned element.

7
• CSS – top
The top property defines an offset of the top edge of an absolutely positioned element from the top edge of its
positioning context, or the vertical distance which a relatively positioned element will be displaced.
Possible Values
length − A fixed distance from the top of the positioning context.
percent − Some percentage of the height of the positioning context, assuming that the height of the context has
been set explicitly. If not, then a percentage value for top is treated as though it were auto.
auto − Default. Lets the browser calculate the top position.
Applies to
All the HTML positioned element.

8
• CSS - vertical-align
The vertical-align property determines the alignment of text within a line, or within a table cell.
Possible Values
baseline − The baseline of the element is aligned with the baseline of the parent element.
sub − The baseline of the element is lowered to the point appropriate for subscripted text.
super − The baseline of the element is raised to the point appropriate for superscripted text.
top − The top of the element's box is aligned with the top of the line box, in the context of inline content, or with the top of the table
cell in the context of tables.
text-top − The top of the element's box is aligned with the top of the highest inline box in the line.
middle − The baseline of the element is aligned with the point defined by the baseline of the parent element plus half the x-height of
the parent element's font, in the context of inline content.
bottom − The bottom of the element's box is aligned with the bottom of the line box, in the context of inline content, or with the
bottom of the table cell in the context of tables.
text-bottom − The bottom of the element's box is aligned with the bottom of the lowest inline box in the line.
percentage − The baseline of the element is raised or lowered by the given percentage of the value for the property line-height.
length − The baseline of the element is raised or lowered by the given length value. Negative length values are permitted for this
property. A length value of 0 for this property has the same effect as the value baseline.
Applies to
inline-level elements and elements with a display of table-cell.
9
• CSS - z-index
The z-index sets the stacking level of an element.
Possible Values
auto − The stack level of the element is the same as that of its parent element.
integer − The stack level of the element is set to the given value, and it establishes a new stacking context for
any descendant elements.
Applies to
All the positioned elements.

10
 REFERENCES

• www.w3schools.com/html-introduction

• Complete Reference to HTML, Edition 4, Powell, Chapter 1.

• https://www.tutorialspoint.com/html/

11
THANK YOU