Scribd
Upload
12 views

Lec6 CSS

Uploaded by

umarmalikk64
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views

Lec6 CSS

Uploaded by

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

CSS properties

CSS is a styling language. Using CSS, we can define styles for HTML element. These styles are
applied on HTML elements when we include CSS code in the HTML document. In CSS code we
write style rules for HTML elements. These rules govern the presentation of those elements in
the browser. A CSS rule consists of a selector which is the HTML element on which we want to
apply style and a declaration of style. In style declaration we use the properties of the selector
and apply a specific value to these properties. In previous lecture we have discussed the basic
syntax of CSS rules.
As we discussed, CSS is not a programming language. Rather, it is a styling language. We need
to learn the properties for HTML elements and possible values which can be assigned to that
particular property. In this way we can style the HTML elements. In this lecture, we will learn
properties of some the basics elements of HTML.

1. Font related properties:


These properties are used to control the font related appearance of text. Following are the
major and most commonly used font related properties.
font-family:Specifies the typeface or family of font that should be used
• Common values:Arial, Courier/Courier New, Georgia, Times/Times New Roman and
Verdana
• Example:H1{font-family:arial}
font-size: Specifies the size of the font
• Common values: we can assign the value to font-size in pixels such as 12px, 20px etc. or
a predefined absolute value like small, medium, large, x-large etc.
• Example:H1{font-size:20px}
font-weight:Specifies whether the font should be bold or normal
• Common values: Normal, bold, bolder, lighter or numeric values like 100, 200, 300, 400,
500, 600, 700, 800, 900 etc.
• Example: H1{font-weight:bold}
font-style:Specifies whether the font should be normal, italic or oblique
• Common values: Normal, italic, oblique
• Example: H1{font-style:italic}
font-variant:Specifies whether the font should be normal or small-caps (smaller version of
upper case)
• Common values: Normal, small-caps
• Example: H1{font-variant:small-caps}

2. Text properties:
These properties are used to control the appearance of text. Following are the most common
text related properties
color: specifies the color of the text
• Common values: color name or codes
• Example: P{color : green}
text-align: horizontal alignment of the text
• Common values: Left, right, center or justify
vertical-align:Vertical alignment of the text
• Common values: Sub, super, top, middle, bottom
text-decoration: specifies the whether the text should be underline, over-line, line-through or
blinking
• Common values: be underline, over-line, line-through or blinking
text-transform: text should be lowercase, uppercase or capitalized
• Common values: lowercase, uppercase or capitalized
letter-spacing:Specifies the space between letters
• Common values: usually, value is given in pixels
• Example: H1{letter-spacing:3px}
word-spacing:Specifies the space between word
• Common values: usually, value is given in pixels
• Example: H1{word-spacing:4px}
In following example we use these properties to define style and then, use the style in a HTML
page.

mystyle.css <html>
h1{ <head>
font-family:arial; <title> Text properties</title>
font-size:36px; <link href="mystyle.css" type="text/css"
} rel="stylesheet">
h1.title{ </head>
color:orange; <body>
text-transform:uppercase; <h1 class="title">COMSATS institute of I.T</h1>
text-align:center; <hr size="5" color="lightblue">
letter-spacing:5px; <h1 class="bodytext">introduction:</h1>
} </body>
h1.bodytext{ </html>
color:purple;
text-transform:capitalize;
text-decoration:underline;
font-size:24px;
}

The output of the above program is given below

3. Styling links:
Following are the major properties used to style links.
color: Changes the color of the links
background-color: Highlights the link, as if it had been highlighted with a highlighter pen
text-decoration: Underline, strike through, over-line, blink
In CSS, there are some predefined classes to style different states of a link. These classes are
Link: Styles for links in general
Visited:Styles the links which are already visited
Hover:Styles when some on hovering over a link
Active:Styles the links when a links is being clicked
In the following code we have used these properties to style links.
a{
font-family:calibri;
font-size:24px;
text-decoration:none;
font-weight:bold
}
a:link{
color:red;
}
a:visited{
color:yellow;
}
a:hover
{
background-color:gray;
text-decoration:underline;
}

4. Background related properties:


Following properties can be used to control the background of an HTML element.
background-color:Specifies the background color
background-image:Specifies the background image
background-repeat:Specifies whether the image should repeat or not
background-position:Where an image should be positioned

