Bucaro TecHelp : Cascading Style Sheets Quick Reference

Attribute Selector

Wed, 04 Jul 2018 19:27:42 GMT

A CSS style sheet consists of rules that define how html elements should be displayed on a webpage. The attribute selector selects an html element by the value of an attribute.

Pseudo-class Selectors

Wed, 04 Jul 2018 17:35:18 GMT

Pseudo-classes are used to control properties of html elements that are not available in the document tree. For example, there is no property in the document tree that relates to an html link have been visited.

Grouped Selectors

Wed, 04 Jul 2018 17:06:24 GMT

A CSS style sheet consists of rules that define how html elements should be displayed on a webpage. With a grouped selector You can associate multiple selectors with a single set of rules.

Descendant Selector

Wed, 04 Jul 2018 15:57:54 GMT

If you created a selector to apply to all paragraph elements. You also want to the rules to apply to paragraph elements that are nested within div elements, but instead of blue text you want to display red text in paragraphs nested within divs. You could create a descendant selector.

Class Selector

Wed, 04 Jul 2018 15:11:36 GMT

A CSS style sheet consists of rules that define how html elements should be displayed on a webpage. Each rule consists of one or more selectors. The class selector is very powerful because not only does it allow you to select multiple elements of the same type, but you can also select elements of other types to belong to the same class.

Use word-wrap Property to allow Line Breaks in the Middle of Words

Sat, 16 Jun 2018 14:53:46 GMT

If a long word is in a containing element that has a set width, since the word has no convienent spaces for a natural line break, the word will extend outside the containing element.

CSS background-origin Positions Background

Thu, 01 Mar 2018 14:32:09 GMT

The background-origin property specifies the origin location of a background image. On a coorinate system, the point where both x and y equal zero is called the origin.

CSS background-clip Property

Mon, 19 Feb 2018 13:49:07 GMT

The background-clip property specifys how far an elements background color or image should extend within an element. The values are border-box, padding-box, or content-box, as explained here with examples.

Set The Cursor Style

Wed, 13 Jul 2016 21:18:01 GMT

With CSS you can define the type of cursor that you want to display over different elements of your web page or during different processes performed by your program. You can also design your own cursor.

Set the box-sizing Property

Tue, 31 May 2016 14:31:31 GMT

When using box elements, e.g. div, to lay out a webpage or website template, it's important to understand how the dimensions of the box are defined. You would think the width and height of a box is the distance between the outer edges of the box's border. The W3C doesn't agree.

nth-child Selector

Tue, 12 Mar 2013 15:41:01 GMT

In order to apply a style to an html element on a webpage, you must first select the element. There are many ways to select an element on a webpage.In this article, I describe the CSS3 nth-child selector.

Set the Font Slant

Thu, 03 May 2012 15:13:22 GMT

Using the CSS skew transform you can set a font's slant angle.

How to Use a CSS ID Selector

Mon, 07 Nov 2011 22:09:39 GMT

