Advertisement
Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

Cheat Sheet

CSS3 For Dummies

From CSS3 For Dummies by John Paul Mueller

When you think about adding design elements to websites, CSS3 automatically comes to mind. CSS3’s properties and selectors offer many options and tools to help you edit and define a website’s presentation and special effects. Check out these helpful selectors and properties here.

CSS3 Selectors

CSS3 provides access to a wide variety of selectors that you use to identify which element to format on a page. A selector defines what to format; the style defines how to format it. However, it’s easy to go into selector overload. Most developers use a combination of tag and attribute selectors to perform all selector-related tasks. Here are the commonly used tag selectors, which provide overall selection methodologies.

  • Tag,Tag: Separating two tags with a comma means selecting both tags, regardless of where they appear in the document. For example, using p,div would select all <p> and <div> tags within the document.

  • Tag>Tag: Separating two tags with a greater than sign (>) tells the browser to select a tag that has another tag as a parent. For example, if you have <div><p /></div> and use div>p, the browser will select the <p> tag.

  • Tag Tag: Separating two tags by a space tells the browser to select a tag that appears within another tag. This selector differs from using a greater than sign in that the first tag need not directly appear immediately before the second tag. For example, if you have <div><span><p /></span></div> and use div>p, the browser won’t select anything. However, if you use div p instead, the browser will select the <p> tag.

  • Tag+Tag: Separating two tags with a plus sign (+) tells the browser to select a tag that appears immediately after another tag. For example, if you have <div /><p /> and use div+p, the browser will select the <p> tag. Notice that the <p> tag doesn’t appear within the <div> tag, it appears after the <div> tag.

  • Tag~Tag: Separating two tags with a tilde (~) tells the browser to select every tag that appears after another tag. For example, if you have <div /><p /><p /> and use div~p, the browser will select both <p> tags. This differs from div+p (where the browser will select only the first <p> tag that follows the <div> tag).

  • :root: Selects the root element of the document. The root element depends on the document type. This selector is normally used with XML documents, but you could potentially use it with any document type.

In order to provide fine selection of just the right elements, developers often use attribute selectors in place of tag selectors. Here are the attribute selectors that developers commonly use.

  • .ClassName: Selects any objects that have a class attribute value with the given name. For example, .StdPara would select every object that has a class="StdPara" attribute without regard for object type.

  • #Id: Selects any objects that have an id attribute value with the given name. For example, #ThirdHeader would select every object that has an id="ThirdHeader" attribute without regard for object type.

  • :lang(Language Identifier): Selects any object with the specified language value. For example, :lang(en) would select any object that uses English as its language. Here is a list of common language identifiers.

  • [Attribute]: Selects all objects that use a particular attribute regardless of the attribute’s value. For example, [lang] would select all objects that use the lang attribute.

  • [Attribute=Value]: Selects all objects that have an attribute with a particular value. The value must match precisely. For example, [lang="en-us"] would select every object that has a language attribute with a value of English.

  • [Attribute~=Value]: Selects all objects that have an attribute that contains a particular value. The search value need only appear somewhere within value as a whole. For example, [title~="Secondary"] selects all objects with title attributes that contain the word Secondary as a discrete word. This selector works with whole words.

  • [Attribute|=Value]: Selects all objects that have an attribute that begins with a particular value. The search value needs to appear at the beginning of the value as a whole, but need not be the entire value. For example, [title|="Sub"] selects all objects with title attributes that start with the word Sub. This selector works with hyphenated terms.

  • [Attribute^=Value]: Selects all objects that have an attribute that begins with a particular value. For example, [title|="Sub"] selects all objects with title attributes that start with the word Sub. This form of the selector is less restrictive than the [Attribute|=Value] attribute. Using this form will select title="SubHeader", title="Sub Header", or title="Sub-Header" with equal reliability.

  • [Attribute$=Value]: Selects all objects that have an attribute that ends with a particular value. For example, [title$="Secondary"] selects all objects with title attributes that end with the word Secondary. This form of the attribute is nonrestrictive — it requires no special formatting.

  • [Attribute*=Value]: Selects all objects that have an attribute that contains a particular value. For example, [title$="Secondary"] selects all objects with title attributes that contain with the word Secondary. This form of the selector is less restrictive than the [Attribute~=Value] attribute. Using this form will select title="SecondaryParagraph", title="Secondary Paragraph", or title="Secondary-Paragraph" with equal reliability.

A special not() selector completes the common array of selectors. To tell the browser not to select a particular tag or attribute, but to select everything else instead, you use the :not() selector. For example, :not(p) would select everything but the paragraph tags on the page.

CSS3 Properties

