CSS
To familiarize the students with the CSS.
After this lab the students should be able to apply CSS to the web pages.
Introduction
CSS(Cascading Style Sheet)
CSS stands for Cascading Style Sheets. It is a way to style HTML webpages. A style sheet is the presentation of an HTML document. CSS is a style language that defines layout of HTML documents. For example, CSS covers fonts, colours, margins, lines, height, width, background images, advanced positions and many other things. CSS can be written either inside the html tags (i.e. Inline), in the
<head></head> section of an HTML document (i.e. Internal) or in a separate CSS File (i.e. External).
CSS Basic Structure
For inline styling CSS is written inside the style attribute of a tag. For example,
<tag style=”property:value”></tag>
For Internal styling, CSS is written into the head section of the HTML document. For example,
<style>
.class
{
property:value;
}
</style>
For external styling, CSS is written as a separate file and the file is saved with an extension .css. In external style sheets the style tags are not necessary. Whereas, external CSS follow the same structure as the Internal CSS does.
Basic CSS Properties Font Properties
Font Family Font Styl
Font Variant Font Weight Font Size Font
Color and Background Properties
Color
Background Color Background Image Background Repeat Background Position
Text Properties
Word Spacing Letter Spacing Text Decoration Vertical Alignment Line Height
Box Properties
Margin Padding Border Width Border Color Border Style Width
Height Float
4. Examples Inline CSS:
<table style=”width:200px; background-color: #000000;”> Table element with Inline Style</table>
Internal CSS:
<html>
<head>
<title>Internal CSS</title>
<style> h1{color:#FF0000; font-family:Calibri; font-size:36px
}
</style>
</head>
<body>
<h1>This heading is styled with CSS</h1>
</body>
</html>
External CSS:
CSS file: (mystyle.css)
h1{color:green; font-size:36px; font-family:calibri
}
Lab Activities:
Activity 1:
Use the html page created in Lab 2 (page for COMSATS) and create an external style-sheet which style the elements of the page including style for
- apply font and text properties
- control the background color with CSS
- style different states of inks
- paragraphs and headings
Solution:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px; font-family: verdana;
font-size: 50px;
}
#para1 {
text-align: center; color: red;
}
.center {
text-align: center; color: yellow; }
Home Activities:
Activity 2:
Design the web template given below using tables and external CSS
Assignment:
Design the web template given below using tables and external
