Scribd
Upload
5 views13 pages

WD Lecture 9

Uploaded by

hossain.fahad2001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views13 pages

WD Lecture 9

Uploaded by

hossain.fahad2001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Basic Web Design

CSS
LECTURE - 09
Recap

● CSS Box Model


● CSS Borders
● CSS Margins
● CSS Padding
● CSS Height, Width and Max-width
● CSS Outline

2
Course Contents

● CSS Text, Font, Font Family


● CSS List
● CSS Table
● Design Practice

3
CSS Text
Property Examples
Text color color:green;
Text alignment text-align:center; [left, right, justify]
Text decoration text-decoration: none; [underline, overline, line-through]
Text transformation text-transform:uppercase; [lowercase, capitilize]
Letter spacing letter-spacing:2px;
Line height line-height:1.5;
Text indent text-indent:30px;
Word spacing word-spacing:5px;
Text shadow text-shadow: 2px 2px 2px gray; [horizontal, vertical, blur]
CSS Text Example
h1 {
color: #4CAF50;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 30px;
text-shadow: 1px 1px 2px black;
}
CSS Font
Property Examples
Font size Font-size:12px;
Font weight Font-weight: bold; [normal, lighter, bolder] and
Numeric: 100 to 900
Font style font-style: italic; [normal, oblique]
Font Family Font-family:"Arial", "Helvetica", sans-serif;
CSS Font Family
Generic Font Family Examples of Font Names

Serif Times New Roman ,Georgia , Garamond

Sans-serif Arial, Verdana, Helvetica

Monospace Courier New, Lucida Console, Monaco

Cursive Brush Script MT


Lucida Handwriting

Fantasy Copperplate
Papyrus
CSS Font Example

body {
font-family: "Verdana", sans-serif;
font-size: 14px;
font-weight: 400;
font-style: normal;
line-height: 1.6;
letter-spacing: 1px;
word-spacing: 2px;
}
CSS List
Property Examples
Unordered List List-style-type : none; [square, disc, circle]
Ordered List List-style-type : decimal; [upper-roman, lower-
roman, upper-alpha, lower-alpha, none]
Style Position list-style-position: inside; [outside]
Style Image list-style-image: url('image.png');

Padding, margin
CSS Table

table {
font-family: Arial, Helvetica, sans-serif; border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #ddd; padding: 8px;
}
table tr:nth-child(even){background-color: #f2f2f2;}
table tr:hover {background-color: #ddd;}
table th {
padding-top: 12px; padding-bottom: 12px; text-align: left; background-
color: #04AA6D; color: white;
}
Exercise
Design the website you have created during quiz exam 1 using CSS.
- Add header and footer with background and text color
-Customize the List in the first page using CSS
- Design the table in the second page
- In the third page, add a div and set background color, and box model property for this this
End of Lecture​

You might also like