CSS-3
Lecture-4
CSS Text Properties
The following properties can be specified for any element that contains
text, such as <h1> through <h6>, <p>, <ol>, <ul>, and <a>:
Property Some Possible Values
text-align: center, left, right, justify
text-decoration: underline, line-through, blink
color: blue, green, yellow, red, white, etc.
font-family: Arial, Verdana, "Times New Roman"
font-size: large, 120%, 20px (pixels)
font-weight: bold, normal
font-style: italic, normal
The actual list of available properties and values is quite long, but the ones
listed above are the most common for formatting text via CSS.
CSS properties for colors
p {
color: red;
background-color: yellow;
}
CSS
This paragraph uses the style above output
property description
color color of the element's text
color that will appear behind the
background-color
element
Specifying colors
p { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; }
CSS
This paragraph uses the first style above
This h2 uses the second style above.
This h4 uses the third style above.
output
color names: aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white (white), yellow
RGB codes: red, green, and blue values from 0 (none) to 255 (full)
hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full)
Grouping styles
p, h1, h2 {
color: green;
}
h2 {
background-color: yellow;
} CSS
This paragraph uses the above style.
This h2 uses the above styles.
output
A style can select multiple elements separated by
commas
The individual elements can also have their own styles
CSS comments /*…*/
/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
} CSS
CSS (like HTML) is usually not commented as
rigorously as programming languages such as Java
The // single-line comment style is NOT supported in
CSS
The <!-- ... --> HTML comment style is also NOT
supported in CSS
CSS properties for fonts
property description
font-family which font will be used
font-size how large the letters will be drawn
font-style used to enable/disable italic style
font-weight used to enable/disable bold style
Used to specify text to be
Font-variant
displayed in small-caps font
font-family
p {
font-family: Georgia;
}
h2 {
font-family: "Courier New";
} CSS
This paragraph uses the first style above.
This h2 uses the second style above.
output
Enclose multi-word font names in quotes
More about font-family
p {
font-family: Garamond, "Times New Roman", serif;
} CSS
This paragraph uses the above style.
output
We can specify multiple fonts from highest to lowest priority
Generic font names:
serif, sans-serif, cursive, fantasy, monospace
If the first font is not found on the user's computer, the
next is tried
Placing a generic font name at the end of your font-family value,
ensures that every computer will use a valid font
font-size
p {
font-size: 24pt;
} CSS
This paragraph uses the style above.
output
units: pixels (px) vs. point (pt) vs. m-size (em)
16px, 16pt, 1.16em
vague font sizes: ,
xx-small ,
x-small , medium, large, x-large, xx-large,
small
smaller, larger
percentage font sizes, e.g.: 90%, 120%
font-size
p {
font-size: 24pt;
} CSS
This paragraph uses the style above.
output
pt specifies number of point, where a point is 1/72 of an inch
onscreen
px specifies a number of pixels on the screen
em specifies number of m-widths, where 1 em is equal to the
font's current size
font-weight, font-style
p {
font-weight: bold;
font-style: italic;
} CSS
This paragraph uses the style above.
output
Either of the above can be set to normal to turn them off
(e.g. headings)
The list-style-type property
ol { list-style-type: lower-roman; }
ol { list-style-image: url(‘abc.jpg’); }
Ol {background:#FF0000;}
Ol {list-style: disc url(‘abc.jpg’) red;}
CSS
Possible values:
i. none : No marker
ii. disc (default), circle, square
iii. Decimal: 1, 2, 3, etc.
iv. decimal-leading-zero: 01, 02, 03, etc.
v. lower-roman: i, ii, iii, iv, v, etc.
vi. upper-roman: I, II, III, IV, V, etc.
vii. lower-alpha: a, b, c, d, e, etc.
viii. upper-alpha: A, B, C, D, E, etc.
CSS properties for backgrounds
property description
background-color color to fill background
background-image image to place in background
background-position(right-top,left- placement of bg image within
top element
background-repeat (repeat- whether/how bg image should be
x,repeat-y, no-repeat,space) repeated
background-attachment whether bg image scrolls with
(fixed,scroll) page
shorthand to set all background
background
properties
background-image
body {
background-image: url("images/draft.jpg");
}
CSS
background image/color fills the element's content area
background-repeat
body {
background-image: url("images/draft.jpg");
background-repeat: repeat-x;
}
CSS
can be repeat (default), repeat-x, repeat-y, or no-repeat
background-position
body {
background-image: url("images/draft.jpg");
background-repeat: no-repeat;
background-position: 370px 20px;
} CSS
value consists of two tokens, each of which can be top,
left, right, bottom, center, a percentage, or a length
value in px, pt, etc.
value can be negative to shift left/up by a given amount
CSS properties for Borders
property description
Border-width
Specifies the width of the border.
(medium, tiny, thick, length)
Default value is "medium"
(top, right, bottom, left)
Border-style
(none, dotted, dashed, solid, Specifies the style of the border.
groove, double, inset, outset, Default value is "none"
ridge)
Border-color
Specifies the color of the border.
(top, right, bottom, left)
Default value is the color of the text
Border-image-source
Border-image-width
Specify an image to be used as
Border-image-repeat(repeated,
border around an element
rounded or stretched)
Border-Style
H2
{
border: 10px solid transparent;
border-color: #ff0000 #00ff00 #0000ff;
border-image: url(border.png) 50 repeated;
border-style: dotted solid dashed double;
}
CSS Margins
This property sets the margins for an element,
and is a shorthand property for all the
properties
P{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 80px;
margin-left: 150px;
}
CSS Padding
This property are used to generate space
around an element’s content, inside of any
defined borders
P{
padding: 25px 50px 75px 100px;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 80px;
margin-left: 150px;
CSS height/width
This property are used to set the height and
width of an element. It does not include
padding, borders or margins.
h2 {
height: 200px;
width: 50%;
background-color: powderblue;
}
CSS BOX Model
All html elements can be consider as box. In css term
box model is used when talking about design and layout
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Total Width comes out to be???
CSS For Link Tag
Links can be styled with any css property e.g. color, font-
family,background-color etc.)
Links can also be styled differently depending on what
state they are in. Four link states are:
A:link
A:visited
A:hover
A:active
Note: while setting properties of link states, they are
some order to follow.
A:hover- must come after a:link and a:visted
A:active –must come after a:hover
Div,Class and ID
Div tag defines a division or a section in a html
document. It used as a container of html element
which is then styled with css or javascript.
a class selector is a name preceded by a full
stop (“.”) and an ID selector is a name preceded
by a hash character (“#”)
The difference between an ID and a class is that
an ID can be used to identify one element,
whereas a class can be used to identify more
than one.
Thank
You
