Scribd
Upload
4 views36 pages

Web Design UI Technologies Overview

The document provides an overview of web design and UI technologies, focusing on HTML, CSS, JavaScript, Bootstrap, and jQuery. It explains the components of web applications, including front-end and back-end technologies, and details the structure and basic elements of HTML. Additionally, it covers various HTML tags, attributes, and examples of creating tables and forms for web applications.

Uploaded by

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

Web Design UI Technologies Overview

The document provides an overview of web design and UI technologies, focusing on HTML, CSS, JavaScript, Bootstrap, and jQuery. It explains the components of web applications, including front-end and back-end technologies, and details the structure and basic elements of HTML. Additionally, it covers various HTML tags, attributes, and examples of creating tables and forms for web applications.

Uploaded by

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

Web Design -UI TECHNOLOGIES

Study Material

3|P age
Web Design -UI TECHNOLOGIES

HTML (HYPER TEXT MARKUP LANGUAGE)


Agenda
1) HTML
2) JS
3) CSS
4) Bootstrap
5) JQuery

Web Application:
The applications which will provide services over the web are called web applications.

Eg: [Link], [Link], [Link] etc.

Every web application contains 2 main components

1) Front-End(Client Side)
2) Back-End (Server Side)

1) Front-End:
 It represents what user is seeing on the website
 We can develop Front-End content by using the following technologies:
 HTML, JS, CSS, JQuery and BootStrap

 JQuery and Bootstrap are advanced front-end technologies, which are developed by
using HTML, CSS and JavaScript only.

HTML: HyperText Markup Language


Every web application should contain HTML. i.e HTML is the mandatory technology for
web [Link] represents structure of web page

4|P age
Web Design -UI TECHNOLOGIES

CSS: Cascading Style Sheets


 It is optional technology; still every web application contains CSS.
 The main objective of CSS is to add styles to the HTML Pages like colors, fonts, borders
etc.

Java Script:
 It allows to add interactivity to the web application including programming logic.
 The main objective of Java Script is to add functionality to the HTML Pages. ie to add
dynamic nature to the HTML Pages.
 HTML  Meant for Static Responses
 HTML+JS  Meant for Dynamic Responses

Eg 1: To display "Welcome to Sameer Sir Classes" response to the end user only HTML
is enough, because it is static response.

Eg 2: To display current server date and time to the end user, only HTML is not enough
we required to use some extra technology like JavaScript, JSP, ASP, PHP etc as it is
dynamic response.

Static Response vs Dynamic Response:


 If the response is not varied from time to time and person to person then it is
considered as static response.
Eg: login page of gmail
home page of icici bank

 If the response is varied from time to time and person to person then it is considered
as dynamic response.
Eg: inbox page of gmail
balance page of icicibank

2) Back End:
 It is the technology used to decide what to show to the end user on the Front-End.
 ie Backend is responsible to generate required response to the end user,which is
displayed by the Front-End.

Back-End has 3 important components:

1) The Language like Java, Python etc


2) The Framework like struts, spring, DJango, Pyramid, Flask etc
3) The Database like SQLite, Oracle, MySQL etc

5|P age
Web Design -UI TECHNOLOGIES

 For the Backend language JAVA is the best choice because of the following reasons:
Simple and easy to learn, libraries and concise code.

HTML Basics:
 HTML stands for HyperText Markup language.
 This is the most basic building block of every web application. Without using HTML
wecannot build web applications. It is the mandatory technology.

 We can use CSS to style HTML Pages.


 We can use Java Script to add functionality to the HTML pages.

Strcutre of HTML Page:


 Every HTML page contains 2 parts
1) Head
2) Body

 Head contains meta data like title of the page, keywords etc. CSS files and Java Script
files information we have to specify in the Head Part only.

 Body contains actual content.

1) <!doctype html>// to indicate that it is HTML page – version 5

6|Page
Web Design -UI TECHNOLOGIES

2) <html >
3) <head>
4) Meta Data like keywords,author,title...
5) css files information
6) js files information
7) </head>
8) <body>
9) Actual Data
10) </body>
11) </html>

7|P age
Web Design -UI TECHNOLOGIES

