Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
5 views

akhuwat-db-lab-12-intro_to_css

Uploaded by

Abdul Basit
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

akhuwat-db-lab-12-intro_to_css

Uploaded by

Abdul Basit
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Akhuwat College

Spring 2023
CC-215L Database Systems-Lab

Lab-12 Manual

Introduction to CSS and Bootstrap


Lab-12 Manual

Introduction to Lab:
This lab introduces students the purpose of the using front-end in Database Systems. The lab
discusses the basic CSS and Bootstrap. The fundamental concepts are introduced.
The main topics in this lab includes:
1. Bootstrap Introduction
2. Bootstrap Environment Setup
3. Grid Options and Layout
4. Tables
5. Forms
6. Buttons
7. Responsive Utilities
8. CSS Introduction
9. CSS Types
10. CSS Inline Styling
11. CSS Internal Styling
12. CSS Selector
13. Class as a selector
14. Margin and Padding
15. CSS External Styling
16. Post Lab Assignment

Objective of this Lab:


At the end of this lab student should be able to:
 Understand how to enhance a web page using CSS Style sheet.

1. Bootstrap Introduction
What is Bootstrap?
• A responsive design framework
• Can built static websites and dynamic web applications
• Mobile first approach
• Browser support
• Easy to get started

Page 1 of 15
Lab-12 Manual

2. Bootstrap Environment Setup

<!DOCTYPE html>
<html lang=‘en’>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title of page</title>
<link href=“css/bootstrap.min.css" rel="stylesheet" />
<script src=“js/respond.js"></script>
</head>
<body>
This is my first homepage.
<b>This text is bold</b>
<!-- JavaScript-->
<script src=“js/jquery.js"></script>
<script src=“js/bootstrap.min.js"></script>
</body>
</html>

3. Grid Options and Layouts

Grid Options:

Grid Layout:

Page 2 of 15
Lab-12 Manual

How to write pages using a grid:


<!-- every row must have 12 columns -->
<div class=”row”>
<div class=”col-md-4”>
<!-- content -->
</div>
<!-- need to complete 8 more columns -->
</div>
The Grid:
Bootstrap 3 features an always-responsive grid with a maximum size:

1. col-xs-[num] grids have no maximum size (fluid)

2. col-sm-[num] grids resize up to 750px

3. col-md-[num] grids resize up to 970px

4. col-lg-[num] grids resize up to 1170px You should choose col-md or

col-lg for desktop sites.

You can also use two grid sizes for different screen sizes:

<div class=”row”>
<div class=”col-md-4 col-xs-6”>
<!-- content -->

Page 3 of 15
Lab-12 Manual

</div>
<div class=”col-md-8 col-xs-6”>
<!-- content -->
</div>
</div>

4. Tables
Table Classes:

– table

– table-striped

– table-bordered

– table-hover

– table-condensed

Table Example:

<table class=”table table-bordered table-hover”>

<thead>

<th><td>Name</td>

<td>Age</td></th>

</thead>

<tbody>

<tr><td>Alice</td><td>20</td></tr>

<tr><td>Bob</td><td>25</td></tr>

</tbody>

</table>

5.Forms
• Bootstrap provides you with following types of forms layouts:
• Vertical (default) Form
• Inline Form • Horizontal Form
• Forms Classes:

Page 4 of 15
Lab-12 Manual

– role=“form”
– class=“form-group”
– class=“form-control”

Form Example:
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="InputEmail1" placeholder="Enter
email"> </div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="InputPassword1"
placeholder="Password">
</div>
<button type="submit" class="btn btn-
default">Submit</button> </form>

6. Buttons

• Buttons can either be button elements, links or input elements. They will all
look like buttons.
• For simple links, use the <a> element and add button styling if needed.
• For forms or dynamic buttons, use the button element.

Button Classes:

• btn
• btn-default
• btn-success
• btn-info
• btn-warning
• btn-danger
• btn-link

Button Sizes:

• btn-lg
• btn-sm
• btn-xs
• btn-block

Page 5 of 15
Lab-12 Manual

Example:
<button class="btn btn-primary">Primary</button>
<a href=“#” class=”btn btn-primary”>Primary</a>
<input type=”submit” class=”btn btn-primary”/>

7. Bootstrap Responsive Utilities

• Bootstrap provides some handful helper classes, for faster mobile-


