CSS & PHP Practise Sheet

Applying CSS to an HTML document
There are three ways you can apply CSS to an HTML document. These methods are all outlined below.
1. In-Line Method (the attribute style).
2. Internal Method (the tag style).
3. External Method (link to a style sheet).
Method 1: In-line (the attribute style)
One way to apply CSS to HTML is by using the HTML attribute style. Building on the above
example with the red background color, it can be applied like this:
<html>
<head>
<title> In-line CSS Example </title>
</head>
<body style="background-color:#FF0000;">
<p> This is a red page </p>
</body>
</html>
Method 2: Internal (the tag style)
Another way is to include the CSS codes using the HTML tag <style>. For
example like this:
<html>
<head>
<title> Internal CSS Example </title>
<style type="text/css">
background-color:#FF0000;
</style>
</head>
<body>
<p> This is a red page </p>
</body>
</html>
Example
<!DOCTYPEhtml>
<html>
<head>
<style>
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>
<h1> Internal CSS Example </h1>
<p>This is a paragraph.</p>
</body>
</html>
Method 3: External Method (link to a style sheet).
External style sheets are separate files full of CSS instructions (with the file extension .css).
When any web page includes an external style sheet, its look and feel will be controlled by this
CSS file (unless you decide to override a style using one of these next two types). This is how
you change a whole website at once. And that's perfect if you want to keep up with the latest
fashion in web pages without rewriting every page!
Sample program of External Style:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Code for mystyle.css
Body
background-color: light blue;
h1
color: navy;
margin-left: 20px;
}
Navigation Bar
<html>
<head>
<style>
ul
{
list-style-type: none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
li a
{
display:block;
padding:10px;
background-color:#aaaaaa;
}
</style>
</head>
<body>
<ul>
<li><a href="list.html">Home</a></li>
<li><a href="table.html">About Us</a></li>
<li><a href="nav.html">Community</a></li>
<li><a href="form.html">Careers</a></li>
</ul>
</body>
</html>
HTML & CSS
Write the HTML code for generating the form as shown below. Apply the internal CSS to
following form to change the font size of the heading to 6pt and change the color to red and also
change the background color to yellow.
2) Create HTML5 page with following specifications
i) Title should be about your City.
ii) Color the background by Pink color.
iii) Place your city name at the top of page in large text and in blue color.
iv) Add names of the landmarks in your city, each in different color, style and font
v) Add any image at the bottom. (Use inline CSS to format the web page)
3) Write a program using html with following CSS specifications
i. The background colour of the company name should be in green.
ii. The text colour of the company name should be red.
iii. The heading should be large –with font ''comic sans ms''
iv. The description of the company should be displayed in blue color in a paragraph.
4) Write a HTML code, which generate the following output
List of Books
Item Item Name Price
No Rs Paise
1 Programming in Python 500 50
2 Programming in Java 345 00
5) Design HTML 5 Page Using CSS Which Displays the following Navigation Bar.
6) Write a PHP script to create a chess board using CSS on table cells.
PHP Practical
welcome.php
<?php
echo “welcome in computer science department”;
?>
info.php
<?php
phpinfo();
?>
add.php
<?php
$a=10;
$b=20;
$c=$a + $b;
echo “Addition is :- $c”;
?>
Solve Following:-
1. Write a PHP program to perform all arithmetic operations.
2. Write a PHP script for the following: Design a form to accept two numbers from the user.
Give options to choose an arithmetic operation (Use Radio Button). Display the result
submit button click.
3. Write a PHP script to change the preferences of your web page like font style (face), font
size, font color, background color. Display selected settings as an output.
4. Write a PHP script to accept two strings from user. Write a user defined strcat() function
to concatenate these two strings and display output on submit button click.
Login:-
Login with
typhp1 if your roll number is 1
……..
and so on………
Save html programs with .html extension
and PHP programs with .php extension

CSS & PHP Practise Sheet

Uploaded by

Copyright:

Available Formats

CSS & PHP Practise Sheet

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS & PHP Practise Sheet

Uploaded by

Copyright:

Available Formats

Applying CSS to an HTML document

1. In-Line Method (the attribute style).

2. Internal Method (the tag style).

3. External Method (link to a style sheet).

Method 1: In-line (the attribute style)

<title> In-line CSS Example </title>

<p> This is a red page </p>

<title> Internal CSS Example </title>

<p> This is a red page </p>

Sample program of External Style:

<link rel="stylesheet" type="text/css" href="mystyle.css">

background-color: light blue;

2) Create HTML5 page with following specifications

i) Title should be about your City.

ii) Color the background by Pink color.

i. The background colour of the company name should be in green.

ii. The text colour of the company name should be red.

4) Write a HTML code, which generate the following output

echo “welcome in computer science department”;

echo “Addition is :- $c”;

1. Write a PHP program to perform all arithmetic operations.

typhp1 if your roll number is 1

typhp2 if your roll number is 2

typhp15 if your roll number is 15

Save html programs with .html extension

and PHP programs with .php extension

You might also like