css 3 (05-22-12)

7/28/2019 CSS 3 (05-22-12)

1/21

Cascading Style Sheet

(Cascading Style Sheet 3)

7/28/2019 CSS 3 (05-22-12)

2/21


Box Model

The box model describes the physical properties of each element on your page. Margins, borders,

padding, and content, all make up an elements box.

2 Blocks of Calculations used in an Element

1) Containing Blockmargin2) Content Blockborder, padding, width

Vertical margin collapse

When two block-level elements are stacked on top of one another in normal document flow, their

margins collapse. If the top and bottom margins of the two elements are equal in value, the value is used.

If not, the greater of the two values is used to define the space between the elements.

This prevents paragraphs, headings and other typographic elements from having double-

spacing between the elements. It can, however have unintended consequences for your layouts if youre

not careful as the vertical margins of all elements collapse, not just textual elements.

This can be particularly tricky when you consider parents and child elements without something

to keep the margins from touching (each as padding or a border), those margins collapse as well.

This means that if you set a top margin on a heading or paragraph inside a container element to

hold it away from the top edge of the container, youre not guaranted that youll get results youre after

unless you account for margin collapse.

Using Ems

If ems are used in the font-size property, their value is calculated as a multiple of the parent

elements font-size.

If it is used in any other property within that element, it is relative to that elements font size.

Using percentageFor the most part, percentages are pretty straight-forward. Values are calculated based on the

overall value of the parent element. For example, if you gave a block-level element a width of 100%, it

would stretch as wide as possible, & only be restricted by the parent element.

If you use percentages on box model properties those values, theyre calculated relative to the

width of the parent element.

Normal Document Flow

Browser display content in the order that it is found. Content at the top of the document, for

example, is displayed first and is followed bt content after it. Block level elements are going to occupy

their own line within the layout, while inline level elements are displated as part og the normal flow of the

document content until they can no longer fit, and then theyll break down on the next line.

7/28/2019 CSS 3 (05-22-12)

3/21


Controlling Element Display

You can control how(and if) elements display by using the display property. By using the display

property you can set the following values:

inline / block / list-item / inline-block / table / inline-table /

table-row-group / table-header-group / table-footer-group / table-row/ table-column-group / table-column / table-cell / table-caption /

none / inherit

Inline-blockallows you to display block-level elements as inline elements, while still giving

you full control over box model properties.

Using CSS Reset

CSS restes are a collection of styles give you a consistent starting point for writing your styles.

Although the complexity and features of CSS resets varies, most start by stripping out the marhins and

padding values for commonly used elements.

www.cssreset.com

http://trac.webkit.org/wiki/WebInspector- Webkit

http://www.opera.com/dragonfly/- Opera

DESIGN CONSIDERATION

Discovery Phase

- Interaction with the client to identify golas

- How will users expect to interact with the site?

- What type of functionality will the site need?- Develop a content plan

Wireframes and Prototypes

- Each site will have different requirements

- Phase could consist of simple sketches or detailed prototypes.

- Goal is to make sure site architecture, content organization, and functionality have been planned

properly.

Color and Type Treatments

- Important to establish rules for color and type usage early.

- Typographic rules should guide the fonts being used.

- Setting a primary and secondary color palette, and establishing when those colors are used will

help keep your site consistent.
http://www.cssreset.com/http://www.cssreset.com/http://trac.webkit.org/wiki/WebInspectorhttp://trac.webkit.org/wiki/WebInspectorhttp://www.opera.com/dragonfly/http://www.opera.com/dragonfly/http://www.opera.com/dragonfly/http://trac.webkit.org/wiki/WebInspectorhttp://www.cssreset.com/

7/28/2019 CSS 3 (05-22-12)

4/21


Site Mockups

- For small sites, thes will often just be sketches.

- Detailed mockups can be created using programs like Fireworks, Photoshop, or Illustrator.

- Detailed mockup allow you yo refine the design without extra coding.

- Site assets can be created directly from mockups.

Page Design Tools

- http://www.typetester.org/

- http://kuler.adobe.com/

WORKING WITH FLOATS

The float property has four possible values (left / right / inherit / none). Floating an element to the

left or to the right will cause it to move to the left-move or right-most edge of its parent container.

Floating removes the element from normal flow, and will cause elements below it to shift accordingly.