Following code shows the usage of background properties.


body{
background-color:pink;
background-image:url(comsats1.jpg);
background-repeat:no-repeat;
background-position:middle
}

5. Styling tables:
We can control the appearance of tables using CSS. To control the appearance of text in tables,
we can use text and font related properties. Some basics table related properties are given
below
Border related properties are used to control the appearance of border around the table
border-style: control the border style
• Common values: solid, dashed, doted, double etc.
border-color: used to set the color of the border
padding property: is used to set the space between the border of a cell and its contents
padding-left: is used to set the space between left border of a cell and its contents
padding-right: is used to set the space between right border of a cell and its contents
padding-top: is used to set the space between top border of a cell and its contents
padding-bottom:is used to set the space between bottom border of a cell and its contents
Following example shows the use of table related properties.
table{ <html>
border-style:dashed; <head>
border=3px; <title> Text properties</title>
width:300px; <link href="style.css" type="text/css"
} rel="stylesheet">
th{ </head>
font-family:calibri; <body>
background-color:gray; <h1 class="bodytext">Table Style</h1>
} <table>
td{ <tr>
background-color:lightblue; <th>Name</th>
vertical-align:top; <th>Registration No</th>
} </tr>
tr{ <tr>
height:50px;} <td>Bashart</td>
<td>FA09-RCS-001</td>
</tr>
</body>
</html>

The output of the above example is shown below


Designing page layout using CSS and DIV

In previous lecture we discussed some basic CSS properties. These properties are used to
control the presentation of HTML elements. In this lecture we will discuss the entire process of
designing a page layout.

1. Website layout designing process:


The following are the major phases or steps of the website layout designing process
 Determine the requirements of the site
 Group the required information
 Make a site map
 Identify key elements for each page
 Decide about the arrangement of information on each page
 Translate the design into code
In the following sections we will discuss these steps in detail
1.1Determining the requirements of the site: Whether you are going to create a web site for
yourself or are hoping to create sites for clients, in order for the design to be effective you need
to be able to answer four questions about the audience for your site: who, why, what, and how
often?
Who will visit the site: While designing a website you must keep in mind that it is the audience
for which you are designing the site. Some of the following questions will help you define your
target audience
 What is the age range of your target audience?
 Will your site appeal more to men or women?
 Which country do your visitors live in?
 Do they live in an urban area or rural area?
Once you have determined who is coming to your site, you can create fictional users and from
them you can find basic requirements for your site.
Why have users visited your site: Majority of users visits your site due to a reason? Your design
should be influenced by the goals of users, and therefore you should try and list all the goals
that people might have in mind when visiting the site.
What: Now that you have a list of reasons why people might be coming to your site, you need
to work out what you need to offer in order to help them achieve their goal quickly and
effectively.
How often: The last important question about your audience is how often they are likely to
come back. There is a very simple reason for asking this: Some sites should change more often
than others. To determine the frequency of change, we have to ask this question.
After determining the user’s requirements, you should also find the information that the site
owner wants on the site, but which might not be part of the list already.
1.2 Group related information: Now that you have decided what is going to appear on your
site, it is the time to group the related information. Here, we decide which information will
appear in a group. For example
 You might group the information about how the company was formed and its history
along with information about the company today in a general “about us” section. In this
section, you might also include profiles of the people running the business.
 The different ways in which people can get in touch with you (phone, e - mail, fax,
opening hours, maybe a map, and so on) and ideally a contact form could all be put in
one “contact us” group.
 If a company has outside investors and is listed on the stock market, you might want to
create a section for the investors, with company reports, information on the board of
directors, and so on.
1.3 Make a site map: By now we have an idea of the pages and sections of the site. Now we
can make a site map. A site map shows how many pages you need and how they relate with
each other. Usually a site map looks like either a family tree or folder list. You can draw a site
map on the paper using a pencil. The following figure shows how a site map looks like.

