Web Application Development
CSS
CSS
• What is CSS
– CSS is a document that defines rules for layout of
web application frontend.
– For example,
• you can specify that the background of the page is cream,
all paragraphs should appear in gray using the Arial
typeface, or that all level one headings should be in a blue,
italic, Times typeface.
CSS
• CSS Rule
– A CSS rule contains two parts: a selector and a
declaration.
3 05/01/2025
CSS
• CSS Rule
– The previous rule indicates that all elements should
be shown in the Arial typeface.
– Selectors indicate which element (in this case p is an
element) the rule applies to. The same rule can apply
to more than one element if you separate the
element names with commas.
– Declarations indicate how the elements referred to in
the selector should be styled
4 05/01/2025
CSS
• In a rule, there can be more than 1 element associated
with declaration. Example h1, h2, h3 in following screen
are associated with declaration.
Declaration
• This rule indicates that all , <h1>, <h2>, and <h3>
elements should be shown in the Arial typeface, and in
a yellow color.
5 05/01/2025
CSS
• Properties indicate the aspects of the element you want
to change. For example, color, font, width, height and
border.
• Values specify the settings you want to use for the chosen
properties. For example, if you want to specify a color
property then the value is the color you want the text in
these elements to be.
6 05/01/2025
CSS Example
• Example CSS
• Output
7 05/01/2025
CSS
• How to bind CSS with HTML document>
– Inline
• styles are placed right where you need them, next to the
text you wish to decorate.
– Internal
• styles are placed at the top of each web page document,
before any of the content is listed.
– External
• External style sheets are separate files full of CSS
instructions. You need to refer this file in your html
document.
• Example
– <link href="example.css" type="text/css“ rel="stylesheet" />
8 05/01/2025
CSS
• Example Inline CSS
• output
9 05/01/2025
CSS
• Example Internal CSS
– styles are placed at the top of each web page
document, before any of the content is listed.
10 05/01/2025
CSS
• Example external CSS
– External style sheets are separate files full of CSS
instructions. You need to refer this file in your html
document.
– Create a file called ExtCSS.css and past following
– Create html document and refer ExtCSS.css into it
• See next slide
11 05/01/2025
CSS
• HTML document with External CSS
12 05/01/2025
CSS
• Referring external CSS file
• <link>
– element can be used in an HTML document to tell the browser
where to find the CSS file used to style the page. It is an empty
element (meaning it does not need a closing tag), and it lives
inside the <head> element. It should use three attributes:
– href
• This specifies the path to the CSS file (which is often placed in a folder
called css or styles).
– type
• This attribute specifies the type of document being linked to. The value
should be text/css.
– rel
• This specifies the relationship between the HTML page and the file it is
linked to. The value should be stylesheet when linking to a CSS file.
13 05/01/2025
CSS
• CSS selectors can be divided into different
categories
– Simple selectors (select elements based on name, id,
class)
– Grouping Selector
– Universal Selector
– Combinator selectors
– Pseudo-class selectors
– Pseudo-elements selectors
– Attribute selectors
14 05/01/2025
CSS
• Simple selectors (select elements based on
name, id, class)
– In following, element is selected based on name
15 05/01/2025
CSS
• Simple selectors (select elements based on
name, id, class)
– In following, element is selected based on Id
16 05/01/2025
CSS
• Simple selectors (select elements based on
name, id, class)
– In following, element is selected based on class
17 05/01/2025
CSS
• Simple selectors (select elements based on name, id,
class)
– In following, element is selected based on specific class
18 05/01/2025
CSS
• Simple selectors (select elements based on
name, id, class)
19 05/01/2025
CSS
• Universal selector
– The universal selector (*) selects all HTML elements
on the page.
20 05/01/2025
CSS
• Grouping Selector
– The grouping selector selects all the HTML elements
with the same style definitions.
21 05/01/2025
CSS
• Combinators selector
– select elements based on a specific relationship
between them
– Example
• descendant selector (space)
• child selector (>)
• adjacent sibling selector (+)
• general sibling selector (~)
22 05/01/2025
CSS
• Combinator
– Descendent selector
• The descendant selector matches all elements that are
descendants of a specified element.
23 05/01/2025
CSS
• Combinator
– Child selector
• The child selector selects all elements that are the children of a
specified element.
24 05/01/2025
CSS
• Combinator
– Adjacent Sibling Selector
• The adjacent sibling selector selects all elements that are
the adjacent siblings of a specified element.
• Sibling elements must have the same parent element, and
"adjacent" means "immediately following".
25 05/01/2025
CSS
• Combinator
– Adjacent Sibling Selector
26 05/01/2025
CSS
• Combinator
– General Sibling Selector
• The general sibling selector selects all elements that are
siblings of a specified element.
27 05/01/2025
CSS
• Combinator
– General Sibling OR following sibling
28 05/01/2025
CSS
• Summary of Combinator selector
Selector Example Example description
element element div p Selects all <p> elements inside <div> elements
element>element div > p Selects all <p> elements where the parent is a
<div> element
element+element div + p Selects all <p> elements that are placed
immediately after <div> elements
element1~element2 p ~ ul Selects every <ul> element that are preceded by a
<p> element
29 05/01/2025
CSS
• Pseudo-class selectors
– select elements based on a certain state
– A pseudo-class is used to define a special state of an
element.
– For example, it can be used to:
• Style an element when a mouse hover over it
• Style visited and unvisited links differently
• Style an element when it gets focus
– Syntax
selector : pseudo-class {
property:value;
}
30 05/01/2025
CSS
• Pseudo-class selectors
– Anchor Pseudo-classes
• a:link
– Describes properties associated with hyperlink
• a:visited
– Color of hyperlink once it is visited
• a:hover
– Color of hyperlink once user hovers over it
• a:active
– Color of hyperlink once clicked
31 05/01/2025
CSS
• Example
32 05/01/2025
CSS
• Pseudo-class
– Example (Tooltip Hover)
33 05/01/2025
Summary: CSS selectors
34 05/01/2025
Summary: CSS selectors
35 05/01/2025
Rules for Applying CSS
• If there are two or more rules that apply to the
same element, it is important to understand
which will take precedence.
36 05/01/2025
• If there are two or more
rules that apply to the
same element, it is
important to understand
which will take
precedence.
• LAST RULE
• If the two selectors
are identical, the latter
of the two will take
precedence. Here you
can see the second i
selector takes
precedence over the
first.
37 05/01/2025
SPECIFICITY
If one selector is more
specific than the others, the
more specific rule will take
precedence over more
general ones. In this
example:
h1 is more specific than *
p b is more specific than p
p#intro is more specific than
p
38 05/01/2025
IMPORTANT
You can add !important after
any property value to indicate
that it should be considered
more important than other
rules that apply to the same
element.
39 05/01/2025
Borders
40 05/01/2025
Borders
41 05/01/2025
List: Example
42 05/01/2025
Page Padding
• Example
43 05/01/2025
Page Padding
• Page Padding
44 05/01/2025
CSS
• Example
45 05/01/2025
CSS
46 05/01/2025
List Property
• The list-style-type property allows you to control
the shape or style of a bullet point (also known as
a marker).
• Unordered Lists
– For an unordered list you can use the following values:
none
• disc
ocircle
square
47 05/01/2025
List Property
• Ordered List
– For an ordered (numbered) list you can use the following values:
– decimal
• 123
– decimal-leading-zero
• 01 02 03
– lower-alpha
• abc
– upper-alpha
• ABC
– lower-roman
• i. ii. iii.
– upper-roman
• I II III
48 05/01/2025
49 05/01/2025
Home Task
50 05/01/2025
Home Task
51 05/01/2025
Home Task
• Output
52 05/01/2025
LAYOUT ELEMENTS
• Websites often display content in multiple columns
– <header> Defines a header for a document or a section
– <nav> Defines a container for navigation links
– <section> Defines a section in a document
– <article> Defines an independent self-contained article
– <aside> Defines content aside from the content (like a sidebar)
– <footer> Defines a footer for a document or a section
– <details> Defines additional details
– <summary> Defines a heading for the <details> element
53 05/01/2025
Page Layout
54 05/01/2025
Output
55 05/01/2025
WEBSITE LAYOUT
56 05/01/2025
WEBSITE LAYOUT
57 05/01/2025
WEBSITE LAYOUT
58 05/01/2025
CONTENT
• 1-column (often used for mobile browsers)
• 2-column (often used for tablets and laptops)
• 3-column layout (only used for desktops)
59 05/01/2025
WEBSITE LAYOUT
60 05/01/2025
WEBSITE LAYOUT
61 05/01/2025
WEBSITE LAYOUT
62 05/01/2025
WEBSITE LAYOUT
63 05/01/2025
WEBSITE LAYOUT
64 05/01/2025
WEBSITE LAYOUT
65 05/01/2025
IMAGES
66 05/01/2025
IMAGES
67 05/01/2025
IMAGES
68 05/01/2025
IMAGES
69 05/01/2025
IMAGES
70 05/01/2025
COLORS
• The color property to specify the color of text inside an element
• Computer monitors are made up of thousands of tiny squares called pixels
• Every color is created by mixing amounts of RED, GREEN, and BLUE
RGB VALUES HEX CODES COLOR NAMES
Values for red, green, and blue Hex values represent values for Colors are represented by
are expressed as numbers red, green, and blue in predefined names. However, they
between 0 and 255. hexadecimal code. are very limited in number.
rgb(102,205,170) #66cdaa MediumAquaMarine
102 red value of the red, 102, is There are 147 color names
205 green expressed as 66 supported by browsers
170 blue 205 of the green is expressed
as cd
the 170 of blue equates to aa.
71 05/01/2025
COLORS
HUE SATURATION BRIGHTNESS
Hue is near to the Saturation refers to the Brightness (or "value") refers
colloquial idea of color. amount of gray in a color. to how much black is in a color.
At maximum saturation, At maximum brightness, there
there would be no gray in the would be no black in the color.
color.
At minimum brightness, the
At minimum saturation, the color would be very dark.
color would be mostly gray.
72 05/01/2025
COLORS
73 05/01/2025
COLORS
74 05/01/2025
HTML CSS – Visual Studio
75 05/01/2025
HTML CSS – Visual Studio
76 05/01/2025
HTML CSS – Visual Studio
77 05/01/2025
HTML CSS – Visual Studio
78 05/01/2025
HTML Page – Visual Studio
79 05/01/2025
HTML CSS – Visual Studio
80 05/01/2025
HTML CSS – Visual Studio
81 05/01/2025
HTML CSS – Visual Studio
82 05/01/2025
HTML CSS – Visual Studio
83 05/01/2025
HTML CSS – Visual Studio
84 05/01/2025
HTML Page – Visual Studio
85 05/01/2025