The clear property has five possible value (left / right / both / inherit / none). By clearing an

element, you can ensure the element does not appear to the left or the right of any floated element. This

has the result of turning a float off and restoring normal document flow to the remaing elements.

Clearfix Articles

- http://tjkdesign.com/articles/clearfix_block-formatting-context_and_hasLayout.asp

- http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

- http://nicolasgallagher.com/micro-clearfix-hack/

.group:before, .group:after {

content:;

display: table;

}.group:after {

clear: both;

}

/* For IE < 8 (trigger hasLayout) */

.group {

zoom: 1;

}
http://www.typetester.org/http://www.typetester.org/http://kuler.adobe.com/http://kuler.adobe.com/http://tjkdesign.com/articles/clearfix_block-formatting-context_and_hasLayout.asphttp://tjkdesign.com/articles/clearfix_block-formatting-context_and_hasLayout.asphttp://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/http://nicolasgallagher.com/micro-clearfix-hack/http://nicolasgallagher.com/micro-clearfix-hack/http://nicolasgallagher.com/micro-clearfix-hack/http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/http://tjkdesign.com/articles/clearfix_block-formatting-context_and_hasLayout.asphttp://kuler.adobe.com/http://www.typetester.org/

7/28/2019 CSS 3 (05-22-12)

5/21


Floating Inline Elements

p:first-of-type:first-letter{ }

- First letter from the first paragraph.

- Applying line-height here wont work for firefox but works on webkit.

.dropcap p:first-of-type:first-letter{line-height: .7;

/* in firefox you cant put a lineheight on a first-letter preudo

* selector, but webkit allows you yo. So in firefox and google chrome

* their line-heights wont match each other so we need to add

* line-height: .7

*/

}

7/28/2019 CSS 3 (05-22-12)

6/21


Two Column Floated Layout

Version 1:

Version 3:

Version 2:

HEADER

660px margin

COL 1

width: 600px;

padding: 20px;

float: left;

20px

COL 2

padding:

20px;

margin-left:

660px;

FOOTERclear: both;

HEADER

660px margin

COL 1:

width: 600px;

padding: 20px;

float: left;

20px

COL 2

width: 260px;

padding:

20px;

width: 260px;

FOOTERclear: both;

HEADER

660px margin

COL 1

float: left;

width: 600px;

padding: 20px;

margin-right: 20px;

20px

COL 2

float: left;

width: 260px;

FOOTERclear: both;

960px

7/28/2019 CSS 3 (05-22-12)

7/21


Three Column Floated Layouts

Version 1:

HEADER

COL 1

float: left;

padding: 20px;

width: 266.6px;

margin-right:

20px;

COL 2

float: left;

padding: 20px;

width: 266.6px;

COL 3

float: right;

padding: 20px;

width: 266.6px;

FOOTER clear: both;

Version 2:

Important stuff

For right column

Middle column

Version 3:

This is where the really

important stuff goes.

Equally important stuff.

I am related content

HEADER

COL 1

float: left;

padding: 20px;

width: 266px;

COL 3

float: left;

margin: auto;

width: 266px;

COL 2

float: right;

padding: 20px;

width: 266px;

FOOTER clear: both;

HEADER

ARTICLE

COL 1

float: left;

padding: 20px;

width: 266px;

Col 2

float: right;

padding: 20px;

width: 266px;

ASIDE

float: right;

width: 266px;

padding: 20px

FOOTER clear: both;

7/28/2019 CSS 3 (05-22-12)

8/21


Column Height Consideration

- http://cssbeauty.com

- http://patterntap.com

- http://www.bestcssvault.com

The height of columns is typically determined by the content inside of them.The height of an element is set to autoby default. The contents of an element defines its height.

Creating Equal Height Columns

section, aside {

padding-botom: 1000em;

margin-bottom: -1000em;

}

article {

overflow: hidden;

}

HEADER

ARTICLE

SECTION ASIDE

FOOTER

Faux columns

Eseentially we use background images to handle this technique. Use a vertically tiled background

image to create the illusion of colored columns.
http://cssbeauty.com/http://cssbeauty.com/http://patterntap.com/http://patterntap.com/http://www.bestcssvault.com/http://www.bestcssvault.com/http://www.bestcssvault.com/http://patterntap.com/http://cssbeauty.com/