HTML Comment:
<!-- Anything here is considered as Comment -->

Title:
1) <head>
2) <title>Basic HTML for Web Design Classes</title>
3) </head>

Heading Tags:
HTML supports 6 heading tags
<h1>,<h2>,....

<h1>This is Heading1</h1>

Paragraph tag: <p>:


We can use this tag to represent paragraph of text.
<p> This is first paragraph </p>

Case-1:

1) <p>This is First Line


2) This is Second Line
3) This is Third Line
4) This is Four Line
5) </p>

Total Data will come in a single line, because we are using only one paragraph tag.

Case-2:

1) <p>This is First Line</p>


2) <p>This is Second Line</p>
3) <p>This is Third Line</p>
4) <p>This is Fourth Line</p>

Output will come in 4 lines

Case-3:
<p>This is First Line</p><p>This is Second Line</p>

output will come in multiple lines

8|P age
Web Design -UI TECHNOLOGIES

Note: In HTML indentation is not important but tags are important. Blocking also takes
care by html tags only.

1) <body>
2) <h1>This is HTML Demo Class</h1>
3) <p>This is First Line</p>
4) <p>This is Second Line</p>
5) <p>This is Third Line</p>
6) <p>This is Fourth Line</p>
7) </body>

Bold and Italic:


Legacy Tags:
<b> for bold
<i> for italic
These are old (lEgacy)html tags and not recommended to use.
Eg: <p><b><i>This is First Line</i></b></p>

Advanced Tags:
We can use the following HTML 5 advanced tags for bold and italic
<strong> for strong text(bold)
<em> for emphasis (italic)
Eg: <p><strong><em>This is Second Line</em></strong></p>

HTML Lists:
There are 2 types of lists
1) Ordered List
2) Unordered List

1) Ordered List:
All list items will be displayed with numbers

1) <ol>
2) <li>Hot Coffee</li>
3) <li>Tea</li>
4) <li>Dosa</li>
5) <li>Beer</li>
6) </ol>

9|P age
Web Design -UI TECHNOLOGIES

Output:
1. Hot Coffee
2. Tea
3. Dosa
4. Beer

2) Unordered List:
Instead of numbers bullet symbol will come. Here order is not important.

1) <ul>
2) <li>Hot Coffee</li>
3) <li>Tea</li>
4) <li>Dosa</li>
5) <li>Beer</li>
6) </ul>

Nested Lists:
We can take list inside list, which are nothing but nested lists.

1) <ol>
2) <li>Dosa</li>
3) <li>Lassi</li>
4) <li>Milk</li
5) <li>Beer</li>
6) <ul>
7) <li>KF</li>
8) <li>KO</li>
9) <li>RC</li>
10) </ul>
11) </ol>

Note: For outer and inner lists we can take both ordered and unordered lists
Eg: We can take unordered list inside ordered list

Div and Span Tags:


 We can use div and span tags to group related tags into a single unit.
 In general we can use these tags with CSS.

1) <div class="groupone">
2) <h1> Group One Content</h1>
3) <p>This division tag helpful to style a group of
4) html tags with css</p>
5) </div>

10 | P a g e
Web Design -UI TECHNOLOGIES

 div means division


 <span> tag is exactly same as division tag except that it is inline. i.e to define group
within the line of text we can use <span> tag.
 <p>This <span>division tag helpful</span> to style a group of html tags with css</p>
 <div> will work for group of lines where as <span> will work within the line.

Note: <div> and <span> tags are helpful only for styling html. Hence they will always
work with css only.

Attributes:
 HTML Attributes will provide extra information to HTML tags.
 To insert image in the html page, src attribute specify location of the image to the
<img> tag.

Setting Image inside HTML:


 <img src="[Link]" alt="OOPS Image is missing">
 src means source where we have to specify the image source(complete location). We
can take image address from the google also.
 alt means alternate. If image is missing then broken link image will [Link] this case
if we want to display some meaningful text information then we should go for alt
attribute.

Note: We have to open the tag and we are not responsible to close the tag,such type of
tags are called self closing tags.
Eg: <img> tag

Creating Hyperlinks by using anchor tag: <a>:


