1 of 55

Web Application Development

  • CSS

2 of 55

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.

3 of 55

CSS

  • CSS Rule

​

​

​

​

​

    • A CSS rule contains two parts: a selector and a declaration.

​

​

​

​

​

​

3

9/24/2020

4 of 55

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

9/24/2020

5 of 55

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.

​

​

​

​

  • This rule indicates that all , <h1>, <h2>, and <h3> elements should be shown in the Arial typeface, and in a yellow color.

5

9/24/2020

Declaration

6 of 55

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

9/24/2020

7 of 55

CSS Example

  • Example CSS

​

​

​

​

​

  • Output

​

​

7

9/24/2020

8 of 55

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

9/24/2020

9 of 55

CSS

  • Example Inline CSS

​

​

​

​

​

  • output

​

9

9/24/2020

10 of 55

CSS

  • Example Internal CSS
    • styles are placed at the top of each web page document, before any of the content is listed. 

​

10

9/24/2020

11 of 55

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

9/24/2020

12 of 55

CSS

  • HTML document with External CSS

12

9/24/2020

13 of 55

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

9/24/2020

14 of 55

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

9/24/2020

15 of 55

CSS

  • Simple selectors (select elements based on name, id, class)
    • In following, element is selected based on name

​

15

9/24/2020

16 of 55

CSS

  • Simple selectors (select elements based on name, id, class)
    • In following, element is selected based on Id

​

16

9/24/2020

17 of 55

CSS

  • Simple selectors (select elements based on name, id, class)
    • In following, element is selected based on class

​

17

9/24/2020

18 of 55

CSS

  • Simple selectors (select elements based on name, id, class)
    • In following, element is selected based on specific class

​

18

9/24/2020

19 of 55

CSS

  • Simple selectors (select elements based on name, id, class)

​

19

9/24/2020

20 of 55

CSS

  • Universal selector
    • The universal selector (*) selects all HTML elements on the page.

20

9/24/2020

21 of 55

CSS

  • Grouping Selector
    • The grouping selector selects all the HTML elements with the same style definitions.

​

21

9/24/2020

22 of 55

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

9/24/2020

23 of 55

CSS

  • Combinator
    • Descendent selector
      • The descendant selector matches all elements that are descendants of a specified element.

23

9/24/2020

24 of 55

CSS

  • Combinator
    • Child selector
      • The child selector selects all elements that are the children of a specified element.

24

9/24/2020

25 of 55

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

9/24/2020

26 of 55

CSS

  • Combinator
    • Adjacent Sibling Selector

​

26

9/24/2020

27 of 55

CSS

  • Combinator
    • General Sibling Selector
      • The general sibling selector selects all elements that are siblings of a specified element.

​

27

9/24/2020

28 of 55

CSS

  • Combinator
    • General Sibling OR following sibling

​

28

9/24/2020

29 of 55

CSS

  • Summary of Combinator selector

29

9/24/2020

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

30 of 55

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

9/24/2020

31 of 55

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

9/24/2020

32 of 55

CSS

  • Example

32

9/24/2020

33 of 55

CSS

  • Pseudo-class
    • Example (Tooltip Hover)

​

33

9/24/2020

34 of 55

Summary: CSS selectors

34

9/24/2020

35 of 55

Summary: CSS selectors

35

9/24/2020

36 of 55

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

9/24/2020

37 of 55

37

9/24/2020

  • 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.

38 of 55

38

9/24/2020

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

39 of 55

39

9/24/2020

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.

40 of 55

Borders

40

9/24/2020

41 of 55

Borders

41

9/24/2020

42 of 55

List: Example

42

9/24/2020

43 of 55

Page Padding

  • Example

43

9/24/2020

44 of 55

Page Padding

  • Page Padding

44

9/24/2020

45 of 55

CSS

  • Example

45

9/24/2020

46 of 55

CSS

46

9/24/2020

47 of 55

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

​

47

9/24/2020

48 of 55

Page Layout

48

9/24/2020

49 of 55

Output

49

9/24/2020

50 of 55

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
      • circle
      • square

50

9/24/2020

51 of 55

List Property

  • Ordered List
    • For an ordered (numbered) list you can use the following values:
    • decimal
      • 1 2 3
    • decimal-leading-zero
      • 01 02 03
    • lower-alpha
      • a b c
    • upper-alpha
      • A B C
    • lower-roman
      • i. ii. iii.
    • upper-roman
      • I II III

51

9/24/2020

52 of 55

52

9/24/2020

53 of 55

Home Task

53

9/24/2020

54 of 55

Home Task

54

9/24/2020

55 of 55

Home Task

  • Output

55

9/24/2020