7/28/2019 CSS 3 (05-22-12)

9/21


Positioning

The positioning property has five possible values(static / relative / absolute / fixed / inherit). Static

represents a box in normal document flow, and is the default position value for elements. Relative

positioning allows elements to be offset from their normal position. Following elements react as if the

element were not offset. Absolute positioning removes the element from normal flow and allows tou to

position it using top, left, bottom, or right offsets. Following elements react as if the absolutely positionedelement does not exist. Fixed positioning fixes an element relative to the view point. Just as with absolute,

the element is removed from normal flow.

static, relative normal flow

absolute, fixed second positioning scheme absolute

Three positioning scheme

1. Normal flow

2. Floated

3. Absolutely positioned

Z-index

Z-index can be set on any positioned element and has three possible value(auto / integer / inherit).

By default, positioned elements are stacked on top of each other based on where they are encountered in the

source order, with the last object on top. By setting the z-index property you can control the stackin order of

positioned elements. Items are ordered based on stacking context. The root element forms the initial

stacking context, with other stacking contexts being created by applying a z-index value other than auto.

Within each stacking context, elements are stacked in this order:

1. The background and borders of the element forming the stacking context.

2. Any child stacked elements with a negative z-index3. Elements in normal flow

4. Non-positioned floats.

5. Any child stacked elements with a z-index of zero or auto.

6. Any child stacked elements with a positive z-index value, lowest to highest.

CLIP

The clip property can be set to define the visible part of absolutely positioned elements. You can set

clipping values through the use of a rectangular shape. Values(shape / auto / inherit).

When defined, an elements clipping region hides any part of the element that is outside of the

clipping region. Clipping is defined as a series of offset that tell the browser how far away from each side of

the element to clip. Currently, the only supported shape for clipping is rectangular. The syntax is defined as a

series of offsets that looks like this: rect(10px, 10px, 25px, 10px)

Sample

clip: rect(50px, 200px, 150px, 50px);

7/28/2019 CSS 3 (05-22-12)

10/21


Overflow

The overflow has five possible values(visible / hidden / scroll / auto / inherit). The overflow property

allows us to control what happens to content when it no longer fits inside of its container element. Visible

allows content to overflow a containers box, while hidden clips overflow content. Auto and scroll will clip

content, but add scrollbars which allow users to scroll content inside the containing element.

Fixed layouts

Layouts that are set to an overall fixed width that do not react to changes such as browsers being

resized, or device oriented change.

Target Resolution

- Most fixed-width sites target typical desktop resolution.

- Target resolutions have evolved with monitor sizes.

- - target sizes will be a bit smaller that the monitor size to allow for browser chrome and floating

windows.

- Most current layouts target adopt.

Fixed Layout Pros

- Fixed layouts are usually easier to create.

- Designing for a specific size means these is less to plan for

- Pixel-precise layouts are easier to achieve.

Fixed Layout Cons

- Fixed layouts do not adopt to other screen sizes or devices.

- This can result in additional scrolling for users or clipped content.

- On higher resolution monitos, layout targeting smaller screens can look lost.

- Minor spacing sizes can result in the layout breaking.

Flexible Layout Pros

- Layout conforms to the current resolution

- User has the freedom to resize the browser with no negative effect.

- The design is more based in how elements relate to one another

Flexible Layout Cons

- Have to give up a certain amount of control over your design

- Spacing issues can be common in flexible layouts, especially at resolution extremes.

- Flexible layouts require more planning and the code is generally more complex.

7/28/2019 CSS 3 (05-22-12)

11/21


Planning and Fluid Layout

1. As with fixed, define a target resolution and grid.

2. To make calculating percentages easier, mock-up the layout at an ideal size like the target resolution.

3. User your ideal measurements to calculate percentage values.

4. Remember margins and padding calculate their value as a percentage of the PARENT element

When calculating percentages for content width tou calculate that based on total width.

When calculating percentages for magins and padding you calculate that based on just content width of their

parent elements.

20px

590px

( 590px 1000px ) * 100

= 59%20px

350px

(350px1000px)*100

= 35%20px

Magins and paddings values are calculated based on the content width of their parent elements

Making Images Flexible

- Set the width in percent. Dont set a value for the height

- Use background images

- Remove width and height attributes.

o If you leave of the width and the height, the browser will user the

native width and height of the image.

