Scribd
Upload
14 views85 pages

WE Lecture03

The document provides an overview of CSS (Cascading Style Sheets), detailing its role in web application development for styling HTML elements. It covers CSS rules, selectors, properties, and how to apply styles using inline, internal, and external methods. Additionally, it explains the importance of specificity and the use of pseudo-classes, as well as layout elements and color properties.

Uploaded by

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

WE Lecture03

The document provides an overview of CSS (Cascading Style Sheets), detailing its role in web application development for styling HTML elements. It covers CSS rules, selectors, properties, and how to apply styles using inline, internal, and external methods. Additionally, it explains the importance of specificity and the use of pseudo-classes, as well as layout elements and color properties.

Uploaded by

Saail Abbas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 85

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

You might also like