CSS

 

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

A CSS rule-set consists of a selector and a declaration block:

CSS selector: The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
selectorA CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces

A CSS comment starts with /* and ends with */. Comments can also span multiple lines:

There are three ways of inserting a style sheet:

  • External style sheet: Change an entire website by changing the style sheet!
  • Internal style sheet: Used to define style of a single page.
  • Inline style: Apply a unique style for a single element.

Inline Styles

An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

Border Style

The border-style property specifies what kind of border to display.
  • dotted - Defines a dotted border
  • dashed - Defines a dashed border
  • solid - Defines a solid border
  • double - Defines a double border
  • groove - Defines a 3D grooved border. The effect depends on the border-color value
  • ridge - Defines a 3D ridged border. The effect depends on the border-color value
  • inset - Defines a 3D inset border. The effect depends on the border-color value
  • outset - Defines a 3D outset border. The effect depends on the border-color value
  • none - Defines no border
  • hidden - Defines a hidden border

CSS Padding

The CSS padding properties define the white space between the element content and the element border. The padding clears an area around the content (inside the border) of an element.padding-top
padding-right
padding-bottom
padding-left
All the padding properties can have the following values:

length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the parent element

Position

Determines how the browser should position the selected element as follows:

Absolute - places the content using the coordinates entered in the Placement boxes relative to the nearest absolutely- or relatively-positioned ancestor, or, if no absolutely- or relatively-positioned ancestor exists, to the upper-left corner of the page.

Relative - places the content block using the coordinates entered in the Placement boxes relative to block’s position in the text flow of the document. For example, giving an element a relative position and top and left coordinates of 20px each will shift the element 20px to the right and 20px down from its normal position in the flow. Elements can also be positioned relatively, with or without top, left, right, or bottom coordinates, to establish a context for absolutely-positioned children.

Fixed - places the content using the coordinates entered in the Placement boxes, relative to the top left corner of the browser. The content will remain fixed in this position as the user scrolls the page.

Static - places the content at its location in the text flow. This is the default position of all positionable HTML elements.

Visibility

Determines the initial display condition of the content. If you do not specify a visibility property, by default the content inherits the parent tag’s value. The default visibility of the body tag is visible. Select one of the following visibility options:

Inherit - inherits the visibility property of the content’s parent.

Visible - displays the content, regardless of the parent’s value.

Hidden hides the content, regardless of the parent’s value.

Z-Index

Determines the stacking order of the content. Elements with a higher z-index appear above elements with a lower z-index (or none at all). Values can be positive or negative. (If your content is absolutely positioned, it’s easier to change the stacking order using the AP Elements panel).

Overflow

Determines what happens if the contents of a container (for example, a DIV or a P) exceed its size. These properties control the expansion as follows:

Visible increases the container’s size so that all of its contents are visible. The container expands down and to the right.

Hidden maintains the container’s size and clips any content that doesn’t fit. No scroll bars are provided.

Scroll adds scroll bars to the container regardless of whether the contents exceed the container’s size. Specifically providing scroll bars avoids confusion caused by the appearance and disappearance of scroll bars in a dynamic environment. This option is not displayed in the Document window.

Auto makes scroll bars appear only when the container’s contents exceed its boundaries. This option is not displayed in the Document window.

 

Placement

Specifies the location and size of the content block. How the browser interprets the location depends on the setting for Type. Size values are overridden if the content of the content block exceeds the specified size.

The default units for location and size are pixels. You can also specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), (ems), (exs), or % (percentage of the parent’s value). The abbreviations must follow the value without a space: for example, 3mm.

 

Clip

Defines the part of the content that is visible. If you specify a clipping region, you can access it with a scripting language such as JavaScript and manipulate the properties to create special effects such as wipes. These wipes can be set up by using the Change Property behavior.

When you are finished setting these options, select another CSS category on the left side of the panel to set additional style properties, or click OK.