<a href="[Link]">Click Here to go Second Page</a>
<a href="[Link]

11 | P a g e
Web Design -UI TECHNOLOGIES

India Bar and Restaurant Application:

1) <!doctype html>
2) <html lang="en">
3) <head>
4) <meta charset="UTF-8">
5) <meta name="Generator" content="EditPlus®">
12 | P a g e
Web Design -UI TECHNOLOGIES

6) <meta name="Author" content="">


7) <meta name="Keywords" content="">
8) <meta name="Description" content="">
9) <title>India Bar and Restaurant</title>
10) </head>
11) <body>
12) <h1>Welcome to India Bar and Restaurant</h1>
13) <img src="[Link]" alt="image missing upload soon">
14) <p>We are very specialized for Chilled Beer. We have virtual rain environment wi
th all facilities so that 100% guarantee for the Kick</p>
15) <h2>Our Brand Ambassodor is : Deepika padukone</h2>
16) <img src="[Link]" alt="missing image"/>
17) <h3>Our offered Products:</h3>
18) <ol>
19) <li>KF</li>
20) <li>KO</li>
21) <li>RC</li>
22) <li>FO</li>
23) </ol>
24) <h1>Offer of the Day: Buy One Get One FREE</h1>
25) <p>View Our Profile:</p>
26) <a href="[Link]
27) <a href="[Link]
28) <a href="[Link]
29) </body>
30) </html>

13 | P a g e
Web Design -UI TECHNOLOGIES

Table Creation:
We can use
 <table> to create table
 <thead> to specify head row
 <th> to specify column data in head row(column name)
 <tr> to insert row in the table
 <td> to specify column data in the row/record

We can use border attribute inside <table> tag

1) <table border="1">
2) <thead>
3) <th>ENO</th>
4) <th>ENAME</th>
5) <th>ESAL</th>
6) <th>EADDR</th>
7) </thead>
8) <tr>
9) <td>100</td>
10) <td>INDIA</td>
11) <td>1000</td>
12) <td>Hyd</td>
13) </tr>
14) <tr>
15) <td>200</td>
16) <td>Deepika</td
17) <td>2000</td>
18) <td>Mumbai</td>
19) </tr>
20) <tr>
21) <td>300</td>
22) <td>Bunny</td>
23) <td>3000</td>
24) <td>Chennai</td>
25) </tr>

14 | P a g e
Web Design -UI TECHNOLOGIES

26) </table>

Oscar Awards Winners List 2018 Application


(Assignment on tables):

1) <!doctype html>
2) <html lang="en">
3) <head>
4) <title>Oscar awards winners list</title>
5) </head>
6) <body>
7) <h1> Oscar Awards Winners List 2018</h1>
8) <table border="1">
9) <thead>
10) <th>[Link]</th>
11) <th>Winner</th>
12) <th>Winner Pic</th>
13) <th>CatEgory</th>
14) <th>Country Log</th>
15) <th>View Profile</th>
16) </thead>
17) <tr>
18) <td>1</td>
19) <td>Sunny</td>

15 | P a g e
Web Design -UI TECHNOLOGIES

20) <td><img src="[Link]" alt="Image not available"></td>


21) <td>Best Actress</td>
22) <td><img src="[Link]
of_India.svg/255px-Flag_of_India.[Link]" alt="Image not available"></td>
23) <td><a href="[Link] Info</a></td>
24) </tr>
25) </table>
26) </body>
27) </html>

Creation of HTML Forms:


 As the part of web application development, we have to develop several forms like
login form, registration form etc
 We can create Html form by using <form> tag.

<form class="" action="" method="">


.....
</form>

 Within the form to collect end user input, we have to use <input> tag.
 This <input> tag will play very important role in form creation.

Syntax: <input type="" name="" value=""/>

 type attribute can be used to specify the type of input end user has to provide. The
main important types are:
 text
 email
 password
 color
 submit
 checkbox
 radio
etc
 name attribute represents the name of input tag. By using this name,in the next target
page we can access end user provided input value.
 value attribute represents default value will be displayed in the form.