friendly development.
• These can be used for showing and hiding content by device via
media query combined with large, small and medium devices.

8. CSS Introduction
What is CSS?
 CSS stands for Cascading Style Sheets
 CSS 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

Page 6 of 15
Lab-12 Manual

9. CSS Types
We can apply CSS styles in three different ways:
1. Inline Styling:
We write the CSS properties inside HTML tags by using style attribute.
2. Internal Styling:
The CSS properties for HTML elements are defined at the top of page by
creating separate tag of style <style></style>
3. External Styling:
The CSS properties for HTML elements are defined in separate file with
extension .css
10. CSS Inline Styling
This styling is used within HTML Tag with style attribute.
Syntax:
Inside HTML start tag use attribute named “style”
In the value of style attribute we define style properties
<tagname style=”property:value;property:value;”>
Text styling:
1.Create h1 tag and write you’re the text “Welcome to my Company”.
2. Apply inline style as:

style="color: red;font-family: verdana;font-weight: bold;background-color:


grey;text-align: center;

<!DOCTYPE html>
<html>
<head>
<title>CSS Practice</title>
<\head>
<body>
<h1 style=”color: read; font-family: verdana; font-weight: bold;
background-color: grey; text-align: center”>
Welcome to my company</h1>

Page 7 of 15
Lab-12 Manual

<\body>
</html>

Change Background Color:


Background color property changes color for HTML elements.
1. Inside body tag, add style:

style=”background-color:lightblue;”

11. CSS Internal Styling


Syntax:
We create a tag of style at the top of HTML document.
<style></style>
Inside style tag we define style for HTML elements as:
<style>
selector {
Property: value;
Property: value;
}
selector {
Property: value;
Property: value;
}
</style>
Example 1:
1. Create a Paragraph tag in body as:

Page 8 of 15
Lab-12 Manual

Shortcut in sublime text: Write Lorem and press tab to complete the paragraph
inside the paragraph tag
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum. </p>
2. Create a style tag in the head section.

3. Write style for Paragraph inside style tag as:


<style>
p{
text-align: center;
font-weight: bold;
border: dotted;
background-color: slateblue;
font-family: tahoma;
}
</style>

12. CSS Selectors:


In CSS, selectors are used to select elements for styling.
You can have following selectors:

HTML elements e.g. p selects all paragraph elements in page.

id selects an element with the specific id.


class selects group of elements having same
class.

Page 9 of 15
Lab-12 Manual

Note: We can assign multiple classes to an HTML element but id is unique. An HTML
element will have only one unique id.
In above example we used HTML element as selector.

ID as Selector:
we can define id for HTML elements using id attribute.
1. Create a new Paragraph and define its id:
<p id=”p2”> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum. </p>
2. In CSS to call id we use selector as:

#idname
3. Define style for Paragraph as:

#p2{
text-align: left;
font-weight: bold;
border: dotted;
background-color: slateblue;
font-family: tahoma;
}

13. Class as Selector:


We define class for HTML elements using class attribute.
Many HTML elements can have one class.
Defining CSS styling for a class applies style to all elements having that class.
1. Create a new Paragraph and give a class name as:

<p class=”text”>This is Paragraph 3</p>


2. Create a heading and give it same class name:

Page 10 of 15
Lab-12 Manual

<h1 class=”text”>Welcome to my Company</h1>


3. Define CSS style inside style tag for the class:

Style for a class is defined as:


.classname
<style>
.text{
text-align: center;
background-color: yellow;
font-weight: bold;
}</style>

14. Margin and Padding


Margin is space created around HTML element, outside of defined border.
Padding is space created around Element’s content inside the defined border.

15. CSS External Styling


In external Styling, you define CSS styles in a separate file with .css extension and link that
file to .html file.
1. Create a New Webpage with .html extension “form.html”

2. Create a Sign Up form as created above:


3. Save the html Webpage.

4. Create a new file with .css extension “style.css”

5. Write style for HTML elements in “form.html” as:

Page 11 of 15
Lab-12 Manual

Page 12 of 15
Lab-12 Manual

16. Post Lab Assignment


1. Create a new html file named as
checkout.html
2. Create the following checkout form in that
html file
3. Now create a separate CSS and style this
checkout form using all the attributes
discussed above under the heading of CSS.
4. Submit the Checkout.html and style.css
files.

Page 13 of 15
Lab-12 Manual

The End

Page 14 of 15

You might also like