1.4 Identify key elements for each page:Now that you know what pages will make up the
site, go back to the groups of information and add these onto the relevant pages. There will be
some key items or elements that should appear on each page, such as a logo/branding, primary
navigation, page headings, and a search box. Other information is more likely to appear on only
one page, such as individual product details or terms and conditions. When you are identifying
the key elements of each page, several pages, may contain similar types of information. The
structure of these pages should be very similar.
1.5 Arranging the elements:Once you know what needs to appear on each page, then you
can start to look at page layout, which involves the arrangement of the information on your
pages. Suppose we have decided that a specific page will contain a login form and a registration
form, while header and footer are the common sections for all pages. We can draw these
elements on a paper to design the page layout where we can arrange the elements of the page
at different locations. One of the options is shown in the following figure
1.6 Translating the design into code:Having determined what your page will look like, you
need to translate your designs into code. Usually, we use div tag to declare sections in the web
page, while CSS is used to control/style the presentation of these sections. We have also to
decide; whether the page design will be liquid or fixed. Now days, users access the web
application through multiple devices. These devices differ in size. Liquid designs automatically
fit to the screen while fixed designs remain fixed in width. To define a liquid design we use
percentage values to declare height and width of sections while to define a fixed design we
used absolute values.

The div tag: As we discussed earlier to design a web page we define different sections in the
web page and then style these sections using CSS. The div tag defines a division or section in an
HTML document. Visually, it allows us to make containers that can be formatted. We can
declare a div as given below

<div>……</div>

In the following example we use the div tag to define sections in the web page. We also use the
style tag to style these sections.

<html>
<head>
<title>Using divs</title>
</head>
<body>
<div>
<div style="width:100px;backround-color:gray">This is the first section</div>
<div style="width:100px;backround-color:red">This is the second section</div>
</div>
</body>
</html>

The output of the above code is given below

In the following example we translate the design of the page given in the previous section into
the code. First we create the HTML page which contains different sections. Then we write CSS
code to style these sections.
HTML page CSS code
body{
<html> background-color:#CCCCCC;
<head> }
<title> Connection Home Page!</title> #container{
<link href="style.css" rel="stylesheet" height:auto;
type="text/css"> width:80%;
</head> margin-left:10%;
<body> border:2px;
<div id="container"> border-color:550000;
<div id="header"> }
<div id="logo"><imgsrc="images/logo.jpg" #header{
height="116" width="170"></div> width:100%;
</div> height:18%;
<div id="center-content"> background:url(images/header.jpg);
<div class="form-container"> background-repeat:repeat;
<div class="form-heading">User Login </div> background-position:0px 0px;
<form> margin:auto;
<div class="form-row"> }
<label>Your ID</label> #logo{
<input type="text" name="ID"> float:left;
</div> padding:0px;
<div class="form-row"> height:100%;
<label>Your Password</label> width:100%;
<input type="password" name="pass"> }
</div> #center-content{
<div class="form-row"> height:auto;
<label></label> width:100%;
<input class="sub" type="submit" value="Login"> background-color:#CCCCCC;
</div> }
</div> div.form-container
<div class="space"></div> {
<div class="form-container"> margin-left:25%;
<div class="form-heading">User Registration margin-right:25%;
</div> margin-top:10px;
<form> height:auto;
<div class="form-row"> width:auto;
<label>Your Full Name:</label> border:2px;
<input type="text" name="name"> border-style:solid;
</div> }
<div class="form-row"> div.form-heading
<label>Your Email Address:</label> {
<input type="text" name="email"> padding:10px;
</div> height:40px;
<div class="form-row"> font-family:calibri;
<label>Your Password:</label> color:white;
<input type="password" name="password"> font-weight:bold;
</div> font-size:26px;
<div class="form-row"> background-color:550000;
<label>Your Picture:</label> }
<input type="file" name="pic"> div.form-row
</div> {
<div class="form-row"> padding:5px;
<label></label> height:25px;
<input class="sub" type="submit" }
value="Register"> label{
</div> font-family:Calibri;
</div> font-size:12px;
</div> padding:10px;
<div id="footer">&copy; all rights reserved width:200px;
</div> float:left;
</div> font-weight:bold;
</body> }
</html> input{
float:left;
height:25px;
width:250px;
}
input.sub{
float:left;
height:25px;
width:150px;
margin-left:100px;
}
div.space
{
height:10px;
}
#footer
{
margin-top:10px;
color:white;
text-align:center;
height:30px;
width:100%;
background-color:550000;
}

The output of the above program is given below

You might also like