Eg:
<input type="text" name="username" value="Enter User Name"/>
<input type="email" name="mailid" value=""/>
<input type="password" name="pwd" value=""/>
<input type="checkbox" name="course" value=""/>
<input type="radio" name="married" value=""/>

16 | P a g e
Web Design -UI TECHNOLOGIES

 To provide default value it is highly recommended to use placeholder attribute


because end user is not required to delete default value while entering data.
Eg: <input type="text" name="username" placeholder="Enter User Name"/>

Creation of Labels for HTML Elements:


We can define Label Text for our HTML Elements like Radio Buttons, Text Box etc by using
<label> tag.
Syntax: <label for="name">Enter Name:</label>

Eg: <p>Enter Name:</p>


<input type="text" name="username" placeholder="Enter Name">

The result looks like

In this case there is no relation between text box and data.

To link data to text box,we have to use <label> tag.

<label for="name">Enter Name:</label>


<input id="name" type='text' name='username' placeholder='Name to Contact' >

The result looks like

required Attribute:
If end user compulsory should required to provide input value then we should go for
required attribute.
Eg:
<input id="name" type='text' name='username' placeholder='Name to Contact' required>

action Attribute:
Once we fill the form and click submit, then to which page it will go is decided by action
[Link] value of action attribute can be either local resource or web url.
Eg:
<form action="[Link]" >
<form action="[Link] >

17 | P a g e
Web Design -UI TECHNOLOGIES

Demo Program:
[Link]

1) <!doctype html>
2) <html lang="en">
3) <head>
4) <title>Form Input</title>
5) </head>
6) <body>
7) <h1>User Contact Form</h1>
8) <form action="[Link]">
9) <label for="name">Enter Name:</label>
10) <input id="name" type='text' name='username' placeholder='Name to Contact' r
equired>
11) <input type="submit" value="ClickToContact">
12) </form>
13) </body>
14) </html>

[Link]:

1) <!doctype html>
2) <html lang="en">
3) <head>
4) <title>Target HTML</title>
5) </head>
6) <body>
7) <h1>Thanks for Confirmation</h1>
8) </body>
9) </html>

Implementing Radio Buttons:


1) <h3>Are you Married:</h3>
2) <label for='ma'>Yes</label>
3) <input id='ma' type='radio' name="married" value="">
4) <label for='ma1'>No</label>
5) <input id='ma1' type='radio' name="married" value="">

18 | P a g e
Web Design -UI TECHNOLOGIES

Eg 2:

1) <h3>Gender:</h3>
2) <label for='m'>Male</label>
3) <input id='m' type='radio' name="gender" value="Male">
4) <label for='f'>Female</label>
5) <input id='f' type='radio' name="gender" value="Female">
6) <label for='t'>Transgender</label>
7) <input id='t' type='radio' name="gender" value="Transgender">

How to implement Drop down box/select box:


1) <h3>Please Select Your Payment Mode:</h3>
2) <select name='pmode'>
3) <option value='ccard'>Credit Card</option>
4) <option value='dcard'>Dedit Card</option>
5) <option value='ppal'>Paypal</option>
6) <option value='otransfer'>OnlineTransfer</option>
7) </select>

textarea element:

1) <h2>Enter Your FeedBack:</h2>


2) <textarea name="feedback" rows="8" cols="80">

checkbox:

1) <form>
2) <h2>Choose Your Known Languages:</h2>
3) <input type="checkbox" name="languages" value="english" checked> English<br>
4) <input type="checkbox" name="languages" value="telugu"> Telugu<br>
5) <input type="checkbox" name="languages" value="hindi"> Hindi<br>
6) <input type="checkbox" name="languages" value="tamil"> Tamil<br>
7) </form>

How to include spaces in HTML:


1) Type "nbsp" to add a single space.
2) Type "ensp" to add 2 spaces.
3) Type "emsp" to add 4 spaces.
4) Use the non-breaking space (nbsp) 4 times to insert a tab.
5) Use "br" to add a line break.

19 | P a g e
Web Design -UI TECHNOLOGIES

ATOM IDE/Editor: or Visual Studio Code


[Link]

freeware
open source
supports cross platform
several auto completion short-cuts
etc

India Matrimonial Application:

