1. Background
Different background-properties can be set as follows:
o
o
o
o
o
background-color: red
background-image: url ("")
background-repeat: repeat/no-repeat
background-position: center center (top/bottom/center left/right/center)
background-attachment: fixed/scroll
<html>
<head> <title> Background </title>
<style type="text/css">
body {
background-color: red;
background-image: url("frontPic.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>Hello!!</p>
<p>Nice to meet you!!!</p>
</body>
</html>
<html>
<head> <title> Background </title>
<style type="text/css">
body {
background-color: red;
background-image: url("frontPic.jpg");
background-repeat: repeat;
background-position: center center;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>Hello!!</p>
<p>Nice to meet you!!!</p>
</body>
</html>
2. Text property
Different text-properties can be set as follows:
o
o
o
o
o
o
o
o
o
color:red
letter-spacing: 0.5cm
text-align: left/right/center/justify
vertical-align: text-top/middle/baseline/text-bottom
vertical-align: 0.5em (for superscript)
vertical-align:-0.5em (for subscript)
text-decoration: underline/overline/line-through
text-indent: 1cm
text-transform: uppercase/lowercase/capitalize
<html>
<head> <title> Text </title>
<style type="text/css">
h2 {
color: red;
letter-spacing: 0.5cm;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
}
h1 {
text-decoration: overline;
text-transform: capitalize;
text-indent: 1cm;
}
</style>
</head>
<body>
<h2>eie</h2>
<h1>the department of electronic and information engineering</h1>
</body>
</html>
3. Font property
Different font-properties can be set as follows:
o
o
o
o
font-family: times/courier/…
font-weight: normal/bold/light
font-style: normal/italic
font-size: 12px
<html>
<head> <title> Font </title>
<style type="text/css">
h2 {
font-family: courier;
font-weight: bold;
font-style: normal;
font-size: 36px;
}
h1 {
font-family: times;
font-weight: light;
font-style: italic;
font-size: 14px;
}
</style>
</head>
<body>
<h2>eie</h2>
<h1>the department of electronic and
information engineering</h1>
</body>
</html>
4. Border property
Different border-properties can be set as follows:
o
o
o
o
border: size style color
border-style: dotted/dashed/solid
border-color:
border-xxx-width (xxx can be left, right, top or bottom)
<html>
<head> <title> Border </title>
<style type="text/css">
p{
border: medium double green;
border-top-width: 12px;
}
</style>
</head>
<body>
<p>EIE</p>
</body>
</html>
5. Margin property
Different margin-properties can be set as follows:
o margin-xxx: 2cm (xxx can be left, right, top or bottom)
o margin: 1cm 2cm 3cm 4cm (top, right, bottom, left)
<html>
<head> <title> Margin </title>
<style type="text/css">
p{
border: medium double green;
margin: 5cm 2.5cm 1cm 1cm;
}
</style>
</head>
<body>
<p>EIE</p>
</body>
</html>
6. Padding property
Different padding-properties can be set as follows:
o padding-xxx: 2cm (xxx can be left, right, top or bottom)
o padding: 1cm 2cm 3cm 4cm (top, right, bottom, left)
<html>
<head> <title> Padding </title>
<style type="text/css">
p{
border: medium double green;
margin: 5cm 2.5cm 1cm 1cm;
padding: 0.5cm 0.25cm 1cm 1cm;
}
</style>
</head>
<body>
<p>EIE</p>
</body>
</html>
7. CSS Units
o px: screen pixels
o pt: points: 1/72 of an inch
o ex: font-relative size: relative to the height of an ‘x’
o em: font-relative size: relative to the width of an ‘M’
o %: relative to the container’s size
© Copyright 2026 Paperzz