.flex{

max_width: 100%;

// This allows the image to display at its native width and

height if

// it can

}

Media Queries

Media queries allow you to determine which styles are applied to pages based on the presence or

absence of specific media properties such as screen width, color, or resolution. Its essentially a way ofextending the current media declaration.

The basic syntax is this

1000px

7/28/2019 CSS 3 (05-22-12)

12/21


Not and only are keywords that can be used to check for a negative return aon the expression (not), or hide

the media query from older user agents (only).

The and keyword allows us to constrain the application of styles to the conditions of the expression that

follows it. The expression allows you to test specific media feature values and determine if the styles should

be applied. For example, the following media query would limit styles to apply yo only screen devices thathad a screen width or greater than 720px.

media=only screen and (min-width: 720px)

We have a wide ranges of media features to test for including width, height, device-width, device0height,

orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, and grid.

Lengths values, like width, can be expanded by adding the min- or max- prefix.

Responsive Layouts

Layouts that respond to the current environment. This means the layout can change based on

orientation, device type, screen size, or other factors. Changes can be minor, or feature entirely different

layouts and functionality.

Resoponsive Layouts Pros

- Control user experience based on screen size or device.

- Allow you to control how content is presented, or even hide content, based on context.

- Eliminate the need to create separate mobile sites.

Responsice Layout Cons

- Require a tremendous amount of planning compared to other layouts.

- Failure to plan properly can cascade into multiple layouts.- Responsive layouts rely on new CSS and HTML features

o Need to provide fallback support for older browsers.

- To really take advantage of mobile-specific designs, need to go beyond just CSS.

Designing for mobile

When designing for mobile, resource management and taking control over how your page displays

are crucial. To control initial page display, you can user the meta viewport tag. The syntax you can see here

will force the width of the page to match the actual device-width, and set the initial scal to 1, which will

force the device to display your page at the designed width.

You should carefully monitor your resources, and the amount of requests you make to the server.

Large images, or multiple HTTP requests can impact site performance on mobile devices. You can reduce

this by combining media queries into a single external CSS file, and place. The bulk of image requests in the

CSS in the form of background images. This allows you yo serve smaller graphics to mobile devices while

using large graphics for desktop versions.

7/28/2019 CSS 3 (05-22-12)

13/21


Multi-column Text

Using the properties found in the CSS Multi-column Layout Module Specification, you can create

multiple columns of text within a containing element without using floats or tables.

There are four main properties that allow you to control multiple columns; column-width, column-

count, column-gap, and column-rule.Currently browser support is uneven, with thewebkitandmozprefix needed for versions of

firefox and webkit-based browsers. As such, it shouldnt be seen as a lyout-critical styling tool, but rather

something used to enhance the layout in certain browsers.

Border-radius

The border-radius property allows us to specify rounded corners on out elements. It can accept

length/percentage values. If a single values is used, all corners are toundedd equally. For multiple values, the

TL is first specified, followed by TR, BR, and BL. If 2 or 3 values are used the opposite corner is used to

define the missing value.

You can also use syntax for each individual side such as border-top-left-radius to define TL

individually.

Sample of unbalanced corners

border-radius: 25px 15px;

border-top-left-radius: 25px 15px;

Drop shadows

You can apply drop shadows to HTML elements through the box-shadows and text-shadow

properties. The syntax for both shadow properties is roughly the same, except for the fact that text-shadow

does not allow the option inset keywoed. Older versions of the text specification limited text-shadows to

three values (no spread) and is the form of the syntax that is widely used.

Here is the typical syntax for creating a box-shadow

box-shadow: 5px 5px 5px 10px black;

The first value is the horizontal offset, the second value is the vertical offset, the third value is the

blur radius, the fourth value is the spread (or size) of the shadow, and lost value is the color. Adding the

optional inset keyword to box-shadow will convert the shadow to an inner shadow.

Opacity

There are several ways to control the transparenct of elements in CSS. The first is to use the opacity

property, which allows you to set values between 0(transparent) and 1(opaque) on elements. This setting

applies to the entire element, including the elements content. Using the rgba and hsla, color definitions, you

can add an alpha value(again between 0 and 1) to control that color applications opacity. Using this method

you can specify unique opacity values for any property that accepts color definitions.

RGBA

background: rgba(153, 123, 161, .5);