20 | P a g e
Web Design -UI TECHNOLOGIES

21 | P a g e
Web Design -UI TECHNOLOGIES

[Link]:

1) <!DOCTYPE html>
2) <html lang="en" dir="ltr">
3) <head>
4) <meta charset="utf-8">

22 | P a g e
Web Design -UI TECHNOLOGIES

5) <link rel="stylesheet" href="[Link]">


6) <title>India Matrimonial</title>
7) </head>
8) <body>
9) <h1>Welcome to India Matrimonial</h1>
10) <img src="[Link]" alt="">
11) <p>We are specialized in the following areas:</p>
12) <ul>
13) <li>Late Marriages</li>
14) <li>Early Marriages</li>
15) <li>Second and Third Marriages</li>
16) <li>Dating cum Marriages</li>
17) </ul>
18) <a href="[Link]">Click Here to rEgister</a>
19) </body>
20) </html>

[Link]:

1) <!DOCTYPE html>
2) <html lang="en" dir="ltr">
3) <head>
4) <meta charset="utf-8">
5) <title>REgistration Form</title>
6) </head>
7) <body>
8) <h1>Registration Form</h1>
9) <h2>All Fields are Mandatory</h2>
10) <form class="" action="[Link]" method="post">
11) <label for="name">Name</label>
12) <input id="name" type="text" name="name" placeholder="Enter Name" requir
ed><br>
13) <label for="mail">Email</label>
14) <input id="mail" type="email" name="mail" placeholder="Enter Email" require
d><br>
15) <label for="age">Age</label>
16) <input id="age" type="text" name="age" placeholder="Enter Age" required>
17) <h3>Are You Interested In Dating</h3>
18) <label for="dat">Yes</label>
19) <input id="dat" type="radio" name="dating" value="">
20) <label for="dat1">No</label>
21) <input id="dat1" type="radio" name="dating" value="">
22) <h3>Your Expections like:</h3>
23) <select class="" name="expe">
24) <option value="katrina">Katrina Kaif</option>

23 | P a g e
Web Design -UI TECHNOLOGIES

25) <option value="kareena">Kareena Kapoor</option>


26) <option value="sunny">Sunny Leone</option>
27) <option value="mallika">Mallika Sherawat</option>
28) </select>
29) <h3>How many marraiges you want:</h3>
30) <select class="" name="nom">
31) <option value="One">1</option>
32) <option value="Two">2</option>
33) <option value="Three">3</option>
34) <option value="Four">4</option>
35) </select>
36) <h3>Are You Heavy Alocholic:</h3>
37) <input type="checkbox" name="Alocholic" value="yes">YES
38) <input type="checkbox" name="Alocholic" value="no">NO
39) <input type="checkbox" name="Alocholic" value="week-end">Only on week-
ends
40) <h3>Your Preferences and Extra Information</h3>
41) <textarea name="pref" rows="8" cols="80" spellcheck="true" ></textarea>
42) <input type="submit" name="" value="Register">
43) </form>
44) </body>
45) </html>

[Link]:

1) <!DOCTYPE html>
2) <html lang="en" dir="ltr">
3) <head>
4) <meta charset="utf-8">
5) <title>Thank You</title>
6) </head>
7) <body>
8) <h1>Thanks for REgistration</h1>
9) <h2>You will get match details soon by email</h2>
10) </body>
11) </html>

[Link]:

1) h1{
2) color:red;
3) }
4) ul{
5) color:blue;
6) }

24 | P a g e
Web Design -UI TECHNOLOGIES

How to declare multiple submit buttons in the form:


Within the form we can define multiple submit buttons. But based on value we can
implement corresponding action in the back-end.

1) <form action="target">
2) ......
3) <input type="submit" name="action" value="update"/>
4) <input type="submit" name="action" value="edit"/>
5) <input type="submit" name="action" value="delete"/>
6) </form>

In the target, based on submit button value we have to implement corresponding action.

1) choice = [Link]("action")
2) if choice=="update":
3) perform update releated action
4) elif choice=="edit":
5) perform edit related action
6) elif choice=="delete":
7) perform delete related action

