Font and Borders Flashcards
The _____ and ____ you use to your texts create
an impact to the overall feel of the website.
font and style
give your website
its character or what the site is all about
font
It helps
users understand the purpose of the website.
fonts
sets the font family, boldness,
size, and style of a text.
Font properties
Sets the font family for text.
font-family
Set in a way that you start with the font you
want and end with a generic family. If the
browser does not support the first font, it tries
the next font. (pabasa)
example:
p {
font-family: “Trebauche MS”, Helvetica, san-serif;
}
are small lines at the end of
the character.
Serifs
Times New Roman, Courier,
New Century Schoolbook and
Palatino. are examples of what font
serifs
These fonts are much easier to read
in printed works.
serifs
“sans” means
without
do not have
the lines at the end of the characters.
San serif fonts
Arial and
Verdana is an example of what font
sanserif
It is said that on computer
screen, these fonts are
considered easier to read than serif
fonts.
sans serif fonts
This sets the font size of a text.
Font-size
There are three
ways to set a font size:
with pixels, with em, or
with a combination of percent and em.
Sets the font style of a text.
Font-Style
There are three possible
values for font-style
normal,
italic and oblique.
This property sets whether a text should be
displayed in small caps or not.
Font-Variant
This sets the weight of a font. By default the value
of this property is normal.
Font-Weight
This makes the character of the text thick.
bold
This makes the character of the text thicker.
bolder
This makes the character of the text lighter.
lighter
allow you to specify the style,
width, and color of an element’s border.
CSS border properties
specifies the width of the four
borders.
border-width
is
used to set the color of the four
borders.
The border-color property
can have from one to four values
(for the top border, right border, bottom border, and the left
border).
border-color property
there are also
properties for specifying
each of the borders (top,
right, bottom, and left):
border sides
ex:
border-top-style: solid
border-bottom-style: dotted
border-right-style: dotted
border-left-style: solid
specifies what kind of border to
display.
border-style
BORDER STYLES EXAMPLE (PABASA)
Dotted
Dashed
Solid
Double
Groove
Ridge
Inset
Outset
None
Hidden
Dotted
Dashed
Solid
Double
Groove
Ridge
Inset
Outset
None
Hidden
