(Cascading Style Sheet 3)

Cascading Style Sheet

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 Block margin 2) Content Block border, 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 percentage For 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.

Cascading Style Sheet

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-block allows 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.

Cascading Style Sheet

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; } <! [if Ite IE 8] > <style> /* For IE < 8 (trigger hasLayout) */ .group { zoom: 1; } </style> <! [endif] -->

Cascading Style Sheet

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 */ }

Cascading Style Sheet

Two Column Floated Layout Version 1: Version 2:

960px

HEADER

HEADER

660px margin

660px margin

COL 1 width: 600px; padding: 20px; float: left;

COL 2 padding: 20px; margin-left: 660px;

COL 1 float: left; width: 600px; padding: 20px; margin-right: 20px;

COL 2 float: left; width: 260px;

FOOTER clear: both;

20px

FOOTER clear: both;

20px

Version 3:

HEADER

660px margin

COL 1: width: 600px; padding: 20px; float: left;

COL 2 width: 260px; padding: 20px; width: 260px;

FOOTER clear: both;

20px

Cascading Style Sheet

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: <section class=col1> Important stuff </section> <section class=col2> For right column </section> <section class=col3> Middle column </section>

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;

Version 3: <article> <section class=col1> This is where the really important stuff goes. </section> <section class=col2> Equally important stuff. </section> </article> <aside> I am related content <aside>

HEADER

COL 1 float: left; padding: 20px; width: 266px;

Col 2 float: right; padding: 20px; width: 266px;

ASIDE float: right; width: 266px; padding: 20px

ARTICLE FOOTER clear: both;

Cascading Style Sheet

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 auto by 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.

Cascading Style Sheet

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 positioned element 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-index 3. 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);

Cascading Style Sheet

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.

Cascading Style Sheet

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.
1000px

