Scribd
Upload
14 views9 pages

Lab 3

The document provides an overview of CSS, including its purpose, selectors, properties, and values. It explains different CSS techniques such as embedded, inline, and external CSS, as well as positioning methods and media queries for responsive design. Additionally, it includes practical examples and exercises for implementing various CSS properties and concepts in web development.

Uploaded by

cameronrobin495
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
14 views9 pages

Lab 3

The document provides an overview of CSS, including its purpose, selectors, properties, and values. It explains different CSS techniques such as embedded, inline, and external CSS, as well as positioning methods and media queries for responsive design. Additionally, it includes practical examples and exercises for implementing various CSS properties and concepts in web development.

Uploaded by

cameronrobin495
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/ 9

LAB 3: BASIC CONCEPT OF CSS AND MEDIA QUERY

THEORY
CSS stands for Cascading Style Sheets. It describes how HTML elements are to
be displayed on screen, paper, or in other media. CSS saves a lot of work. It can
control the layout of multiple web pages all at once. External stylesheets are
stored in CSS files

In this example all <p> elements will be center-aligned, with a red text color:
p {color: red;
text-align: center;
}
Selector − A selector is an HTML tag at which a style will be applied. This
could be any tag like <h1> or <table> etc.
The Universal Selectors:
*{
color: #000000;
}
The Class Selectors:
h1.black {
color: #000000;
}
The ID Selectors
#black {
color: #000000;
}

Property − A property is a type of attribute of HTML tag. Put simply, all the
HTML attributes are converted into CSS properties. They could be color, border
etc.

Value − Values are assigned to properties. For example, color property can have
value either red or #F1F1F1 etc.
Embedded CSS - The <style> Element:You can put your CSS rules into an
HTML document using the <style> element. This tag is placed inside the
<head>...</head> tags. Rules defined using this syntax will be applied to all the
elements available in the document.
Inline CSS - The style Attribute:You can use style attribute of any HTML
element to define style rules. These rules will be applied to that element only.
External CSS - The <link> Element: The <link> element can be used to include
an external stylesheet file in your HTML document. An external style sheet is a
separate text file with .css extension. You define all the Style rules within this
text file and then you can include this file in any HTML document using <link>
elements.
CSS Positioning
Relative: An element with position =relative is positioned relative to its normal
position. Setting the top, right, bottom and left properties will cause it to be
adjusted away from its normal position.
Fixed : An element with position= fixed is positioned such that it always stays
in the same place even if the page is scrolled the top, right, bottom and left
properties are used to position the element
Absolute:An element with position= absolute is positioned relative to the
nearest positioned ancestor. If it has no positioned ancestors, it uses document
body and moves along with page scrolling. Absolute positioned elements are
removed from the normal flow, and can overlap elements.
Media Query
Media query is a CSS technique introduced in CSS3.It uses the @media rule to
include a block of CSS properties only if a certain condition is true.
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
If the browser window is 600px or smaller, the background color will be
lightblue:
QUESTIONS
1.Develop web pages taking the reference of Lab 1 and making use of HTML
Layout Elements such as header, footer, nav, section and other html elements as
required. Also provide appropriate styling for those pages using the concepts of
inline, internal and external styling.

CODE
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Lab 3</title>
<link rel="stylesheet" href="q1.css">
</head>
<body>
<header>
<div class="head-content">
<h1>Data Collection Center</h1>
<h2>Babarmahal , Kathmandu</h2>
<img src="download_3.jpg" alt="">
</div>
</header>
<nav>
<a href="#">About Me</a> |
<a href="#">Hobbies</a> |
<a href="#">Academic Page</a> |
<a href="#">Favourite List</a> |
<a href="#">My Profile</a> |

</nav>
</body>
</html>

CSS
*{
margin :0px;
padding: 0;
}
header{
background-color:rgb(210, 248, 0);
height: 150px;
display: relative;
}
div{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
img{
width:150px;
height: 230px;
position: absolute;
right: 0;
}
nav{
background-color:darkkhaki;
height: 50px;
align-items: center;
justify-content: center;
margin-top: 2px;
}
a{
font-size: 20px;
margin: 0px 10px 0px 10px;

2.Write a CSS scripts for implementing the following concept:


a) Background property: background- color, background- image,
background-repeat, background size and shorthand background property
b) Color property rgb(), rgba(), hsl(), hsla()
c) Border property: solid, dashed, dotted and border-radius
d) Font property font-size, font-family, font style
e) List property: list-style-type
f) Table property: border-collapse, cell-padding, text -alignment etc.
g) Illustrate class and id property
h) Make sure to display property to change inline element to block and vice
versa
i) Illustrate concept as static relative, fixed and absolute positioning
Program
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport" content="width=device-
width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="q2.css" />
</head>
<body>
<p id="p1">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quasi soluta,
suscipit vitae dolorem adipisci ut minima
maxime eaque cum libero sint
voluptatibus nulla laborum modi, ipsa
reiciendis? Iusto, neque ullam.
</p>
<p id="p2">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Et exercitationem
inventore nulla impedit beatae aliquam,
corrupti quia, fuga fugit,
doloribus nobis numquam ab deleniti minus iure.
Veritatis nostrum mollitia
neque.
</p>

<table>
<tr>
<th>name</th>
<th>address</th>
</tr>
<tr>
<td>jo</td>
<td>ktm</td>
</tr>
<tr>
<td>ru</td>
<td>pkr</td>
</tr>
</table>
<ol type="A" start="4">
<li>Bunny</li>
<li>Pink</li>
<li>Brown</li>
</ol>
<ul style="list-style-type: decimal-leading-
zero">
<li>Dog</li>
<li>Cat</li>
</ul>
</body>
</html>
CSS
body{
/* background-color: black; */
/* background-image: url(Wallpaper.jpg); */
background-image: url(Wallpaper.jpg);
background-size: cover;
background-repeat: no-repeat;
background-size: 500px;
position: fixed;
right: 0px;

}
#p2{
display:block;
background-color: pink;
}
#p1{
color: rgba(0,255, 255, 1);
font-size: 20px;
font-family: 'Courier New', Courier, monospace;
font-style: italic;
}
table,td,th{
border: 1px solid black;
border-radius: 20px;
border-collapse: collapse;
padding: 20px;

}
th{
text-align: center;
}

3. Create a simple web page illustrating the concepts of Responsive Web


Design (RWD) using media queries (media, types, viewports)

Program
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport" content="width=device-
width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="q3.css" />
</head>
<body>
<div>
<div id="div1">block-1</div>
<div id="div2">block-2</div>
<div id="div3">block-3</div>
<div id="div4">block-4</div>
</div>
</body>
</html>

CSS
div{
display: flex;
width:100%;
border: 3px solid red;
height: 50px;
align-items: center;
}
#div1{
background-color: aqua;
align-items: center;
padding-left: 20px;
/* height: 20px; */
}
#div2{
background-color: yellowgreen;
align-items: center;
padding-left: 20px;
/* height: 20px; */
}
#div3{
background-color: blue;
align-items: center;
padding-left: 20px;
/* height: 20px; */
}
#div4{
background-color: orange;
align-items: center;
padding-left: 20px;
/* height: 20px; */
}
@media screen and (max-width: 800px) {
div{
width:100% ;
display: block;
}
}

You might also like