Scribd
Upload
96 views

Presentation Prepared By: Syed Danish, Ahmed Zafar, Adil

The document discusses several new features in CSS3 including attribute selectors, structural pseudo-classes like :nth-child(), multiple background images, rounded borders, columns, templates and grids, text effects, and media queries. CSS3 introduces many new selectors and properties to control the appearance and layout of elements on web pages.

Uploaded by

Shani Khan
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
96 views

Presentation Prepared By: Syed Danish, Ahmed Zafar, Adil

The document discusses several new features in CSS3 including attribute selectors, structural pseudo-classes like :nth-child(), multiple background images, rounded borders, columns, templates and grids, text effects, and media queries. CSS3 introduces many new selectors and properties to control the appearance and layout of elements on web pages.

Uploaded by

Shani Khan
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 25

Presentation Prepared by:

CSS 3
Syed Danish, Ahmed Zafar, Adil

1
New features in CSS3
 Attribute selectors
 Structural pseudo-classes
 The target pseudo-class
 The UI element states pseudo-classes
 Negation pseudo-class
 New combinatory selector
 Multiple Background images
 New Background Style Properties
 Changes to Existing Background Style Properties
 CSS3 Border Properties
 New Border Style Properties

2
New substance in CSS3
 CSS3 Columns
 CSS Template layout module
 CSS3 Grid positioning module- creating grids

with CSS
 CSS3 Text module
 CSS3 Color module
 CSS3 User Interface module
 Media Queries
 Generated content
 CSS3 Speech module

3
New CSS3 Selectors

Attribute Structural Combinatory


Selector pseudo-classes Selector

4
Attribute selectors
 E[foo^="bar"]
◦ an E element whose "foo" attribute value begins exactly with the string "bar"

 E[foo$="bar"]
◦ an E element whose "foo" attribute value ends exactly with the string "bar"

 E[foo*="bar"]
◦ an E element whose "foo" attribute value contains the substring "bar"

 The element has an attribute called foo that contains the string
"bar"
 e.g. <element foo="rebaring">

5
Structural pseudo-classes
 :root
◦ The root element of the document. In HTML this is always <html>

 :nth-child(n)
◦ use this to match exact child elements or use variables to get alternating matches

 :nth-last-child(n)
◦ match exact child elements counting up from the last one

 :nth-of-type(n)
◦ match sibling elements with the same name before it in the document tree

 :nth-last-of-type(n)
◦ match sibling elements with the same name counting up from the bottom

6
Structural pseudo-classes

 :last-child
◦ match the last child element of the parent

 :first-of-type
◦ match the first sibling element of that type

 :last-of-type
◦ match the last sibling element of that type

 :only-child
◦ match the element that is the only child of its parent

 :only-of-type
◦ match the element that is the only one of its type

 :empty
◦ match the element that has no children (including text nodes)

7
The target pseudo-class
 :target
◦ match an element that is the target of the referring
URI

8
The UI element states pseudo-classes
 :enabled
◦ match the element when it's enabled

 :disabled
◦ match the element when it's disabled

 :checked
◦ match the element when it's checked (radio button
or checkbox)

9
Negation pseudo-class
 :not(s)
◦ match when the element does not match the simple
selector s

10
One new combinator:
 General sibling combinator

 elementA ~ elementB
◦ match when elementB follows somewhere after
elementA, not necessarily immediately

11
Multiple Background images
 Using the background-image, background-
position, and background-repeat styles.

 One can specify multiple background images to be


layered on top of one another in the box.

 The first image is the layer closest to the user,


with the following ones painted behind.

 If there is a background color, it is painted below


all the image layers.

12
New Background Style Properties
 There are also some new background properties in CSS3.

 background-clip
◦ This property defines how the background image should be clipped. The
default is the border box, but it can be changed to the padding box or the
content box.

 background-origin
◦ This property determines whether the background should be places in the
padding box, the border box, or the content box.

 background-size