HTML Validations:
By using HTML, we can perform the following validations
1) required
2) email
3) min and max length

Eg: password should be minimum 5 characters and maximum 10 characters

Eg:
<label for = "password">Password:</label>
<input type = "password" name = "password" id = "password" pattern = ".{5,10}"
placeholder = "your password" required title = "5 to 10 characters">

Pattern for only digits:[0-9]{5,10}


Pattern for only word characters:\w{5,10}

New Added Elements in HTML 5:

 <article>: The <article> tag is used to represent an article. More specifically, the
content within the <article> tag is independent from the other content of the site
(even though it can be related).

25 | P a g e
Web Design -UI TECHNOLOGIES

 <aside>: The <aside> tag is used to describe the main object of the web page in a
shorter way like a highlighter. It basically identifies the content that is related to the
primary content of the web page but does not constitute the main intent of the
primary page. The <aside> tag contains mainly author information, links, related
content and so on.

 <figcaption>: The <figcaption> tag in HTML is used to set a caption to the figure
element in a document.

 <figure>: The <figure> tag in HTML is used to add self-contained content like
illustrations, diagrams, photos or codes listing in a document. It is related to main
flow but it can be used in any position of a document and the figure goes with the
flow of the document and if remove it then it should not affect the flow of the
document.

 <header>: It contains the section heading as well as other content, such as a


navigation links, table of contents, etc.

 <footer>: The <footer> tag in HTML is used to define a footer of HTML document.
This section contains the footer information (author information, copyright
information, carriers etc.). The footer tag are used within body tag. The <footer>
tag is new in the HTML 5. The footer elements require a start tag as well as an end
tag.

 <main>: Delineates the main content of the body of a document or web app.

 <mark>: The <mark> tag in HTML is used to define the marked text. It is used to
highlight the part of the text in the paragraph.

 <nav>: The <nav> tag is used to declaring the navigational section in HTML
documents. Websites typically have sections dedicated to navigational links, which
enables user to navigate the site. These links can be placed inside a nav tag.

 <section>: It demarcates a thematic grouping of content.

 <details>: The <details> tag is used for the content/information which is initially
hidden but could be displayed if the user wishes to see it. This tag is used to create
interactive widget which user can open or close it. The content of details tag is
visible when open the set attributes.

26 | P a g e
Web Design -UI TECHNOLOGIES

 <summary>: The <summary> tag in HTML is used to define a summary for the
<details> element. The <summary> element is used along with the <details>
element and provides a summary visible to the user. When the summary is clicked
by the user, the content placed inside the <details> element becomes visible which
was previously hidden. The <summary> tag was added in HTML 5. The
<summary> tag requires both starting and ending tag.

 <time>: The <time> tag is used to display the human-readable data/time. It can
also be used to encode dates and times in a machine-readable form. The main
advantage for users is that they can offer to add birthday reminders or scheduled
events in their calendar’s and search engines can produce smarter search results.

 <bdi>: The <bdi> tag refers to the Bi-Directional Isolation. It differentiate a text
from other text that may be formatted in different direction. This tag is used when a
user generated text with an unknown directions.

 <wbr>: The <wbr> tag in HTML stands for word break opportunity and is used to
define the position within the text which is treated as a line break by the browser. It
is mostly used when the used word is too long and there are chances that the
browser may break lines at the wrong place for fitting the text.

 <datalist>: The <datalist> tag is used to provide autocomplete feature in the


HTML files. It can be used with input tag, so that users can easily fill the data in the
forms using select the data.

 <keygen>: The <keygen> tag in HTML is used to specify a key-pair generator field
in a form. The purpose of <keygen> element is to provide a secure way to
authenticate users. When a from is submitted then two keys are generated, private
key and public key. The private key stored locally, and the public key is sent to the
server. The public key is used to generate client certificate to authenticate user for
future.

 <output>: The <output> tag in HTML is used to represent the result of a


calculation performed by the client-side script such as JavaScript.

 <progress>: It is used to represent the progress of a task. It is also define that


how much work is done and how much is left to download a things. It is not used to
represent the disk space or relevant query.

 <svg>: It is the Scalable Vector Graphics.

