Presentation on

CSS(Height,Width,Text,Fonts)
Members of Group number 10
●
Azeem Nisar
●
Abdul Rehman
●
Ahmad Hassam
●
Arslan Bashir
●
Muhammad Aneer Zaman

2
 Height and Width

●
The CSS height and width ●
div {
properties are used to set ●
height: 200px;
the height and width of an
element. ●
width: 50%;
●
background-color:red;
●
The CSS max-width and ●
}
max-height property is used
to set the maximum width
and maximum height of an
element.

3
 Text Color

●
The color property is used to ●
body {
set the color of the text. The ●
color: blue;
color is specified by:
●
}
●
●
a color name - like "red"
●
h1 {
●
a HEX value - like "#ff0000"
●
color: green;
●
an RGB value - like
"rgb(255,0,0)" ●
}

4
 Text Alignment

●
The text-align property is ●
h1 {
used to set the horizontal ●
text-align: center;
alignment of a text. ●
}
●

●
h2 {
●
A text can be left or right
aligned, centered, or
●
text-align: left;
justified. ●
}
●

●
h3 {
●
text-align: right;
●
}
5
 Text Decoration

h1 {
The text-decoration-line
●
●
●
text-decoration-line: overline;
property is used to add a ●
}
decoration line to text. ●

●
h2 {
●
text-decoration-line: line-through;
●
}
●

●
h3 {
●
text-decoration-line: underline;
●
}
●

●
p{
●
text-decoration-line: overline underline;
●
}
6
 Text Transformation

●
The text-transform property ●
p.uppercase {
is used to specify uppercase ●
text-transform: uppercase;
and lowercase letters in a ●
}
text. ●

●
p.lowercase {
●
text-transform: lowercase;
●
}
●

●
p.capitalize {
●
text-transform: capitalize;
●
}
7
 Text (letter spacing, Line height, Indentation)

●
The letter-spacing property ●
h1 {
is used to specify the space ●
letter-spacing: 5px;
between the characters in a
text. ●
}
●

●
h2 {
●
letter-spacing: -2px;
●
}

8
 Text (letter spacing, Line height, Indentation)

●
The line-height property is ●
p.small {
used to specify the space ●
line-height: 0.8;
between lines:
●
}
●

●
p.big {
●
line-height: 1.8;
●
}
●

9
 Text (letter spacing, Line height, Indentation)

●
The text-indent property is ●
p{
used to specify the ●
text-indent: 50px;
indentation of the first line of
a text: ●
}

10
 Text Shadow

●
The text-shadow property ●
h1 {
adds shadow to text. ●
text-shadow: 2px 2px;
●
}

11
 Font

●
The font-size property sets the size ●
h1 {
of the text. ●
font-size: 40px;
●
●
}
●
Being able to manage the text size ●

is important in web design.

However, you should not use font
●
h2 {
size adjustments to make ●
font-size: 30px;
paragraphs look like headings, or ●
}
headings look like paragraphs.
●
●
●
p{
●
Always use the proper HTML tags,
like <h1> - <h6> for headings and
●
font-size: 14px;
<p> for paragraphs. ●
}
12
 Font

●
The font-size value can be an absolute, or relative size.
●

●
Absolute size:
●

●
Sets the text to a specified size
●
Does not allow a user to change the text size in all browsers (bad for accessibility
reasons)
●
Absolute size is useful when the physical size of the output is known
●
Relative size:
●

●
Sets the size relative to surrounding elements
●
Allows a user to change the text size in browsers
13
 Font Style

●
The font-style property is mostly ●
p.normal {
used to specify italic text. ●
font-style: normal;
●
}
This property has three values:
●
p.italic {
●
normal - The text is shown ●
font-style: italic;
normally ●
}
●
italic - The text is shown in italics
●
oblique - The text is "leaning" ●
p.oblique {
(oblique is very similar to italic, but ●
font-style: oblique;
less supported) ●
}
14
 Flexbox(Additional)

Before the Flexbox Layout module, ●

.flex-container {
there were four layout modes:
●
display: flex;
●
Block, for sections in a webpage ●
}
●
Inline, for text
●
Table, for two-dimensional table data
●
Positioned, for explicit position of an
element
●
The Flexible Box Layout Module,
makes it easier to design flexible
responsive layout structure without
using float or positioning.
15
 Flexbox Properties(Additional)
●
flex-direction
●
The flex-direction property defines in
●
.flex-container {
which direction the container wants to
stack the flex items.
●
display: flex;
●
The column value stacks the flex items ●
flex-direction: column;
vertically (from top to bottom):
●
The column-reverse value stacks the
●
flex-direction: column-
flex items vertically (but from bottom to reverse;
top): ●
flex-direction: row;
●
The row value stacks the flex items
horizontally (from left to right): ●
flex-direction: row-reverse;
●
The row-reverse value stacks the flex
items horizontally (but from right to left):
●
}

16
 Flexbox Properties(Additional)

●
The flex-wrap property ●
.flex-container {
specifies whether the flex ●
display: flex;
items should wrap or not.
●
flex-wrap: wrap;
●
The wrap value specifies that
the flex items will wrap if ●
flex-wrap: nowrap;
necessary: ●
The wrap-reverse value
●
The nowrap value specifies specifies that the flexible
that the flex items will not items will wrap if necessary,
wrap (this is default): in reverse order:
●
}

17
 Flexbox Properties(Additional)

●
The flex-flow property is a ●
.flex-container {
shorthand property for ●
display: flex;
setting both the flex-direction
and flex-wrap properties. ●
flex-flow: row wrap;
●
}

18
 Flexbox Properties(Additional)

●
The justify-content property is ●
.flex-container {
used to align the flex items
●
display: flex;
●
The center value aligns the flex
items at the center of the container ●
justify-content: center;
●
The flex-start value aligns the flex ●
justify-content: flex-start;
items at the beginning of the
container (this is default) ●
justify-content: flex-end;
●
The flex-end value aligns the flex ●
justify-content: space-
items at the end of the container: around;
●
The space-around value displays
the flex items with space before,
●
}
between, and after the lines:
19
 Flexbox Properties(Additional)

●
The space-between value ●
.flex-container {
displays the flex items with ●
display: flex;
space between the lines:
●
justify-content: space-
between;
●
}

20
 Flexbox Properties(Additional)

●
The align-items property is ●
.flex-container {
used to align the flex items. ●
display: flex;
●
The center value aligns the ●
height: 200px;
flex items in the middle of the
container ●
align-items: center;
●
The flex-start value aligns the ●
align-items: flex-start;
flex items at the top of the ●
align-items: flex-end;
container
●
}
●
The flex-end value aligns the
flex items at the bottom of the
container:
21
 Flexbox Properties(Additional)

●
The space-between value ●
.flex-container {
displays the flex lines with ●
display: flex;
equal space between them
●
height: 600px;
●
The space-around value
displays the flex lines with ●
flex-wrap: wrap;
space before, between, and ●
align-content: space-
after them between;
●
align-content: space-
around;
●
}
22
Thank You Very Much!

Any Question?

23