8/7/2019 Lesson_07 CSS-2
1/18
By
Adnan Amin
Lecturer/ Software
Programmer
WEB ENGINEERING-IIUSING ASP.NET AND VB.NET
8/7/2019 Lesson_07 CSS-2
2/18
Font attributes
Color attributes
Margins and alignment
Positioning
Partitioning elements
DIV
SPAN
STYLES CAN APPLY ON:
8/7/2019 Lesson_07 CSS-2
3/18
There are many font and text attributes.
Most common attributes which well cover
here:
Font-family
Font-style
Font-variant
Font-weight
Font-size
Text-decoration
FONT ATTRIBUTES
8/7/2019 Lesson_07 CSS-2
4/18
Use font name as the value, we can also download
more font (if needed) from internet.
For example:
Change the heading tag font style.
H1 { font-family: Comic Sans MS} The comic sans ms font is only working in microsoft
operating system.
If client computer doesnt have font? It will be better
to include at least more than one font family:
For example:
H1 { font-family: Tahoma, Arial, Courier, Serif }
FONT-FAMILY
8/7/2019 Lesson_07 CSS-2
5/18
Provides four options:
Normal
Italic
Syntax:
#p1 { font-style: italic }
#p2{ font-style: normal }
FONT-STYLE
8/7/2019 Lesson_07 CSS-2
6/18
It allows you for normal and small-caps
For example
H1 { font-variant: small-caps }
FONT-VARIANT STYLE
8/7/2019 Lesson_07 CSS-2
7/18
Defines boldness of the text
Normal
Bold
You also can use the numbers 100, 200,
.900
Where 400 = normal and 700=bold
FONT-WEIGHT STYLES
8/7/2019 Lesson_07 CSS-2
8/18
There are four different notat ions which you can use to getspecific sizes.
FONT-SIZE STYLES
Notation ExampleRelative keyword xx-small , x-small , small
Medium, large, x-large, xx-large
Relative to parent Smaller, larger
Percentage of parent 50%, 30%, 120%
Absolute measure 20pt points
1.5 in inches3 cm centimete
25 px pixels
8/7/2019 Lesson_07 CSS-2
9/18
There are four possible values for text-
decoration for text.
none,
Underline
Italic
Line-through
Mostly we will use it to remove the underline
from the hyperlink (if needed)
TEXT-DECORATION STYLES
8/7/2019 Lesson_07 CSS-2
10/18
There are several different color attributes such as Color Background-color Border-color Border-botton-color Border-left-color Border-right-color Border-top-color Outline-color
You can use color keywords (aqua, gray, navy, etc) You can use system colors (ActiveBorder, ActiveCaption, e tc) You can also use specify an RGB value (using rgb funtion)R=Red , G=Green and B=Bold
COLOR ATTRIBUTES
8/7/2019 Lesson_07 CSS-2
11/18
You can set margins for an element or page.
Margin top
Margin right
Margin bottom
Margin left
The text-indent
For all margin and indent values
You can specify points, inches, centimeters or pixels
Text-align You can specify the text alignment by using the
following values
Left , center and right.
MARGINS AND ALIGNMENT
8/7/2019 Lesson_07 CSS-2
12/18
CSS provides attributes to set positioning of
the contents.
You can use relative or absolute positioning.
Relative
Specify relative positioning to change the
locations from their default position.
Attributes are
Position: relative
Top: distance from the top border
Left: distance from left border.
POSITIONING
8/7/2019 Lesson_07 CSS-2
13/18
Absolute Positioning
Absolute positioning allows for placement at
specific locations
Define position by x and y coordinates and thebrowser can measure from the left and top of
the windows
POSITIONING (CONTI)
8/7/2019 Lesson_07 CSS-2
14/18
body { font-family: Verdana; font-size: large }
table { border style: groove; border-width: thick;
border-color: Red Green Blue Yellow;border-top-color: Fuchsia}
H1 { color: #CCCCCC; background-color: rgb
(128,128,20) }
EXAMPLE
8/7/2019 Lesson_07 CSS-2
15/18
The latest technique used to format only part
of the larger contents.
How do you format only the word powerfll?
This is a powerful technology!
You can do this easily by using the and
.
AND
8/7/2019 Lesson_07 CSS-2
16/18
Can use dive and span elements to
provide a way to format portions of
bigger content.
Both provide containers for other contentDiv includes line break before and after
Span includes no line breaks
FORMATTING SUBSETS
8/7/2019 Lesson_07 CSS-2
17/18
this is a
powerful
internet
technology
!
EXAMPLE ABOUT DIV AND SPAN
8/7/2019 Lesson_07 CSS-2
18/18
References
Professional ASP.net
AppDev trainers
THANK YOU