590px ( 590px 1000px ) * 100 = 59%

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. <img src=_image/256_256.jpg class=flex alt=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 of extending the current media declaration. The basic syntax is this <link rel=stylesheet href=desktop.css media=[not | only] screen [and[ (expression)/>

20px

20px Cascading Style Sheet

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 that had 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. <meta name=viewport content=width=device-width, initial-scale=1.0> 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.

Cascading Style Sheet

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, columncount, column-gap, and column-rule. Currently browser support is uneven, with the webkit and moz prefix 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);

Cascading Style Sheet

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.

Cascading Style Sheet

PROPERTIES 1. Animation @keyframes animation animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state 2. Background background-clip background-origin background-size 3. Border and Outline border-bottom-left-radius border-bottom-right-radius border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-radius border-top-left-radius border-top-right-radius box-decoration-break box-shadow 4. Box overflow-x overflow-y overflow-style rotation

Specifies the animation A shorthand property for all the animation properties below, except the animation-play-state property Specifies a name for the @keyframes animation Specifies how many seconds or milliseconds an animation takes to complete one cycle Specifies the speed curve of the animation Specifies when the animation will start Specifies the number of times an animation should be played Specifies whether or not the animation should play in reverse on alternate cycles Specifies whether the animation is running or paused Specifies the painting area of the background Specifies the positioning area of the background images Specifies the size of the background images Defines the shape of the border of the bottom-left corner Defines the shape of the border of the bottom-right corner A shorthand property for setting all the border-image-* properties Specifies the amount by which the border image area extends beyond the border box Specifies whether the image-border should be repeated, rounded or stretched Specifies the inward offsets of the image-border Specifies an image to be used as a border Specifies the widths of the image-border A shorthand property for setting all the four border-*-radius properties Defines the shape of the border of the top-left corner Defines the shape of the border of the top-right corner Attaches one or more drop-shadows to the box Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area Specifies the preferred scrolling method for elements that overflow Rotates an element around a given point defined by the rotation-point property

Cascading Style Sheet

rotation-point 5. Color color-profile opacity rendering-intent

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

Permits the specification of a source color profile other than the default Sets the opacity level for an element Permits the specification of a color profile rendering intent other than the default 6. Content for Paged Media bookmark-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 character hyphenate-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 Box box-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

Cascading Style Sheet

9. Generated Content crop move-to page-policy 10. Grid grid-columns grid-rows 11. Hyperlink target target-name target-new target-position 12. Linebox alignment-adjust alignment-baseline baseline-shift dominant-baseline drop-initial-after-adjust drop-initial-after-align drop-initial-before-adjust drop-initial-before-align drop-initial-size drop-initial-value inline-box-align line-stacking line-stacking-ruby line-stacking-shift line-stacking-strategy

Allows a replaced element to be just a rectangular area of an object, instead of the whole object Causes an element to be removed from the flow and reinserted at a later point in the document Determines which page-based occurance of a given element is applied to a counter or string value Specifies the width of each column in a grid Specifies the height of each column in a grid A shorthand property for setting the target-name, target-new, and targetposition properties Specifies where to open links (target destination) Specifies whether new destination links should open in a new window or in a new tab of an existing window Specifies where new destination links should be placed Allows more precise alignment of elements Specifies how an inline-level element is aligned with respect to its parent Allows repositioning of the dominant-baseline relative to the dominantbaseline Specifies a scaled-baseline-table Sets the alignment point of the drop initial for the primary connection point Sets which alignment line within the initial line box is used at the primary connection point with the initial letter box Sets the alignment point of the drop initial for the secondary connection point Sets which alignment line within the initial line box is used at the secondary connection point with the initial letter box Controls the partial sinking of the initial letter Activates a drop-initial effect Sets which line of a multi-line inline block align with the previous and next inline elements within a line A shorthand property for setting the line-stacking-strategy, line-stackingruby, and line-stacking-shift properties Sets the line stacking method for block elements containing ruby annotation elements Sets the line stacking method for block elements containing elements with base-shift Sets the line stacking strategy for stacked line boxes within a containing block element

Cascading Style Sheet

text-height 13. Marquee marquee-direction marquee-play-count marquee-speed marquee-style 14. Multi-column column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns 15. Paged Media fit fit-position image-orientation page size 16. Ruby ruby-align ruby-overhang

Sets the block-progression dimension of the text content area of an inline box Sets the direction of the moving content Sets how many times the content move Sets how fast the content scrolls Sets the style of the moving content Specifies the number of columns an element should be divided into Specifies how to fill columns Specifies the gap between the columns A shorthand property for setting all the column-rule-* properties Specifies the color of the rule between columns Specifies the style of the rule between columns Specifies the width of the rule between columns Specifies how many columns an element should span across Specifies the width of the columns A shorthand property for setting column-width and column-count Gives a hint for how to scale a replaced element if neither its width nor its height property is auto Determines the alignment of the object inside the box Specifies a rotation in the right or clockwise direction that a user agent applies to an image Specifies a particular type of page where an element SHOULD be displayed Specifies the size and orientation of the containing box for page content Controls the text alignment of the ruby text and ruby base contents relative to each other 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 Controls the position of the ruby text with respect to its base Controls the spanning behavior of annotation elements A shorthand property for setting the mark-before and mark-after properties Allows named markers to be attached to the audio stream Allows named markers to be attached to the audio stream Specifies a phonetic pronunciation for the text contained by the corresponding element A shorthand property for setting the rest-before and rest-after properties

ruby-position ruby-span 17. Speech mark mark-after mark-before phonemes rest

Cascading Style Sheet

rest-after rest-before voice-balance voice-duration voice-pitch voice-pitch-range voice-rate voice-stress voice-volume 18. Text hanging-punctuation punctuation-trim text-align-last text-justify text-outline text-overflow text-shadow text-wrap word-break word-wrap 19. 2D/3D Transform transform transform-origin transform-style perspective perspective-origin backface-visibility 20. Transition transition transition-property transition-duration transition-timing-function transition-delay

Specifies a rest or prosodic boundary to be observed after speaking an element's content Specifies a rest or prosodic boundary to be observed before speaking an element's content Specifies the balance between left and right channels Specifies how long it should take to render the selected element's content Specifies the average pitch (a frequency) of the speaking voice Specifies variation in average pitch Controls the speaking rate Indicates the strength of emphasis to be applied Refers to the amplitude of the waveform output by the speech synthesises Specifies whether a punctuation character may be placed outside the line box Specifies whether a punctuation character should be trimmed Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify" Specifies the justification method used when text-align is "justify" Specifies a text outline Specifies what should happen when text overflows the containing element Adds shadow to text Specifies line breaking rules for text Specifies line breaking rules for non-CJK scripts Allows long, unbreakable words to be broken and wrap to the next line Applies a 2D or 3D transformation to an element Allows you to change the position on transformed elements Specifies how nested elements are rendered in 3D space Specifies the perspective on how 3D elements are viewed Specifies the bottom position of 3D elements Defines whether or not an element should be visible when not facing the screen A shorthand property for setting the four transition properties Specifies the name of the CSS property the transition effect is for Specifies how many seconds or milliseconds a transition effect takes to complete Specifies the speed curve of the transition effect Specifies when the transition effect will start

Cascading Style Sheet

21. User interface appearance box-sizing icon nav-down nav-index nav-left nav-right nav-up outline-offset resize

Allows you to make an element look like a standard user interface element Allows you to define certain elements to fit an area in a certain way Provides the author the ability to style an element with an iconic equivalent Specifies where to navigate when using the arrow-down navigation key Specifies the tabbing order for an element Specifies where to navigate when using the arrow-left navigation key Specifies where to navigate when using the arrow-right navigation key Specifies where to navigate when using the arrow-up navigation key Offsets an outline, and draws it beyond the border edge Specifies whether or not an element is resizable by the user

Cascading Style Sheet

SELECTORS element1~element2 [attribute^=value] [attribute$=value] [attribute*=value] :first-of-type :last-of-type :only-of-type :only-child :nth-child(n) :nth-last-child(n) :nth-of-type(n) :nth-last-of-type(n) :last-child :root :empty :target :enabled :disabled :checked :not(selector) ::selection p~ul a[src^="https"] a[src$=".pdf"] a[src*="w3schools"] p:first-of-type p:last-of-type p:only-of-type p:only-child p:nth-child(2) p:nth-last-child(2) p:nth-of-type(2) p:nth-last-of-type(2) p:last-child :root p:empty #news:target input:enabled input:disabled input:checked :not(p) ::selection Selects every <ul> element that are preceded by a <p> element Selects every <a> element whose src attribute value begins with "https" Selects every <a> element whose src attribute value ends with ".pdf" Selects every <a> element whose src attribute value contains the substring "w3schools" Selects every <p> element that is the first <p> element of its parent Selects every <p> element that is the last <p> element of its parent Selects every <p> element that is the only <p> element of its parent Selects every <p> element that is the only child of its parent Selects every <p> element that is the second child of its parent Selects every <p> element that is the second child of its parent, counting from the last child Selects every <p> element that is the second <p> element of its parent Selects every <p> element that is the second <p> element of its parent, counting from the last child Selects every <p> element that is the last child of its parent Selects the documents root element Selects every <p> element that has no children (including text nodes) Selects the current active #news element (clicked on a URL containing that anchor name) Selects every enabled <input> element Selects every disabled <input> element Selects every checked <input> element Selects every element that is not a <p> element Selects the portion of an element that is selected by a user

Cascading Style Sheet