CSS Part 2

Yang Agita Rindri

D4 Teknologi Rekayasa Perangkat Lunak
Politeknik Manufaktur Negeri Bangka Belitung
 CSS Padding
CSS has properties for specifying the padding for each side of an element:
1. padding-top
2. padding-right
3. padding-bottom
4. padding-left
All the padding properties can have the following values:
• length - specifies a padding in px, pt, cm, etc.
• % - specifies a padding in % of the width of the containing element
• inherit - specifies that the padding should be inherited from the parent element
Note: Negative values are not allowed.
 CSS Text
• Text Color
• Text Alignment
• Text Decoration
• Text Spacing
• Text Shadow
 CSS Text Color
• The color property is used to set the
color of the text. The color is
specified by:
1. a color name - like "red"
2. a HEX value - like "#ff0000"
3. an RGB value - like "rgb(255,0,0)"
 Text Alignment

• A text can be left or right

aligned, centered, or
justified.
 Text Decoration

• Properti text-decoration adalah properti untuk memberikan dekorasi

garis pada teks. Contohnya seperti garis bawah, garis atas, dan garis di
tengah (teks tercoret)
• none artinya tidak menggunakan dekorasi apapun;
• underline artinya kita akan memberikan dekorasi garis bawah;
• overline dekorasi dengan garis di atas teks;
• line-through dekorasi garis di tengah atau teks tercoret.
 CSS Font
• Font Familiy
• Font Web Safe
• Font Style
• Font google
 CSS Font
• In CSS there are five generic font families:
1. Serif fonts have a small stroke at the edges of each letter. They create a sense of
formality and elegance.
2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern
and minimalistic look.
3. Monospace fonts - here all the letters have the same fixed width. They create a
mechanical look.
4. Cursive fonts imitate human handwriting.
5. Fantasy fonts are decorative/playful fonts.
Font Family
 CSS Web Safe
• Web safe fonts are fonts that are universally installed across all browsers and
devices.
• There are no 100% completely web safe fonts. There is always a chance that a font
is not found or is not installed properly.
• It is very important to always use fallback fonts. You should add a list of similar
"backup fonts" in the font-family property
• p {
font-family: Tahoma, Verdana, sans-serif;
}
 The following list are the best web safe fonts
for HTML and CSS:
• Arial (sans-serif) • Times New Roman (serif)
• Verdana (sans-serif) • Georgia (serif)
• Helvetica (sans-serif) • Garamond (serif)
• Tahoma (sans-serif) • Courier New (monospace)
• Trebuchet MS (sans-serif) • Brush Script MT (cursive)
 CSS Font Style
• The font-style property is mostly used to specify italic text.
• This property has three values:
1. normal - The text is shown normally
2. italic - The text is shown in italics
3. oblique - The text is "leaning" (oblique is very similar to italic, but less
supported)
CSS Font Style
 CSS Link
• Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
• links can be styled differently depending on what state they are in.
• The four links states are:
1. a:link - a normal, unvisited link
2. a:visited - a link the user has visited
3. a:hover - a link when the user mouses over it
4. a:active - a link the moment it is clicked