A CSS id selector, which uses the pound sign, can be used to select one, and only one html element on a webpage (the element with its id attribute set to the same name as the name after the Id selector.

How to Define and Apply a Style Class

Wed, 26 Oct 2011 19:47:54 GMT

Defining a style class is similar to defining styles rules for any html element except that a style class has a name that you use to apply it to only specific incidences of elements. When defining a class in a style block or in a style sheet, put a dot (.) in front of the name.

Set a Fixed Background Image

Wed, 28 Sep 2011 17:59:34 GMT

Use the background-attachment property to set the background image to either move with the text or to remain fixed as the user scrolls. To set the background to remain stationary while the user scrolls the webpage, specify the background-attachment property with the value fixed.

Set the Background Properties

Wed, 28 Sep 2011 17:59:34 GMT

Use the background property as a shorthand method to set multiple background properties in one declaration. The properties must be in the order: color, image, position, repeat. This article is part of the online CSS Quick Reference.

Set the Background Color

Wed, 28 Sep 2011 17:59:34 GMT

Use the background-color property to set the background color for an element. You can define the color by using the color name, hexadecimal notation, or the rgb tripplet method.

Set a Background Image

Wed, 28 Sep 2011 17:59:34 GMT

Use the background-image property with the url method to set the background color for an element.

Set a Background Image's Position

Wed, 28 Sep 2011 17:59:34 GMT

Set a background image's Position in an html element using the background-image property to specify the image, the background-repeat property with the no-repeat value, and the background-position property to specify the position of the image.

Set the border-collapse

Wed, 28 Sep 2011 17:59:34 GMT

In a standard html table, each cell has a separate border. This causes the table cell borders to appear double. The style property border-collapse sets the cell borders to collapse into single borders.

Set the Border Color

Wed, 28 Sep 2011 17:59:34 GMT

Set the border color using the border-color property. You can define the color by using the color name, hexadecimal notation, or the rgb tripplet method. The method shown below sets the color of all four borders. You can also set a different color for each border. The order of the values is top, right, bottom, left.

Set the Border Properties

Wed, 28 Sep 2011 17:59:34 GMT

Use the border property as a shorthand method to set all three border properties in one declaration. You can set from one to three properties. The properties must be in the order: width, style, color.

Set the Border Style

Wed, 28 Sep 2011 17:59:34 GMT

Set the border style using the border-style property. Border style values may be none, solid, dashed, dotted, double, groove, ridge, inset, or outset. The method shown above sets the style of all four borders. You can also set a different border style for each border. The order of the values is top, right, bottom, left.

Set the Border Width

Wed, 28 Sep 2011 17:59:34 GMT

Use the border-width property to set the border width. The method shown below sets the border width for all four borders. You can set a different width for each border. The order of the values is top, right, bottom, left.

Set an Element's Clipping

Wed, 28 Sep 2011 17:59:34 GMT

Clipping defines the area of an element that will be visible. First set the position property of the element to absolute. If you have a fixed webpage lay out, this should work fine. But if your webpage elements need to follow normal "flow", you'll need to nest the clipped absolute positioned element inside another element with position set to relative.

Specifying Color

Wed, 28 Sep 2011 17:59:34 GMT

The value for the color property can be specified by one of four different methods, by color name, by using the rgb macro, or by using hexadecimal notation. Colors are created on a computer by mixing varying amounts of the basic colors red, green, and blue, referred to as "rgb" colors. You can specify the amount of each basic color.

Set an Element's Display Property

Wed, 28 Sep 2011 17:59:34 GMT

When you load a webpage into a browser, it flows the boxes onto the page. The normal flow is from left-to-right from top-to-bottom. This type of flow is called inline. But some html elements flow as a block. A box that flows as a block has an embedded line-return before and an embedded line-return after its box.

Use an Embedded Style Sheet

Wed, 28 Sep 2011 17:59:34 GMT

One of the biggest advantage of CSS is that you don't need to enter a style for every html tag on your webpage, you can define a style for all tags of a type or class in a style block embedded in the webpage.

Use an External Style Sheet

Wed, 28 Sep 2011 17:59:34 GMT

One of the biggest advantage of CSS is that you can define styles for your entire website, in one place, an external style sheet that you can link to every webpage. The syntax for an external style sheet is exactly the same as it is for an embedded style block, except you leave out the opening and closing style tags.

Style the First Letter

Wed, 28 Sep 2011 17:59:34 GMT

Use the :first-letter pseudo-element to define a special style for the first letter in a container element such as a paragraph.

Style the First Line

Wed, 28 Sep 2011 17:59:34 GMT

To make your text more inviting, you can set a special style for the first line of text in a paragraph. Use the first-line pseudo-element selector to style the first line in a paragraph.

Set an Element's Float

Wed, 28 Sep 2011 17:59:34 GMT

Today, most designers lay out a webpage by placing content inside boxes, and then laying out the boxes on the webpage. When you apply the float property to a box it is no longer in the normal flow of the webpage. It will shift to the right or left until it touches the edge of another floated box, or the side of the browser window.

Set the Font Properties

Wed, 28 Sep 2011 17:59:34 GMT

Use the font-family property to set the text font. Font family values you include arial, courier, times, and verdana.

Set the Font Size

Wed, 28 Sep 2011 17:59:34 GMT

Use the font-size property to set the text size. Units of measurement for the font-size value can be Absolute or Relative. Absolute units are related to printing. Don't rely on absolute units for webpages because their actual size depends upon the users screen size.

Set the Font Style

Wed, 28 Sep 2011 17:59:34 GMT

Use the font-style property to set the font style. Font style values may be normal, italic, or oblique. "Oblique" means the font is slanted.

Set the Font Variant

Wed, 28 Sep 2011 17:59:34 GMT

The font-variant property doesn't change the font face, and it doesn't change uppercase letters at all. The font-variant property is used to change all the lower case letters to uppercase letters in a smaller font size.

Set the Font Boldness

Wed, 28 Sep 2011 17:59:34 GMT

Use the CSS font-weight property to set boldness of text. Font weight can be set to normal, bold, or as a "thickness" value between 100 and 900. I find it easier to just place the the text to be set to bold within or html tags.

Use Inline Style

Wed, 28 Sep 2011 17:59:34 GMT

Inline style is when you place the style rules directly in an html tag, using the style attribute. If you define a style inline for a specific property of a specific html element, that inline rule over-rides any embedded or linked style rule for that specific property of that specific html element.

Set the Letter Spacing

Wed, 28 Sep 2011 17:59:34 GMT

You might set the letter spacing different than the default setting when you need the text to fill a predefined area, or when you want to add an attention-getting effect. You can increase or decrease the letter spacing. Use the CSS letter-spacing property to set the space between letters.

Set the Line Spacing

Wed, 28 Sep 2011 17:59:34 GMT

You might set the line spacing different than the default setting when you need the text to fill a predefined area. Use the line-height property to set the space between lines. You can increase or decrease the line spacing.

Use Image for List Item Bullets

Wed, 28 Sep 2011 17:59:34 GMT

The bullets that you can define for list items; disc, circle, or square, are pretty drab. Use the list-style-image property to specify use of a custom image as the bullets to use for list items.

Set List Bullets Position

Wed, 28 Sep 2011 17:59:34 GMT

Use the list-style-position property to set the position of the list's bullets. The default value, outside causes the list items text to be indented, so when text wraps it does not go below the bullet.

Set the Type of Bullet Used in List

Wed, 28 Sep 2011 17:59:34 GMT

The default bullet for html lists is a black dot. You can use the list-style-type property to specify a different type of bullet; circle, square, or none. The default number used in ordered lists is a decimal. You can use the list-style-type property to specify a different type of number for your ordered list; alpha or Roman numeral.

Set List Properties

Wed, 28 Sep 2011 17:59:34 GMT

Use thelist-style property as a shorthand method to set all three list properties in one declaration. The properties must be in the order: list-style-type, list-style-position, list-style-image. You can leave some of the values out, as long as the rest are in the specified order.

Set an Element's Margin

Wed, 28 Sep 2011 17:59:34 GMT

Margin is the space around the outside of an element that separates it from other webpage elements. Set the size of the margin using the margin property. The default margin is 0. Elements are right next to each other.

Set an Element's Overflow

Wed, 28 Sep 2011 17:59:34 GMT

The overflow setting specifies what should happen when an element's content when it's too large to fit inside the elements area. Set can be set to visible, hidden, auto, or scroll. The default is visible.

Set an Element's Padding

Wed, 28 Sep 2011 17:59:34 GMT

Padding is the space between the element's content and the element's border. Use the padding property to set an elements padding. Note that the order of values for the shortcut is not the standard left, top, right, bottom. Instead it's: top, right, bottom, left.

position:absolute

Wed, 28 Sep 2011 17:59:34 GMT

By default, a browser renders the webpage, by placing elements on the webpage from left-to-right and from top-to-bottom. The style rule position can be used to override this default behavior. When you specify an element's position:absolute you can use the left and top properties to take an element out of the normal flow and place it exactly where you want it on the webpage.

position:fixed

Wed, 28 Sep 2011 17:59:34 GMT

When a user srolls the browser window, the contents of the window move in the oposite direction of the scroll bar. The style rule position can be used to override this default behavior. When you specify an element's position:fixed it won't move when the user scrolls the window.

position:relative

Wed, 28 Sep 2011 17:59:34 GMT

By default, a browser renders the webpage, by placing elements on the webpage from left-to-right and from top-to-bottom. The style rule position can be used to override this default behavior. When you specify an element's "position:relative" you can use the left and top properties to offset the element from where it would be located in the normal flow.

Define CSS Rollover Effects

Wed, 28 Sep 2011 17:59:34 GMT

Use the :hover, :active, and :visited pseudo-classes to create CSS mouse rollover effects. Pseudo-classes are used to control properties of html elements that are not available in the document tree.

Context selectors

Wed, 28 Sep 2011 17:59:34 GMT

When creating a web page it is often required to put one tag within another. In order to use these tags correctly, use selectors, which work only in the certain context. For example, defining the style for tag B only when it is located in a paragraph P. The Contextual selector consists of simple selectors which are separated with space.

Set the Text Alignment

Wed, 28 Sep 2011 17:59:34 GMT

Use the text-align property to set the text alignment. You can define the text to be aligned center, left, or right.

Set the Text Color

Wed, 28 Sep 2011 17:59:34 GMT

Use the color property to set the text color.

Set the Text Decoration

Wed, 28 Sep 2011 17:59:34 GMT

The CSS text-decoration property allows you to set several aspects of text including underlining text, lining through text, and overlining text. In addition, by setting text-decoration to none, you can remove default text decoration, i.e. you can display links without an underline.

Highlight Text

Wed, 28 Sep 2011 17:59:34 GMT

You might want to highlight some text within a paragraph to give it special attention. To highlight text within a paragraph, place the text to be highlighted within a element, and set style properties of the span. This CSS quick reference article shows several ways to highlight text.

Indent the First Line of Text

Wed, 28 Sep 2011 17:59:34 GMT

Indenting the first line in a paragraph has become almost entirely obsolete in modern typography. However, there are situations in which you may still wish to indent the first line. Use the text-indent property to indent the first line in a paragraph.

Set Text Justification

Wed, 28 Sep 2011 17:59:34 GMT

Text justification means vertically lining up the first and/or last characters of every line in a paragraph or on a page. To set text justification, use the CSS text-align property with the value justify.

Set the Text Case

Wed, 28 Sep 2011 17:59:34 GMT

The text-transform property allows you to force the case of all letters within an html element to upper-case, lower-case, or the first letter of each word to upper-case.

CSS Units of Measurement

Wed, 28 Sep 2011 17:59:34 GMT

CSS provides a vaiety of measurement units including absolute, relative, and percentages. Unless you are primarily concerned with the printing of the web page, you should avoid using absolute units for webpages because they cannot be scaled to the users screen size.

Vertical Align an Element

Wed, 28 Sep 2011 17:59:34 GMT

Use the vertical-align property to set the vertical position of an element on a line. The vertical-align property is a bit difficult to understand. First you must understand the difference between block elements and inline elements.

Set an Element's Visibility

Wed, 28 Sep 2011 17:59:34 GMT

Use the visibility property to set whether an element is visible. To make an element invisible, set visibility: hidden;. To make an element visible (the default), set visibility: visible;.

Set the Word Spacing

Wed, 28 Sep 2011 17:59:34 GMT

Use the CSS word-spacing property to increase or decreases the space between words. You might set the word spacing different than the default setting when you need the text to fill a predefined area, or when you want to add an attention-getting effect. You can increase or decrease the word spacing.

Set an Element's Overlap (z-index)

Wed, 28 Sep 2011 17:59:34 GMT

By setting a z-index property, you can explicity define how you want elements to overlap. You can even set negative values of z-index, in other words a z-index or -1 places the element behind other elements that have a z-index of 0.