CSS-II

Reem Fida Muhammad

CONTENTS

1. Margin

2. Padding

3. Box Model

4. Outline

5. Text

6. Links

7. Lists

8. Tables

9. Float

10. Alignment

11. Navigation
01

Margin
Introduction to Margin

● Margin = the space outside an element ’ s border.

● It creates space between one element and another.

● Transparent (has no color or background).

Example of Margin

<style>

p {

border: 2px solid blue;

margin:20px;

</style>

<p> This paragraph has a 20px margin on all sides. </p>

02

Padding
Padding

Padding = the space inside an element, between its

content and its border.

Unlike margin, padding is part of the element ’ s box

and pushes the content inward.

Padding is visible because it inherits the element ’ s

background color or image.

You can set padding for each side:

padding-top → space above content

padding-right → space to the right

padding-bottom → space below

padding-left → space to the left

Padding Example

<style>

p {

border: 2px solid blue;

padding: 20px;

background-color: lightyellow;

</style>

This paragraph has 20px padding on all sides.

Margin → space outside the border.

Padding → space inside the border.

Box Model

● Every HTML element is treated as a box in CSS.

● The box model describes the structure of that box —

how its content, padding, border, and margin

interact to define its total size.

● Parts of the Box Model

● Content → The actual text, image, or content inside

the element.

● Padding → Space inside the border, around the

content.

● Border → The line surrounding padding + content.

● Margin → Space outside the border, separating the

element from others.

Box Model Example

div {

width: 200px; /* content width */

padding: 20px; /* padding on all sides */

border: 5 px solid red; /*border thickness */

margin: 10 px; /* margin on all sides */

}
03

Outline
Introduction to Outline

Outline is a line drawn around an element, outside the border.

It is mainly used to highlight elements, especially during focus (like when using the tab

key to navigate a form).

Key Points

Does not affect layout → Unlike borders, outlines

do not take up space and do not shift other

elements.

Always rectangular → Even if the element has

rounded corners, the outline remains rectangular.

Commonly used for accessibility → Browsers show

a default outline on focused inputs, links, and

buttons to help keyboard users.

Outline Properties

● outline-style →Type of outline (solid, dashed, dotted, double, none, etc.).

● outline-color →Color of the outline.

● outline-width → Thickness of the outline.

● outline-offset → Adds space between the outline and the border.

● Example

● button:focus {

outline: 2px solid blue;

outline-offest: 4px; }
04

Text
Introduction to Text

Styling

● Text styling controls how text looks on a webpage —

its font, size, color, spacing, decoration, and

alignment.

● This makes content more readable and visually

appealing.
Font Properties

font-family font-size → font-style →

→ Sets the Controls size Normal,

typeface (px, em, rem, italic, or

(e.g., Arial, %, etc.). oblique.

Times New

Roman,

Verdana).

font-weight → font-variant → e.g.,

Thickness (normal, small-caps.

bold, 100 ‒900).

Text Decoration and

Alignment

1 2

Text Decoration Text Transform

underline, overline, line- Changes case: uppercase,

through, or none. lowercase, capitalize.

3 4

Text Alignment Line Height & Letter

Spacing
left, right, center, justify.

line-height → space

between lines letter-spacing

→ space between characters

word-spacing → space

between words.
Example of Text Styling

p {

font-family: "Arial", sans-serif;

font-size: 16px;

font-weight: bold;

font-style: italic;

line-height: 1.6;

letter-spacing: 1px;

a { text-decoration: underline; }

h1 { text-transform: uppercase; }

p { text-align: justify; }

h2 { text-shadow: 2px 2px 5px gray; }

05

Links
Introduction to Links

Links (anchor tags) can be styled to change how they

look in different states (normal, hovered, clicked, etc.).

Links have 4 main pseudo-classes:

a:link → Normal, a:visited → Link that

unvisited link. the user has already

visited.

a:hover → When the a:active → When the

user places the link is being clicked.

mouse pointer over

the link.
Example of Links

/* Unvisited link */

a:link {

color: blue;

text-decoration: none; }

/* Visited link */

a:visited {

color: purple;

/* Hover link */

a:hover {

color: red;

text-decoration: underline;

/* Active link (when clicked) */

a:active {

color: orange;

}
06

Lists
Lists Style

● list-style-type: Defines the type of marker.

● For unordered lists : disc ( ● ), circle ( ○ ), square ( ■ ),

none (no bullet).

● For ordered lists : decimal, upper-roman, lower-

roman, upper-alpha, lower-alpha.

● ul {

list-style-type: square;

● ol {

list-style-type: upper-roman;

}
Lists Style

● list-style-position: Controls where the bullet/number

appears: outside → marker outside the list item

(default);

inside → marker inside the list item text.

ul {

list-style-position: inside;

● list-style-image: Replaces the bullet with a custom

image.

ul {

list-style-image: url("[Link]");

}
 List Example

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: square;

list-style-position: inside;

ol {

list-style-type: upper-alpha;

</style>

</head>
 List Example

<body>

<h3>Unordered List</h3>

<ul>

<li>Tea</li>

<li>Coffee</li>

<li>Juice</li>

</ul>

<h3>Ordered List</h3>

<ol>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ol>

</body>

</html>
07

Tables
Table Properties

● border

Defines the tables border.

table, th, td { border: 1px solid black; }

● border-collapse

Controls whether borders are separate (default) or collapsed into

one.

table { border-collapse: collapse; }

● width and height

Sets the width of the table and height of rows/cells.

table { width: 100%; } th, td { height: 50px; }

● hover effect:

Highlight rows when hovered.

tr:hover { background-color: /#f1f1f1; }

Table Properties

● text-align & vertical-align:

Aligns text inside cells.

th { text-align: left; } td { vertical-align: top; }

● padding:

Adds space inside cells (between content and border).

td, th { padding: 15px; }

● background-color:

Colors cells, rows, or the whole table.

th { background-color: lightgray; }

td { background-color: /#f9f9f9; }

● caption-side:

Controls where the is displayed.

caption { caption-side: bottom; }

Table Example

<head> th {

<style> background-color: #4CAF50;

table { color: white;

width: 80%; }

border-collapse: collapse; }

tr:nth-child(even) {

table, th, td { background-color: #f2f2f2;

border: 1px solid black;} }

th, td { tr:hover {

padding: 12px; background-color: #ddd;

text-align: center; } }

</style>

</head>
Table Example

<body> <tr>

<h2>Student Marks Table</h2> <td>Bob</td>

<td>Science</td>
<tr>
<td>92</td>
<th>Name</th>
</tr>
<th>Subject</th>

<th>Marks</th> <tr>

<td>Charlie</td>
</tr>
<td>English</td>

<td>78</td>
<tr>
</tr>
<td>Alice</td>

<td>Math</td> </table>

<td>85</td>
</body>
</tr>
08

Float
Introduction to Float

● The float property in CSS is used to position

elements to the left or right of their container,

allowing other content (like text or inline elements)

to wrap around them.

● Originally, float was designed for wrapping text

around images, but its also used for layout (though

nowadays Flexbox/Grid are preferred).

Float Property Values

float left; → Floats float right; → Floats

the element to the the element to the

left. right.

float none; → float inherit; →

Default, element is Inherits float

not floated. proper ty from

parent.
Example of Float

<head>

<style>

img {

float: right;

margin: 10px;

<style>

<head>

<body>

<p> <img src= “ [Link] ” width= “ ”

150 height= “ ”
150 > This

is example of text wrapping . The image is floated to right </p>

</body>
09

Alignment
Text and Vertical Alignment

1 Text Alignment (text-align)

2 Vertical Alignment (vertical-align)

• left → Aligns text to the left (default for • Used for inline or table-cell elements.

most languages).
• Values: top, middle, bottom, baseline.

• right → Aligns text to the right.

• Example: aligning text within a table

• center → Centers the text. cell.

• justify → Stretches text so lines are

equal width.
10

Navigation
Types of Navbars

Types of navbars in CSS:

1 2

Horizontal bars ‒ links are placed side by side Vertical bar ‒ links are stacked on top of each
(row). other (column).
Common CSS Properties for Navbars

list-style-type: none; → display: inline; or background-color → sets

removes bullets if is used. display: inline-block; → makes navbar background.

links appear side by side.

padding and margin → adjust text-decoration: none; → :hover pseudo-class → changes

spacing. removes underline from links. style when mouse hovers over

links.
Positioning Navbars

fixed → navbar stays at the top of the page when scrolling.

2
sticky → navbar sticks to the top when you scroll past it.
Example

<style>

ul {

list-style-type: none; /* remove bullets */

margin: 0; padding: 0; overflow: hidden;

background-color: /#333; /* navbar background */

li {

float: left; /* place items side by side */ }

li a { display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none; }

li a:hover {

background-color: /#111; /* hover effect */ }

</style>

The float : left ; makes the list items line up horizontally.

Thank You