Practical No: 5 160050107073

______________________________________________________________________________

PRACTICAL NO: 5
AIM: Study all CSS properties and Prepare a CSS reference sheet in
following format:

Property Name Description and Example

align-content The align-content property modifies the behavior of the flex-
wrap property.
div {
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
}
align-items The align-items property specifies the default alignment for items inside
the flexible container.
div {
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
}
background The background property is a shorthand property
body {
background: lightblue url("img_tree.gif") no-repeat fixed center;
}
background- The background-attachment property sets whether a background image
attachment scrolls with the rest of the page, or is fixed

body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
background-color The background-color property sets the background color of an element.

body {background-color: coral;}

background-image The background-image property sets one or more background images for
an element.

body {

______________________________________________________________________________
Page: 12
Practical No: 5 160050107073
______________________________________________________________________________
background-image: url("paper.gif");
background-color: #cccccc;
}
border-bottom The border-bottom property is a shorthand property for (in the following
order):

 border-bottom-width
 border-bottom-style
 border-bottom-color

h1 {
border-bottom: 5px solid red;
}
h2 {
border-bottom: 4px dotted blue;
}
div {
border-bottom: double;
}
border-color The border-color property sets the color of an element's four borders.

div {border-color: coral;}

border-image The border-image property allows you to specify an image to be used as
the border around an element.
#borderimg {
border-image: url(border.png) 30 round;
}
border-style The border-style property sets the style of an element's four borders.
div {border-style: dotted;}
font-family The font-family property specifies the font for an element.
p.a {
font-family: "Times New Roman", Times, serif;
}
p.b {
font-family: Arial, Helvetica, sans-serif;
}
font-size The font-size property sets the size of a font.

div.a {
font-size: 15px;
}
div.b {
font-size: large;
}
div.c {
font-size: 150%;
______________________________________________________________________________
Page: 13
Practical No: 5 160050107073
______________________________________________________________________________
}
font-style The font-style property specifies the font style for a text.

p.a {
font-style: normal;
}
p.b {
font-style: italic;
}
p.c {
font-style: oblique;
}

list-style The list-style property is a shorthand for the following properties:

 list-style-type
 list-style-position
 list-style-image

ul {
list-style: square inside url("sqpurple.gif");
}
margin The margin property sets the margins for an element, and is a shorthand
property for the following properties:

 margin-top
 margin-right
 margin-bottom
 margin-left

p{
margin: 35px;
}
outline The outline property is a shorthand property for:

 outline-width
 outline-style (required)
 outline-color

h2 {
outline: 5px dotted green;
}
div.a {
outline: 2px dashed blue;
}

______________________________________________________________________________
Page: 14
Practical No: 5 160050107073
______________________________________________________________________________
Padding An element's padding is the space between its content and its
border.The padding property is a shorthand property for:

 padding-top
 padding-right
 padding-bottom
 padding-left

p{
padding: 35px;
}
text-align The text-align property specifies the horizontal alignment of text in an
element.

div.a {
text-align: center;
}
vertical-align The vertical-align property sets the vertical alignment of an element.

img.a {
vertical-align: baseline;
}
white-space The white-space property specifies how white-space inside an element is
handled.

p.a {
white-space: nowrap;
}

______________________________________________________________________________
Page: 15
Practical No: 6 160050107073
______________________________________________________________________________

PRACTICAL NO: 6
AIM: A. Create a HTML table of your choice and do the followings using
internal CSS:
1. Set solid border with width 2px and blue color
2. Set first row as header with dark gray color and bold text
3. Set background of odd row with #ffffff and even #ddd color code
4. Set #f5f5dc color of row when user hover mouse on it

B. Create an order list of your choice and do the followings:

1. Set an image as list item maker
2. Change list item position property
3. Set text color blue with odd and red with even list item

Code: A

<html>
<head>

<style>

table{
border: 2px solid blue
}
th{
color: DarkGray;
align:center;
}

td{
text-align: left;
}

tr:nth-child(even){background-color: #ddd}
tr:nth-child(odd){background-color: #ffffff}
tr:hover {background-color:f5f5dc;}

</style>

</head>

<body>
<table border="1" width="50%">
<tr>
<th colspan="4">GAME INFORMATION</th>
______________________________________________________________________________
Page: 16
Practical No: 6 160050107073
______________________________________________________________________________
</tr>

<tr>
<td>LISTS</td>
<td>MILAN</td>
<td>HIMANSHU</td>
<td>JAY</td>
</tr>

<tr>
<td>Basketball</td>
<td>YES</td>
<td>NO</td>
<td>NO</td>
</tr>

<tr>
<td>Cricket</td>
<td>YES</td>
<td>YES</td>
<td>YES</td>
</tr>

<tr>
<td>Studies</td>
<td>NO</td>
<td>NO</td>
<td>YES</td>
</tr>

<tr>
<td>Counter strike</td>
<td>YES</td>
<td>YES</td>
<td>YES</td>
</tr>

</table>

</body>
</html>

______________________________________________________________________________
Page: 17
Practical No: 6 160050107073
______________________________________________________________________________
Code: B

<html>
<head>
<style>

ol {
list-style: square inside url("123.jpg");
list-style-position: outside;
padding:20px;
}

ol li:nth-child(even) {color: red;}

ol li:nth-child(odd) {color: blue;}

</style>
</head>

<body>
<h1> Friends list</h1>
<ol>
<li>PARTH</li>
<li>HIMANSHU</li>
<li>NISARG</li>
<li>JAY</li>
<li>VRUSHANG</li>
<li>KEVIN</li>
</ol>
</body>
</html>

Screen Short:

______________________________________________________________________________
Page: 18
Practical No: 6 160050107073
________________________________
______________________________________________________________________________
______________

______________________________________________________________________________
________________________________ ______________
Page: 19
Practical No: 7 160050107073
______________________________________________________________________________

PRACTICAL NO: 7
AIM: Write two paragraphs with heading and do the followings using
external CSS:
1. Set text color to color code : #838b8b
2. Set first paragraph left and second paragraph right alignment
3. Headings of paragraph must be in capital letter and underlined
4. Change font to ‘times new roman’
5. User font size 14px and highlight keywords in paragraph with bold
letter .

Code:

.CSS File

p.left{
color: #838b8b;
text-align: left;

font-family :"Times New Roman";

font-size : 14px;

}
span.vru{
font-weight: bold;}
span.v{
font-weight: bold;}
span.vv{
font-weight: bold;}
p.right{
color: #838b8b;
text-align: right;

font-family :"Times New Roman";

font-size : 14px;
}
h1 { text-transform : uppercase;
text-decoration : underline;
}

______________________________________________________________________________
Page: 20
Practical No: 7 160050107073
______________________________________________________________________________
.HTML File

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

</head>
<body>

<h1>HTML</h1>
<p class="left">HTML stands for <span class="vru">Hyper Text Markup
Language</span>
HTML describes the structure of Web pages using markup
<span class="vv">HTML</span> elements are the building blocks of <span
class="v">HTML</span> pages
HTML elements are represented by tags</p>

<h1>CSS</h1>
<P class="right">CSS stands for <span class="vru">Cascading Style Sheets</span>
CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
<span class="vv">CSS</span> saves a lot of work. It can control the <span
class="v">layout</span> of multiple web pages all at once
External stylesheets are stored in CSS files</P>

</body>

</html>

Screen Short:

______________________________________________________________________________
Page: 21