CSS 3
Web Engineering - I
Computer department
Khana-e-noor3 School
2023
What is CSS?
▷ CSS stands for Cascading Style Sheets
▷ CSS describes how HTML elements are to be displayed on
screen, paper, or in other media
▷ CSS saves a lot of work. It can control the layout of multiple
web pages all at once
Why Use CSS?
▷ CSS is used to define styles for your
web pages, including the design,
layout and variations in display for
different devices and screen sizes.
Advantages of CSS
▷ CSS saves time
▷ Pages load faster
▷ Easy maintenance
▷ Superior styles to HTML
▷ Multiple Device
Compatibility
▷ Global web standards
▷ Offline Browsing
▷ Platform Independence
Who Creates and
Maintains CSS?
▷ CSS was invited by Håkon
Wium Lie on October 10,
1994 and maintained through
a group of people within the
W3S called the CSS Working
Group.
CSS3 Modules
▷ Selectors
▷ Box Model
▷ Backgrounds and Borders
▷ Image Values and Replaced
Content
▷ Text Effects
▷ 2D/3D Transformations
▷ Animations
▷ Multiple Column Layout
▷ User Interface
CSS Syntax
▷ A CSS rule-set consists of a selector
and a declaration block:
Three Ways to Insert CSS
There are three ways of
inserting a style sheet:
▷ External style sheet
▷ Internal style sheet
▷ Inline style
Inline Styles
▷ An inline style may be used to
apply a unique style for a
single element.
▷ To use inline styles, add the
style attribute to the relevant
element. The style attribute
can contain any CSS property.
Internal Style Sheet
▷ An internal style sheet may be
used if one single page has a
unique style.
▷ Internal styles are defined
within the <style> element,
inside the <head> section of
an HTML page:
External Style Sheet
▷ With an external style sheet, you
can change the look of an entire
website by changing just one file!
▷ Each page must include a reference
to the external style sheet file inside
the <link> element. The <link>
element goes inside the <head>
section:
▷ An external style sheet can be
written in any text editor. The file
Cascading Order
▷ What style will be used when there is more than one
style specified for an HTML element?
▷ Generally speaking we can say that all the styles will
"cascade" into a new "virtual" style sheet by the
following rules, where number one has the highest
priority:
▷ Inline style (inside an HTML element)
▷ External and internal style sheets (in the head section)
▷ Browser default
▷ So, an inline style (inside a specific HTML element) has
the highest priority, which means that it will override a
style defined inside the <head> tag, or in an external
style sheet, or a browser default value.
CSS Selectors
CSS selectors are used to "find" (or select) HTML elements based on
their element name, id, class, attribute, and more.
▷ The element Selector
▷ Universal Selectors
▷ The id Selector
▷ The class Selector
▷ Grouping Selectors
▷ Descendant Selectors
▷ The Child Selectors
▷ The Attribute Selectors
Element Selector
class Selector
id Selector
Universal Selectors
Grouping Selectors
Descendant Selectors
Child Selectors
CSS Comments
▷ Comments are used to explain
the code, and may help when
you edit the source code at a
later date.
▷ Comments are ignored by
browsers.
▷ A CSS comment starts with /*
and ends with */. Comments
can also span multiple lines.
CSS Colors
Colors are displayed combining RED,
GREEN, and BLUE light.
Colors in CSS are most often specified
by:
▷ a valid color name - like "red"
▷ an RGB value - like "rgb(255, 0, 0)"
▷ a HEX value - like "#ff0000"
RGB (Red, Green, Blue)
▷ RGB color values can be
specified using this formula:
rgb(red, green, blue).
▷ Each parameter (red, green,
blue) defines the intensity of
the color between 0 and 255.
Hexadecimal Colors
▷ RGB values can also be specified
using hexadecimal color values in
the form: #RRGGBB, where RR
(red), GG (green) and BB (blue) are
hexadecimal values between 00
and FF (same as decimal 0-255).
CSS - Measurement
Units
▷ Absolute
in, cm, mm, pt, pc
▷ Relative
em, ex, px, gd, rem, vw, vh, vm,
ch
CSS Backgrounds
The CSS background properties are
used to define the background effects
for elements.
▷ CSS background properties:
▷ background-color
▷ background-image
▷ background-repeat
▷ background-attachment
▷ background-position
CSS - Borders
▷ border-style
solid, dotted, dashed, double,
groove, ridge, inset, outset
▷ Border-width
▷ Border-color
▷ border-bottom-…..
▷ border-top- …..
▷ border-left- …..
▷ border-right- …..
CSS - Margins
▷ Margin
▷ margin-bottom
▷ margin-top
▷ margin-left
▷ margin-right
CSS - Paddings
▷ padding
▷ padding-bottom
▷ padding-top
▷ padding-left
▷ padding-right
CSS - Dimension
▷ Height
▷ Width
▷ line-height
▷ max-height
▷ min-height
▷ max-width
▷ min-width
CSS - Text
▷ color
▷ text-align
right, left, center, Justify
▷ text-decoration
none,underline, line-through, overline
▷ text-transform
capitalize, uppercase, lowercase
▷ white-space
pre, nowrap
▷ text-shadow
▷ text-indent
CSS - Text
▷ letter-spacing
▷ word-spacing
▷ line-height
▷ direction
rtl, ltr
CSS - Fonts
▷ font-family
▷ font-style
normal, italic, oblique
▷ font-variant
normal, small-caps
▷ font-weight
normal, bold
▷ font-size
▷ font
CSS - Links
▷ :link
▷ :visited
▷ :hover
▷ :active
CSS - Lists
▷ list-style-type
▷ list-style-position
▷ list-style-image
▷ list-style
CSS - Tables
▷ border-collapse
▷ border-spacing
▷ caption-side
▷ empty-cells
▷ table-layout
CSS - Outlines
▷ outline-width
▷ outline-style
▷ outline-color
▷ outline
CSS - Using Images
▷ Border
▷ height
▷ Width
▷ opacity
Display
▷ Inline
▷ Block
▷ None
CSS - Cursors
▷ Help
▷ Wait
▷ Pointer
overflow
▷ Visible
▷ Hidden
▷ Scroll
▷ auto
CSS - Positioning
▷ Static Positioning
▷ Relative Positioning
▷ Absolute Positioning
▷ Fixed Positioning
CSS - Pseudo Elements
▷ :first-line
▷ :first-letter
▷ :before
▷ :after
CSS3 -
Introduction
CSS3 - Rounded Corners
▷ border-radius
▷ border-top-left-radius
▷ border-top-right-radius
▷ border-bottom-right-radius
▷ border-bottom-left-radius
CSS3 - Multi
Background
▷ Background
▷ Background-image
▷ Background-color
▷ Background-position
▷ Background-attachment
CSS3 - Colors
▷ RGBA colors
▷ HSL colors
▷ HSLA colors
▷ Opacity
What is Gradients?
▷ Gradients displays the
combination of two or more
colors
Types of gradients
▷ Linear Gradients
▷ Radial Gradients
Linear gradients
▷ Top to bottom
▷ Left to right
▷ Diagonal
▷ Multi color
Radial Gradients
▷ closest-side
▷ farthest-side
▷ closest-corner
▷ farthest-corner
CSS3 - shadow
▷ Text shadow
▷ box shadow
CSS3 - Text
▷ Text-overflow
clip, ellipsis
Word Breaking
break-word, keep-all, break-all
CSS3 2D Transforms
▷ translate(10px,20px)
▷ rotate(20deg)
▷ scale(2,3)
▷ skewX(deg)
▷ skewY(deg)
▷ skew(deg)
▷ matrix()
CSS3 Transitions
▷ transition
▷ Transition-delay
▷ Transition-duration
▷ Transition-property
▷ Trnasition-timing-function
linear,ease,ease-in,ease-out,ease-
in-out
CSS3 3D Transforms
▷ rotateX()
▷ rotateY()
▷ rotateZ()
CSS3 - Animation
▷ @keyframes
▷ Animation
▷ animation-name
▷ animation-delay
▷ animation-direction
reverse|alternate|alternate-
reverse
▷ animation-duration
▷ animation-iteration-count
Responsive Web
Designing
Thanks!
Any questions?
