Explain properties and values in style.
https://www.computersprofessor.com/2016/06/explain-properties-and-values-in-style.html?m=0
|
A number of properties of text can
be altered. The best way of discovering how styles work. Is to play around
with some of there properties.
1. Fonts
2. Background & colors
3. Text
4. Boxes
5. Lengths
|
|
1.Fonts: Fonts are
identified by giving the name of the specific font.
Syntax: font-family < family name >
[< generic font >]
There are 5 Generic fonts are
specified
1. Serif ( Time)
2. Sanserif (arial)
3. Cursiev
4. Fantacy
5. Mono spaced (courier)
Font names which include white
spaces should be placed in quotes (“
“).
Eg: font-family = “ Book Man old style”.
font – style :
Normal/Italic/oblique.
font–weight: Normal/Bold/Bolder/lighter
–Relative weights
100/200/300/400 – Absolute weights.
The
weight of any font can be altered. The first 4 options are relative while the
numbered values give absolute weights.
Font size:
Small/medium/large/length/ < percentage> absolute size includes small
large. Font lengths should be given in appropriate units such as points (pt).
|
|
2.Background and colors :
color of any attribute can be changed. Values should be given as hexadecimal
values.
Syntax: (a) color :
Eg: color : “white”
(b) background - color:
Eg:
background – clour: “blue”.
(c) background – image:
Eg: background-image:
|
|
3. Text: Any piece of text
can be decorated.
Text- decoration: <None/underline/overlie/line through>
Text-transformation: <None/captalise/uppercase/lowercase>
Text-align: <left/right/center/justify>
4. Boxes: Many items can be
enclosed in the boxes.
Border width: < thin/thick/medium/length{1, 4}>
Margin: <length/percentage/auto <{1,4}>
You can specify 1, 2, 3, 4 margin values: If you specify 4 they are applied in the order top, right bottom and left.
Border-color: <value {1, 4}>
Border-Style: <None/dotted/dashed/doubled/groove/solid>
Width: < length/percentage/auto>
height: <length/auto>
|
|
5.Units and URL’s:
Length: lengths can be either relative (or)
absolute. A relative length can be + ve or – ve. Which is indicated by
preceeding the value with an optional ‘+; (or) ‘–‘.
Relative units:
1.Em: The height of the font
for this element.
2.Ex: The height of the
letter ‘x’ in the current font.
3.Px: Pixels.
|
|
Absolute units:
IN: Size in inches.
CM: Size in centimeters.
MM : Size in millimeters.
Pt: Size in points, where 1 pt = 1/72 inches.
PC: Picas, wher 1 pc = 12 pt.
|
|
URL’s: URL’s can be used in
style sheets just as they can in html documents.
|