7/28/2019 CSS 3 (05-22-12)

14/21


border: 4px solid rgba(108, 58, 87, .8);

HSLA

background: hsla(230, 20%, 20%, .5);

border: 4px solid hsla(280, 50%, 50%, .8);

Backgrounds

The background property is among the most versatile and powerful properties of CSS. Using the

background property you can apply solid colors, images, gradients, or a mixture of elements by using

multiple background declarations.

background: url(_image/b_border.jpg) repeat-xa left bottom,

url(_images/gallery_banner.jpg) no-repeat 300px 0;

background: linear-gradient(top, rgba(153, 210, 240, .8) 0%, rgba(153,

210, 240, 0) 60%;

/*add web browser prefixes for cross compatibility */

CSS Sprites

By combining multiple icons, interface components, or smaller images into single file, we can limit

the number of requests we make to the server. To displat different images, the same background-image is

used and the appropriate values are supplied to the background0position property to display the desired

graphic. The elements dimensions are set to a size that allows the proper icon to display, but hides the

remainder of the sprite.

7/28/2019 CSS 3 (05-22-12)

15/21


PROPERTIES

1. Animation@keyframes Specifies the animation

animation A shorthand property for all the animation properties below, except the

animation-play-state propertyanimation-name Specifies a name for the @keyframes animation

animation-duration Specifies how many seconds or milliseconds an animation takes to

complete one cycle

animation-timing-function Specifies the speed curve of the animation

animation-delay Specifies when the animation will start

animation-iteration-count Specifies the number of times an animation should be played

animation-direction Specifies whether or not the animation should play in reverse on

alternate cycles

animation-play-state Specifies whether the animation is running or paused

2. Backgroundbackground-clip Specifies the painting area of the background

background-origin Specifies the positioning area of the background images

background-size Specifies the size of the background images

3. Border and Outlineborder-bottom-left-radius Defines the shape of the border of the bottom-left corner

border-bottom-right-radius Defines the shape of the border of the bottom-right corner

border-image A shorthand property for setting all the border-image-* properties

border-image-outset Specifies the amount by which the border image area extends beyond the

border box

border-image-repeat Specifies whether the image-border should be repeated, rounded or

stretched

border-image-slice Specifies the inward offsets of the image-border

border-image-source Specifies an image to be used as a border

border-image-width Specifies the widths of the image-border

border-radius A shorthand property for setting all the four border-*-radius properties

border-top-left-radius Defines the shape of the border of the top-left corner

border-top-right-radius Defines the shape of the border of the top-right corner

box-decoration-break

box-shadow Attaches one or more drop-shadows to the box

4. Boxoverflow-x Specifies whether or not to clip the left/right edges of the content, if it

overflows the element's content area

overflow-y Specifies whether or not to clip the top/bottom edges of the content, if it

overflows the element's content area

overflow-style Specifies the preferred scrolling method for elements that overflow

rotation Rotates an element around a given point defined by the rotation-point

property

7/28/2019 CSS 3 (05-22-12)

16/21


rotation-point Defines a point as an offset from the top left border edge

5. Colorcolor-profile Permits the specification of a source color profile other than the default

opacity Sets the opacity level for an element

rendering-intent Permits the specification of a color profile rendering intent other than the

default6. Content for Paged Mediabookmark-label Specifies the label of the bookmark

bookmark-level Specifies the level of the bookmark

bookmark-target Specifies the target of the bookmark link

float-offset Pushes floated elements in the opposite direction of the where they have

been floated with float

hyphenate-after Specifies the minimum number of characters in a hyphenated word after

the hyphenation character

hyphenate-before Specifies the minimum number of characters in a hyphenated word

before the hyphenation characterhyphenate-character Specifies a string that is shown when a hyphenate-break occurs

hyphenate-lines Indicates the maximum number of successive hyphenated lines in an

element

hyphenate-resource Specifies a comma-separated list of external resources that can help the

browser determine hyphenation points

hyphens Sets how to split words to improve the layout of paragraphs

image-resolution Specifies the correct resolution of images

marks Adds crop and/or cross marks to the document

string-set

7. Flexible Boxbox-align Specifies how to align the child elements of a box

box-direction Specifies in which direction the children of a box are displayed

box-flex Specifies whether the children of a box is flexible or inflexible in size

box-flex-group Assigns flexible elements to flex groups

box-lines Specifies whether columns will go onto a new line whenever it runs out

of space in the parent box

box-ordinal-group Specifies the display order of the child elements of a box

box-orient Specifies whether the children of a box should be laid out horizontally or

vertically

box-pack Specifies the horizontal position in horizontal boxes and the vertical

position in vertical boxes

8. Font@font-face A rule that allows websites to download and use fonts other than the

"web-safe" fonts

font-size-adjust Preserves the readability of text when font fallback occurs

font-stretch Selects a normal, condensed, or expanded face from a font family

7/28/2019 CSS 3 (05-22-12)

17/21


9. Generated Contentcrop Allows a replaced element to be just a rectangular area of an object,

instead of the whole object

move-to Causes an element to be removed from the flow and reinserted at a later

point in the document

page-policy Determines which page-based occurance of a given element is applied toa counter or string value

10.Gridgrid-columns Specifies the width of each column in a grid

grid-rows Specifies the height of each column in a grid

11.Hyperlinktarget A shorthand property for setting the target-name, target-new, and target-

position properties

target-name Specifies where to open links (target destination)

target-new Specifies whether new destination links should open in a new window or

in a new tab of an existing windowtarget-position Specifies where new destination links should be placed

12.Lineboxalignment-adjust Allows more precise alignment of elements

alignment-baseline Specifies how an inline-level element is aligned with respect to its parent

baseline-shift Allows repositioning of the dominant-baseline relative to the dominant-

baseline

dominant-baseline Specifies a scaled-baseline-table

drop-initial-after-adjust Sets the alignment point of the drop initial for the primary connection

point

drop-initial-after-align Sets which alignment line within the initial line box is used at the

primary connection point with the initial letter box

drop-initial-before-adjust Sets the alignment point of the drop initial for the secondary connection

point

drop-initial-before-align Sets which alignment line within the initial line box is used at the

secondary connection point with the initial letter box

drop-initial-size Controls the partial sinking of the initial letter

drop-initial-value Activates a drop-initial effect

inline-box-align Sets which line of a multi-line inline block align with the previous and

next inline elements within a line

line-stacking A shorthand property for setting the line-stacking-strategy, line-stacking-

ruby, and line-stacking-shift properties

line-stacking-ruby Sets the line stacking method for block elements containing ruby

annotation elements

line-stacking-shift Sets the line stacking method for block elements containing elements

with base-shift

line-stacking-strategy Sets the line stacking strategy for stacked line boxes within a containing

block element

7/28/2019 CSS 3 (05-22-12)

18/21


text-height Sets the block-progression dimension of the text content area of an inline

box

13.Marqueemarquee-direction Sets the direction of the moving content

marquee-play-count Sets how many times the content move

marquee-speed Sets how fast the content scrollsmarquee-style Sets the style of the moving content

14.Multi-columncolumn-count Specifies the number of columns an element should be divided into

column-fill Specifies how to fill columns

column-gap Specifies the gap between the columns

column-rule A shorthand property for setting all the column-rule-* properties

column-rule-color Specifies the color of the rule between columns

column-rule-style Specifies the style of the rule between columns

column-rule-width Specifies the width of the rule between columns

column-span Specifies how many columns an element should span acrosscolumn-width Specifies the width of the columns

columns A shorthand property for setting column-width and column-count

15.Paged Mediafit Gives a hint for how to scale a replaced element if neither its width nor

its height property is auto

fit-position Determines the alignment of the object inside the box

image-orientation Specifies a rotation in the right or clockwise direction that a user agent

applies to an image

page Specifies a particular type of page where an element SHOULD be

displayedsize Specifies the size and orientation of the containing box for page content

16.Rubyruby-align Controls the text alignment of the ruby text and ruby base contents

relative to each other

ruby-overhang Determines whether, and on which side, ruby text is allowed to partially

overhang any adjacent text in addition to its own base, when the ruby

text is wider than the ruby base

ruby-position Controls the position of the ruby text with respect to its base

ruby-span Controls the spanning behavior of annotation elements

17.Speechmark A shorthand property for setting the mark-before and mark-after

properties

mark-after Allows named markers to be attached to the audio stream

mark-before Allows named markers to be attached to the audio stream

phonemes Specifies a phonetic pronunciation for the text contained by the

corresponding element

rest A shorthand property for setting the rest-before and rest-after properties

7/28/2019 CSS 3 (05-22-12)

19/21


rest-after Specifies a rest or prosodic boundary to be observed after speaking an

element's content

rest-before Specifies a rest or prosodic boundary to be observed before speaking an

element's content

voice-balance Specifies the balance between left and right channels

voice-duration Specifies how long it should take to render the selected element's contentvoice-pitch Specifies the average pitch (a frequency) of the speaking voice

voice-pitch-range Specifies variation in average pitch

voice-rate Controls the speaking rate

voice-stress Indicates the strength of emphasis to be applied

voice-volume Refers to the amplitude of the waveform output by the speech

synthesises

18.Texthanging-punctuation Specifies whether a punctuation character may be placed outside the line

box

punctuation-trim Specifies whether a punctuation character should be trimmedtext-align-last Describes how the last line of a block or a line right before a forced line

break is aligned when text-align is "justify"

text-justify Specifies the justification method used when text-align is "justify"

text-outline Specifies a text outline

text-overflow Specifies what should happen when text overflows the containing

element

text-shadow Adds shadow to text

text-wrap Specifies line breaking rules for text

word-break Specifies line breaking rules for non-CJK scripts

word-wrap Allows long, unbreakable words to be broken and wrap to the next line

19.2D/3D Transformtransform Applies a 2D or 3D transformation to an element

transform-origin Allows you to change the position on transformed elements

transform-style Specifies how nested elements are rendered in 3D space

perspective Specifies the perspective on how 3D elements are viewed

perspective-origin Specifies the bottom position of 3D elements

backface-visibility Defines whether or not an element should be visible when not facing the

screen

20.Transitiontransition A shorthand property for setting the four transition properties

transition-property Specifies the name of the CSS property the transition effect is for

transition-duration Specifies how many seconds or milliseconds a transition effect takes to

complete

transition-timing-function Specifies the speed curve of the transition effect

transition-delay Specifies when the transition effect will start

7/28/2019 CSS 3 (05-22-12)

20/21


21.User interfaceappearance Allows you to make an element look like a standard user interface

element

box-sizing Allows you to define certain elements to fit an area in a certain way

icon Provides the author the ability to style an element with an iconic

equivalentnav-down Specifies where to navigate when using the arrow-down navigation key

nav-index Specifies the tabbing order for an element

nav-left Specifies where to navigate when using the arrow-left navigation key

nav-right Specifies where to navigate when using the arrow-right navigation key

nav-up Specifies where to navigate when using the arrow-up navigation key

outline-offset Offsets an outline, and draws it beyond the border edge

resize Specifies whether or not an element is resizable by the user

7/28/2019 CSS 3 (05-22-12)

21/21

SELECTORS

element1~element2 p~ul Selects every element that are preceded by a

element

[attribute^=value] a[src^="https"] Selects every element whose src attribute

value begins with "https"[attribute$=value] a[src$=".pdf"] Selects every element whose src attribute

value ends with ".pdf"

[attribute*=value] a[src*="w3schools"] Selects every element whose src attribute

value contains the substring "w3schools"

:first-of-type p:first-of-type Selects every

element that is the first

element of its parent

:last-of-type p:last-of-type Selects every

element that is the last


:only-of-type p:only-of-type Selects every

element that is the only


:only-child p:only-child Selects every

element that is the only child of

its parent

:nth-child(n) p:nth-child(2) Selects every

element that is the second child

of its parent

:nth-last-child(n) p:nth-last-child(2) Selects every

element that is the second child

of its parent, counting from the last child

:nth-of-type(n) p:nth-of-type(2) Selects every

element that is the second


:nth-last-of-type(n) p:nth-last-of-type(2) Selects every

element that is the second

element of its parent, counting from the last child

:last-child p:last-child Selects every

element that is the last child ofits parent

:root :root Selects the documents root element

:empty p:empty Selects every

element that has no children

(including text nodes)

:target #news:target Selects the current active #news element (clicked

on a URL containing that anchor name)

:enabled input:enabled Selects every enabled element

:disabled input:disabled Selects every disabled element

:checked input:checked Selects every checked element

:not(selector) :not(p) Selects every element that is not a

element::selection ::selection Selects the portion of an element that is selected by

a user

css 3 (05-22-12)

Documents