Fonts and Display
Fonts and Display
The Display Property
The CSS display
property is used to determine whether an element is treated as a block/inline
element and the layout used for the children (flex box/grid/etc.).
Display: block
Takes full
space available in width and leaves a newline before and after the element.
Display : inline-block
Similar to
inline but setting height, width, margin and padding is allowed. Elements can
sit next to each others.
Display : None Vs Visibility : hidden
With
display: None, the elements is removed from the document flow. Its space is not
blocked.
With
Visibility: hidden, the element is hidden but its space is reserved.
Text-align Property
Used to set
horizontal alignment (left/right/center) of a text
.div {
Text-align :
center ;
}
Text-decoration Property
Used
to decorate the text.
Can
be overline, underline, line through, none.
Text Transform Property
Used
to specify Uppercase and lowercase letters in a text.
p.uppercase
{
text-transform
: uppercase;
}
Line-height property
Used
to specify the space between lines.
.small
{
Line-height:
0.7 ;
}
Font
Font
plays a very important role in the look and feel of a website.
Font family
Font
family specifies the font of a text.
Can
hold multiple values as a “fallback” system.
p
{
font-family
: “times new roman”, monospace ;
}
Always
do this to ensure the correct font of your choice is rendered.
Web Safe Fonts
These
fonts are universally installed across browsers. Some browsers supports a
limited number of font family only.
How to add Google Fonts
In
order to use custom google fonts, go to google fots then select a style and
finally paste it to the Style.css of your page.
Other Font Properties
Some
of the other font properties are listed below:
Font-size;-
Sets the size of the font.
Font-style:-
Sets the Fot style.
Font-variant:-
Sets whether text is displayed in small caps.
Font-weight:-
sets the weight of the font i.e. how dark or light font is visible to client or
user.
Comments
Post a Comment