Web Technology
(KCS-602)
Unit 2
Prepared By
Mr. Sachin Kumar Sonker
Assistant Professor,UCER Naini,Allahabad
Colors and backgrounds
color
background-color
background-image
background-repeat
background-attachment
background-position
Background
The color property describes the foreground color of an
element.
h1 {
color: #ff0000;
Colors and backgrounds
• The background-color property describes the
background color of elements.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Colors and backgrounds
The CSS property background-image is used to insert a
background image.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
Repeat background image
background-repeat: repeat-x
The image is repeated horizontally
background-repeat: repeat-y
The image is repeated vertically
background-repeat: repeat
The image is repeated both horizontally and
vertically
background-repeat: no-repeat
The image is not repeated
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
background-attachment
• The property background-attachment specifies
whether a background picture is fixed or scrolls
along with the containing element.
• Background-attachment: scroll
The image scrolls with the page - unlocked
• Background-attachment: fixed
The image is locked
background-position
• By default, a background image will be
positioned in the top left corner of the screen.
• The coordinates can be indicated as percentages
of the browser window, fixed units (pixels,
centimetres, etc.) or you can use the words top,
bottom, center, left and right.
Fonts
FONT-FAMILY
FONT-STYLE
FONT-WEIGHT
FONT-SIZE
FONT
Font family
The property font-family is used to set a prioritized
list of fonts to be used to display a given element
or web page. If the first font on the list is not
installed on the computer used to access the site,
the next font on the list will be tried until a suitable
font is found.
An example
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Font style Font weight
• The property font-style defines the chosen font
either in normal, italic or oblique.
h2 {font-family: "Times New Roman", serif; font-
style: italic;}
• The property font-weight describes how bold or
"heavy" a font should be presented. A font can
either be normal or bold.
td {font-family: arial, verdana, sans-serif; font-
weight: bold;}
Font size
The size of a font is set by the property font-size.
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Text
CSS gives you to add layout to text.
The following properties will be described:
text-align
text-decoration
letter-spacing
text-transform
Text alignment
• The CSS property text-align corresponds to the attribute
align used in old versions of HTML.
th {
text-align: right;
}
td {
text-align: center;
}
p{
text-align: justify;
Text decoration
• The property text-decoration makes it is possible to add
different "decorations" or "effects" to text.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
Letter space
• The spacing between text characters can be
specified using the property letter-spacing.
h1 {
letter-spacing: 6px;
}
p{
letter-spacing: 3px;
}
Text transformation
• The text-transform property controls the capitalization of a
text.There are four possible values for text-transform:
capitalize
• Capitalizes the first letter of each word. For example: "john
doe" will be "John Doe".
uppercase
• Converts all letters to uppercase. For example: "john doe"
will be "JOHN DOE".
lowercase
• Converts all letters to lowercase. For example: "JOHN DOE"
will be "john doe".
none
• No transformations - the text is presented as it appears in
the HTML code.
Links
• A link can have different states. For example, it
can be visited or not visited. You can use pseudo-
classes to assign different styles to visited and
unvisited links.
• Use a:link and a:visited for unvisited and visited
links respectively. Links that are active have the
pseudo-class a:active and a:hover is when the
cursor is on the link.
Links
a {text-decoration:none;}
a:link {color: blue;text-decoration:none;}
a:visited {color: purple;text-decoration:none;}
a:active {background-color: yellow;text-
decoration:none;}
a:hover { color:red; text-decoration:none;}
Margin and Padding
• An element has four sides: right, left, top and
bottom. The margin is the distance from each
side to the neighboring element (or the borders
of the document).
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
Padding
• Padding can also be understood as "filling". It
only defines the inner distance between the
border and the content of the element.
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
Borders
border-width
border-color
border-style
Border-width
• The width of borders is defined by the property
border-width, which can obtain the values thin,
medium, and thick, or a numeric value, indicated
in pixels.
border-style
• The property border-color defines which color
the border has.
h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
p{
border-width: 1px;
border-style: dashed;
border-color: blue;
}
Floating elements
• An element can be floated to the right or to left
by using the property float. That is to say that
the box with its contents either floats to the
right or to the left in a document.
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
#picture {
float:left;
width: 100px;
}
