WEB ENGINEERING-II
USING ASP.NET AND VB.NET
By
Adnan Amin
L e c t u r e r / S o f t wa r e
Programmer
ST YLES CAN APPLY ON:
Font attributes
Color attributes
Margins and alignment
Positioning
Partitioning elements
DIV
SPAN
FONT ATTRIBUTES
There are many font and text attributes.
Most common attributes which we’ll cover
here:
Font-family
Font-style
Font-variant
Font-weight
Font-size
Text-decoration
FONT-FAMILY
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 doesn’t 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-ST YLE
Provides four options:
Normal
Italic
Syntax:
#p1 { font-style: italic }
#p2{ font-style: normal }
FONT-VARIANT ST YLE
It allows you for normal and small-caps
For example
H1 { font-variant: small-caps }
FONT-WEIGHT ST YLES
Defines boldness of the text
Normal
Bold
You also can use the numbers 100, 200,
….900
Where 400 = normal and 700=bold
FONT-SIZE ST YLES
There are four different notations which you can use to get
specific sizes.
Notation Example
Relative 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 inches
3 cm centimeters
25 px pixels
TEXT-DECORATION ST YLES
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)
COLOR ATTRIBUTES
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, etc)
You can also use specify an RGB value (using rgb funtion)
R=Red , G=Green and B=Bold
MARGINS AND ALIGNMENT
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.
POSITIONING
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 (CONTI)
Absolute Positioning
Absolute positioning allows for placement at
specific locations
Define position by x and y coordinates and the
browser can measure from the left and top of
the windows
EXAMPLE
<style type=“text/css”>
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) }
</style>
<DIV> AND <SPAN>
The latest technique used to format only part
of the larger contents.
How do you format only the word “powerfll”?
<html>
<body>
<h1>This is a powerful technology!</h1>
</body>
</html>
You can do this easily by using the <div> and
<span>.
FORMATTING SUBSETS
Can use dive and span elements to
provide a way to format portions of
bigger content.
Both provide containers for other content
Div includes line break before and after
Span includes no line breaks
EXAMPLE ABOUT DIV AND SPAN
<body>
<h1> this is a
<span style=“color:teal”>powerful</span>
internet
<div style=“background-color:black; color:white”>
technology
</div>
!
</h1>
</body>
THANK YOU
References
Professional ASP.net
AppDev trainers
