Scribd
Upload
16 views60 pages

CSS (Cascadin Style Sheets)

Uploaded by

anoshomid.12
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
16 views60 pages

CSS (Cascadin Style Sheets)

Uploaded by

anoshomid.12
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/ 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