CS 511-Web Engineering

Week 2

Topic 21-24

CS 511- Week 2:Topic 21-24
CS 511- Week 2:Topic 21-24


Topic 21:

Introduction to CSS:
CSS stands for cascading style sheet. CSS describes the formatting or presentation of documents.
With CSS you can assign
  • font properties
  • colors
  • sizes
  • borders
  • background images
  • position elements on the page
Benefits of CSS:
  1. Improved control over formatting
  2. Improved site maintainability
  3. Improved accessibility
  4. Improved page-download speed
  5. Improved output flexibility
CSS is most commonly used in a separate text file that contains only CSS.

Assessment:

Which of the following protocol is the backbone world wide web system?

  1. HTTP
  2. HTML
  3. CSS
  4. C++

Topic 22:

CSS Syntax:

A CSS document consists of properties. The most used CSS properties are given below:

Fonts

  • font
  • font-family
  • font-size
  • font-style
  • font-weight
  • @font-face


Text

  • letter-spacing
  • line-height
  • text-align
  • text-decoration*
  • text-indent

Color and background

  • background
  • background-color
  • background-image
  • background-position
  • background-repeat
  • box-shadow
  • color
  • opacity

Borders

  • border*
  • border-color
  • border-width
  • border-style
  • border-top, border-left, …*
  • border-image*
  • border-radius

Spacing

  • padding
  • padding-bottom, padding-left, …
  • margin
  • margin-bottom, margin-left, …

Sizing

  • height
  • max-height
  • max-width
  • min-height
  • min-width
  • width

Layout

  • bottom, left, right, top
  • clear
  • display
  • float
  • overflow
  • position
  • visibility
  • z-index

Lists

  • list-style*
  • list-style-image
  • list-style-type

Effects

  • animation*
  • filter
  • perspective
  • transform*
  • transition*

Topic 23:

CSS Syntax (Values)
CSS declaration contains a value for a property
Color Values:

  • Name
  • RGB
  • Hexadecimal
  • RGBa
  • HSL

Units of Measure Values:
  • px
  • em
  • ex
  • ch
  • rem
  • vw, vh
  • in
  • cm
  • mm
  • pt
  • Pc

Topic 24:

Location of styles:
CSS style can be in three different locations.
  1. Inline Styles
  2. Embedded Style Sheet
  3. External Style Sheet
1. Inline Styles
Inline styles placed within an HTML element with the style attribute. Inline style only affects the element.

2. Embedded Style Sheet
Embedded style sheets also called internal styles placed within the <style> element inside the <head> element of an HTML document. 

3.External Style Sheet
External style sheets placed within a external text file with the .css extension.

Assessment:


  • Rules in the CSS always begin with the
    1. Value
    2. Selector
    3. Property
    4. End point
  • It is used to style the HTML documents.
    1. Python
    2. CSS
    3. Php
    4. Java
  • CSS level 1 recommendations were published in
    1. 1876
    2. 2010
    3. 1996
    4. 2022
  • P {Font-weight: bold;} Identity the selector in the above CSS code.
    1. bold
    2. font
    3. weight
    4. p
  • CSS stands for
    1. Cascading superior sheet
    2. Cascading super sheet
    3. Cascading single sheet
    4. Cascading style sheet
  • <h2 style="font-size: 24pt; font-weight:bold;"> Reviews</h2> Identity the CSS linking method used in above code.
    1. Embedded Style Sheet Method
    2. External Style Sheet Method
    3. Double External Style Sheet Method
    4. Inline Style sheet Method
  • A CSS document consists of only one style rule
    1. True
    2. False
  • There are _____ ways to specify the CSS rules.
    1. 3
    2. 10
    3. 20
    4. 2
  • Separation of content and styles in website development scenario helps to improve the
    1. Page download speed
    2. System Memory
    3. Computer Refresh Rate
    4. Browser Development Tool
  • The unit of any given value in CSS is dependent upon the
    1. Selector
    2. Property
    3. Brackets
    4. Computer
  • CSS does not improve control over formatting.
    1. True
    2. False

The End 😊