◦ This property allows you to indicate the size of the background image. It
allows you to stretch smaller images to fit the page.

13
Changes to Existing Background Style
Properties
 background-repeat
◦ There are two new values for this property: space and round. Space
spaces the tiled image evenly within the box without being clipped.
Round rescales the background image so that it will tile a whole
number of times in the box.

 background-attachment
◦ A new value "local" is added so that the background will scroll with
the element's content when that element has a scroll bar.

 background
◦ The background shorthand property adds in the size and origin
properties.

14
CSS3 Border Properties

 In CSS3 borders can be the styles (solid, double,


dashed, etc.) or they can be an image.

 CSS3 brings in the ability to create rounded


corners.

 Border images are interesting because one can


create an image of all four borders and then tell
the CSS how to apply that image to your borders.

15
New Border Style Properties
 There are some new border properties in CSS3:

 border-radius
◦ border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-
top-left-radius. These properties allow you to create rounded corners on your borders.
 border-image-source
◦ Specifies the image source file to be used instead of border styles already defined.
 border-image-slice
◦ Represents the inward offsets from the border image edges
 border-image-width
◦ Defines the value of the width for your border image
 border-image-outset
◦ Specifies the amount that the border image area extends beyond the border box
 border-image-stretch
◦ Defines how the sides and middle parts of the border image should be tiled or scaled
 border-image
◦ The shorthand property for all the border image properties

16
CSS3 Columns
 There are three new properties that allow you to define the
number and width of your columns:

 column-width
◦ Defines the width your columns should be. The browser will then flow the
text to fill the space with columns that wide.

 column-count
◦ Defines the number of columns on the page. The browser will then create
columns wide enough to fit in the space, but only the number you specify.

 columns
◦ Shorthand property where you can define either the width or number (or
both, but that rarely makes sense)

17
CSS3 Column Gaps and Rules
 Gaps and rules are placed between columns in the same multicolumn
scenario. Gaps will push apart the columns, but rules do not take up any
space. If a column rule is wider than it's gap, it will overlap adjacent columns.

 There are five new properties for column rules and gaps:

 column-gap
◦ Defines the width of the gaps between the columns
 column-rule-color
◦ Defines the color of the rule
 column-rule-style
◦ Defines the style of the rule (solid, dotted, double, etc.)
 column-rule-width
◦ Defines the width of the rule
 column-rule
◦ A shorthand property defining all three column rule properties at once

18
CSS3 Column Breaks, Spanning
Columns, and Filling Columns
 Column breaks use the same CSS2 options used to define breaks in
paged content, but with three new properties:
◦ break-before
◦ break-after,
◦ break-inside

 Like with tables, you can set elements to span columns with the column-
span property. This allows you to create headlines that span multiple
columns more like a newspaper.

 Filling columns decides how much content will be in each column.

 Balanced columns try to put the same amount of content in each column
while auto just flows the content in until the column is full and then goes
to the next one.

19
Media Queries
 Allows more flexibility when defining how a
style sheet should be used.

 For instance, we could define a style sheet


that is only for handheld devices that have a
viewport larger than 20em.

20
CSS3 Ruby module
 Provides support for languages that use
textual ruby to annotate documents.

21
CSS 3 Template & Grid Layouts
 CSS3 Template layout module and Grid
positioning module

22
CSS3 Text module
 Outline text and even create drop-shadows
with CSS.
Need a Photoshop like Text shadow? CSS3
text-shadow property allows to add a shadow
to each letter of some text. Also,
text-shadow is not new to CSS3, it was
originally proposed in CSS2, but was removed
from CSS 2.1.

23
CSS3 Color module
 With opacity.

 There are so many ways to use CSS


transparency to create to make website user
friendly website. You can control the opacity
of the text or images that to create visually
ecstatic content.

24
CSS3 User Interface module
 Giving new cursors, responses to actions,
required fields, and even resizing elements.

25

You might also like