Scribd
Upload
7 views

CSS (Cascadin Style Sheets)

Uploaded by

anoshomid.12
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
7 views

CSS (Cascadin Style Sheets)

Uploaded by

anoshomid.12
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 60

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?

You might also like