Some CSS3 properties are rarely used; many others are used frequently enough that developers should know about them. Properties and their associated values form the basis of the formatting you perform using CSS3. Here is a list of the properties you’ll find yourself using most often when working with CSS3:

  • background: Defines the content for the background of an element. The value for this property is often a function, such as linear-gradient().

  • background-attachment: Specifies how an image interacts with the rest of an element. You use the following keywords to configure this property: scroll, fixed, and local.

  • background-color: Specifies the background color of an entity, such as the underlying page color. You can use one of these techniques for defining the background color: hexadecimal value, color name, rgb() function, rgba() function, hsl() function, or hsla() function.

  • background-image: Provides the location of a resource to use as the graphic for the background of an element. You use the url() function to specify the location.

  • background-repeat: Allows the background image to repeat or not repeat (using the no-repeat keyword) as needed. You can also choose to repeat the image only the horizontal (repeat-x) or vertical (repeat-y) directions.

  • background-size: Determines the size of the background image as an absolute value or a percentage.

  • border: Defines the kind of border to create by specifying one of the following keywords: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, or inherit. It’s also possible to individually change the style of each side of a border using the border-bottom-style, border-left-style, border-right-style, and border-top-style properties.

  • border-color: Specifies the color of the border surrounding an entity. You can use one of these techniques for defining the background color: hexadecimal value, color name, rgb() function, rgba() function, hsl() function, or hsla() function.

  • border-image: Defines an image to use for the border content, rather than a line type. You normally use the url() function to specify the value of this property.

  • border-radius: Determines whether the corners of a border are rounded and the amount of rounding. When creating a rounded corner, you specify the amount of rounding. To remove a rounded corner, use the none keyword.

  • border-width: Determine the thickness of the border surrounding an element. You can define the border width using a keyword (medium, thick, or thin) or an actual measurement.

  • column-count: Specifies the number of columns to create. The width of the columns automatically fluctuates as the user resizes the browser window (or the browser displays a horizontal scrollbar to make it possible to scroll across columns when a specific width is set as well).

  • column-fill: Determines how the browser fills the columns (either filling one column at a time or filling all columns simultaneously with an even amount of content).

  • column-gap: Creates a gap between columns to make it easier to determine where one column ends and another begins.

  • column-rule: Creates a rule between columns so the user can see a physical separator. This property consists of color, style, and width.

  • column-rule-color: Determines with color of the rule used between columns.

  • column-rule-style: Determines the style of the rule used between columns.

  • column-rule-width: Determines the width of the rule used between columns.

  • column-span: Specifies the number of columns that an object can span.

  • column-width: Specifies a column width.

  • columns: Provides a shorthand method for defining both the column-count and column-width properties.

  • color: Specifies the foreground color of an entity, such as text. You can use one of these techniques for defining the color: hexadecimal value, color name, rgb() function, rgba() function, hsl() function, or hsla() function.

  • content: Outputs the text or other resource specified as part of the element presentation. This property is often used to perform tasks such as adding arrows to visual elements. You specify the value using the url() function, Unicode character number preceded by a backslash (such as \27A8), or a keyword.

  • display: Specifies how to present certain element types on the page. You can use any of the following keywords to define the display type: none, box (or flex-box), block, flex, inline, inline-block, inline-flex, inline-table, list-item, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, or table-row-group.

  • float: Allows an image to float in the direction specified. You define this property using the following keywords: left, right, or none.

  • font-family: Defines the name of the font. Three are three font classifications typically used as part of CSS (and most CSS pages use all three unless you also specify the src property): specific, Web safe, and generic.

  • font-size: Determines the size of the font when compared to other fonts on the page or provides a specific font size. You can use one of these techniques for defining the font size: specific size, keyword (such as large or larger), and percentage.

  • font-style: Determines the style of font that the browser creates. The browser must support the style and the font must supply the style in order for this property to take effect. The font style keywords are: normal, italic, oblique (normally a stronger italic), and inherit.

  • font-variant: Specifies whether the font should be presented in a variant form. Not all browsers and fonts support this feature. The keywords for this property are normal, small-caps, and inherit.

  • font-weight: Determines the relative darkness of the font and the width of its strokes. There are two methods for defining the font weight: numeric and keyword (such as bold).

  • height: Indicates the vertical size of an element.

  • left: Indicates the leftmost location of an element on a page.

  • list-style: Defines the appearance of a list element. You can define the kind of markers to use, the position of the markers, and whether the markers are actually created using images, rather than standard characters.

  • margin: Specifies the amount of space between the border of an element and the margin of another element.

  • margin-bottom: Indicates the bottommost location of an element margin on a page.

  • margin-left: Indicates the leftmost location of an element margin on a page.

  • margin-top: Indicates the topmost location of an element margin on a page.

  • padding: Specifies the amount of space between the border of an element and the content within the element.

  • position: Indicates the placement of elements on a page. You specify the placement using these keywords: static (the elements are flowed), absolute (the elements appear in a specific location, even if such placement would overwrite another element), fixed (the elements are placed relative to the browser window), or relative (the elements are placed relative to parent elements).

  • text-align: Specifies the positioning of the text on a line. You specify the alignment using the justify, right, center, and left keywords.

  • text-decoration: Defines the addition of a characteristic, such as underline, overline, or line-through to the font. This property works everywhere, so you don’t need to worry whether someone viewing your page on a television or using a smartphone will get your message.

  • text-overflow: Defines the action that will take place when the text overflows the box used to contain it. Acceptable values are: clip, ellipses, or a string value you provide.

  • text-shadow: Displays a shadow of the target characters at the same width as the target character. The positioning, strength, and color of the shadow are determined by the following properties: h-shadow (determines the horizontal positioning of the shadow), v-shadow (determines the vertical positioning of the shadow), blur (specifies the clarity of the shadow text), and color (defines the color of the outline).

  • visibility: Specifies the level of visibility for an element. You use the following keywords to configure this property: visible, hidden, or collapse.

  • width: Indicates the horizontal size of an element.

  • word-break: Determines how text is wrapped within a containing box when working with a non-CJK (Chinese Japanese Korean) language. Acceptable values are: normal, break-all, and hyphenate.

  • word-wrap: Determines how text is broken and then wrapped to the next line in a containing box when working with a non-CJK language. Acceptable values are: normal and break-word.

blog comments powered by Disqus
Advertisement
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win an iPad Mini. Enter to win now!