27 | P a g e
Web Design -UI TECHNOLOGIES

 <canvas>: The <canvas> tag in HTML is used to draw graphics on web page
using JavaScript. It can be used to draw paths, boxes, texts, gradient and adding
images. By default it does not contains border and text.

 <audio>: It defines the music or audio content.

 <embed>: Defines containers for external applications (usually a video player).

 <source>: It defines the sources for <video> and <audio>.

 <track>: It defines the tracks for <video> and <audio>.

 <video>: It defines the video content.

28 | P a g e
Web Design -UI TECHNOLOGIES

Study Material
29 | P a g e
Web Design -UI TECHNOLOGIES

CSS (Cascading Style Sheets)


 The main objective of CSS to add styles to HTML. CSS describes how HTML elements
are displayed on a page.
 Styling includes colors, fonts, size, borders etc
 We can define CSS styling inside HTML. But it is highly recommended to define styling
inside a seperate CSS file(.css extension) and link that file to HTML.
 The power of CSS demo link: [Link]

Various ways to define Style for HTML Elements:


We can define style in 3 ways
1) In Line
2) By using style tag
3) By using css file

1) In Line:
 <h1 style="color:red">This is My First Part of Data</h1>
 define style at tag level is not recommended b'z it increases complexity as every html
page contains 1000s of tags

2) By using Style Tag:


1) <html >
2) <head>
3) ...
4) <style type="text/css">
5) h1{
6) color:blue; font-size:50px;
7) }
8) </style>
9) </head>
10) ...
11) </html>

This way of defining style is not recommended because it is applicable only for current
page but not for remaining pages.

30 | P a g e
Web Design -UI TECHNOLOGIES

3) By using CSS File:


[Link]

1) h1{
2) color:red;
3) }
4)
5) <head>
6) <link rel="stylesheet" href="[Link]">
7) </head>

We can reuse same css file for every html page so that we can promote code reusability.
Hence this approach is highly recommended to use.

Basic Structure of CSS File:


1) tagname{
2) property:value;
3) }

Eg:

1) h1{
2) color:red;
3) }

Once we defined css file, we can link it to html by using <link> tag inside <head> part of
html.

1) <head>
2) <link rel="stylesheet" href="[Link]">
3) </head>

<style>
.SAM {
font-size:40px;
font-weight:bold;
color:green;
}
body {
text-align:center;
}
</style>
<body>
<div class = "SAM">Sameer Sir Classes</div>
<aside>
<div>A computer science portal for Coder</div>
</aside>
</body>

31 | P a g e
Web Design -UI TECHNOLOGIES

How to define Comments in CSS File:


/*
This is CSS comment
*/

32 | P a g e
Web Design -UI TECHNOLOGIES

Demo Application-1:
1) <!DOCTYPE html>
2) <html lang="en" dir="ltr">
3) <head>
4) <meta charset="utf-8">
5) <link rel="stylesheet" href="[Link]">
6) <title>CSS Demo</title>
7) </head>
8) <body>
9) <h1>This is First CSS Example</h1>
10) <p>Here we are going to discuss just basics of css like how to define and how to l
ink etc</p>
11) <h2>The List of Topics are:</h2>
12) <ul>
13) <li>Topic-1</li>
14) <li>Topic-2</li>
15) <li>Topic-3</li>
16) <li>Topic-4</li>
17) <li>Topic-5</li>
18) </ul>
19) <h3>Soon we will discuss remaining things</h3>
20) </body>
21) </html>

[Link]:

1) h1{
2) color: red;
3) }
4) h2{
5) color: blue;
6) }
7) h3{
8) color:green;
9) }
10) p{
11) color:blue;
12) }
13) ul{
14) color:cyan;
15) }

33 | P a g e
Web Design -UI TECHNOLOGIES

Various Possible Ways to Specify Color:


1) color:red;

2) color:rgb(244,66,220);
we have to collect values from google color picker
The allowed values are: 0 to 255
(0,0,0)  black
(255,255,255)  white

3) color:#f44e42
This 6-digit number represents hexa code of color

4) color:rgba(244,66,220,0.9)
a means alpha
The allowed values for a attribute are: 0.0 to 1.0
1.0 means full dark and 0.0 means full light (transparent)

[Link]

Note: The most commonly used approach is: hexa code

Setting Background and Borders:


In CSS, we can set Background as follows:

1) body{
2) background-color:red;
3) }

We can set Border as follows:

1) div{
2) border-color:blue;
3) border-width:thick;
4) border-style:double;
5) }

The allowed values for border-width are:

medium,thin,thick.
We can also set our own width with pixels.

Eg: border-width:10px;
The allowed values for border-style are: dashed,dotted,groove,double etc.

34 | P a g e
Web Design -UI TECHNOLOGIES

1) span{
2) color:yellow;
3) background: green;
4) }

Color vs Background:
 color attribute meant for text color.
 background attribute meant for background color.

1) h1{
2) color:white;
3) background:blue;
4) }

How to Set Background Image:


1) body {
2) background:url([Link]
design_1297-[Link]);
3) }

Various properties while setting image:


1) body{
2) color:white;
3) background:url([Link]
[Link]?auto=compress&cs=tinysrgb&h=350);
4) background-repeat: no-repeat;
5) background-size: cover;
6) }

By default background image will be repeated. If we don't want to repeat then we should
specify: no-repeat

How to Set Border:


Normal way:

1) h1{
2) border-color: orange;
3) border-width: 5px;
4) border-style: solid;

35 | P a g e
Web Design -UI TECHNOLOGIES

5) }

short-cut way:

1) h1{
2) border: solid red 5px; order is not important
3) }

To set border for the image:

1) img{
2) border: groove 10px blue;
3) }

Basic CSS Selectors:


1) Element Selectors:
Select all instances of given element. i.e style is applicable for every tag of the
specified type.

1) h1{
2) color:red;
3) }

This style applicable for every h1 tag of the html page.

2) ID Selectors:
Selects an element with the given Id. But with in the HTML Page ID is always unique.

html:
<h1 id="specialh1">Hello This is First Line</h1>

css:

1) #specialh1{
2) color:white;
3) background: blue;
4) }

36 | P a g e
Web Design -UI TECHNOLOGIES

3) Class Selector:
Select all elements with the given class.

html:

1) <body>
2) <h1 class="specialh1">Hello This is First Line</h1>
3) <h1>Hello This is Second Line</h1>
4) <h1 class="specialh1">Hello This is Third Line</h1>
5) </body>

css:

1) specialh1{
2) color:white;
3) background: blue;
4) }

Note: element,id and class selectors are considered as basic css selectors.

Advanced CSS Selectors:


The following are main important advanced selectors

1) * selector
2) Descendant Selector
3) Adjacent Selector
4) Attribute Selector
5) nth of type selector

Demo HTML Page for CSS Selectors:


1) <!DOCTYPE html>
2) <html lang="en" dir="ltr">
3) <head>
4) <meta charset="utf-8">
5) <title>CSS Demo</title>
6) <link rel="stylesheet" href="[Link]">
7) </head>
8) <body>
9) <h1>Advanced Selectors Demo</h1>
10) <a href="[Link] Here to go to Google</a>
11) <ul>
12) <li>CAT</li>

37 | P a g e
Web Design -UI TECHNOLOGIES

13) <li>RAT</li>
14) <li>DOG</li>
15) </ul>
16) <h4>List of Top Movies</h4>
17) <ul>
18) <li>Bahubali</li>
19) <li>MAHANATI</li>
20) <li>RANGASTALAM</li>
21) </ul>
22) <h4>List of Top Websites</h4>
23) <ul>
24) <li><a href="[Link] </li>
25) <li><a href="[Link] </li>
26) <li><a href="[Link] </li>
27) </ul>
28) </body>
29) </html>

1) * selector:
* means everything. This style is applicable for every thing in the web page.

1) *{
2) color:blue;
3) }

2) Descendant Selector:
1) li a{
2) color:white;
3) background: blue;
4) }

li is considered as parent tag and a is considered as child tag.


For every anchor tag present in li tag this style is applicable

3) Adjacent Selector:
1) a+ul{
2) color: red;
3) }

38 | P a g e

You might also like