CSS özellikleri dizini – kolay kod örnekleriyle 70+ özellik
Aradığınız şey değil mi? Belki de sadece CSS Nedir veya CSS Sözde Sınıflar, Öğeler ve Kurallar Dizinimiz hakkındaki açıklayıcımızı arıyordunuz .
Şu anda evden çalışıyor ve devam etmenizi sağlayacak ilhama, ipuçlarına ve kolay okumalara mı ihtiyacınız var? – Neden harika içeriklerle dolu blogğumuza göz atmıyorsunuz ?
Source: https://developer.mozilla.org/en-US/docs/Web/CSS
The background property can be used to set all possible background properties in one single declaration. Each of the 5 background properties must be stated in order but individual properties may be omitted if not required. Order: 1) background-color, 2) background-image, 3) background-repeat, 4) background-attachment, 5) background-position.
EXAMPLE CSS:
p.image { background: url(“images/twps-icon.png”); no-repeat top right;}
Note: Only properties 2), 3), and 5) have been applied in the example above.
background-attachment
background-attachment dictates whether a background images should stay in a fixed position or move up and down and the user scrolls the page up and down.
EXAMPLE CSS:
body { background-image: url(“images/twps-icon.png”); background-attachment: fixed;}
Possible values (2): fixed; background image is fixed and stays in same position in browser window, scroll; background image moves with page as user scrolls up and down.
background-color
background-color specifies the colour of a background for a given HTML element.
EXAMPLE CSS:
h2 { background-color: #efefef;}
h4 { background-color: blue;}
Possible values: background-color is specified using either RGB values, hexadecimal codes, or default colour names.
background-image
background-image specifies an image which is to be placed behind a given HTML element. The background-image property must include a url value to specify the file path to the image.
EXAMPLE CSS:
body { background-image: url(“images/twps-icon.png”); background-attachment: scroll;}
background-image (gradients) [new to CSS3]
With CSS3, gradients can now be applied to backgrounds on HTML elements. This is achieved using the background-image property but since support is varied, different browsers will require different code to produce the same result. It is worth including an alternative image for the background, as a fall-back option in case the users browser does not support gradients.
EXAMPLE CSS:
#element-with-gradient {
/* fallback colour */
background-color: #0066CC;
/* fallback image */
background-image: url(“images/bluegradient-fallback.png”);
/* code for Opera 11.1+ */
background-image: -o-linear-gradient(#0066CC, #6699CC);
/* code for Safari 4+ & Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100% from(#0066CC), to(#6699CC);
/* code for Safari 5.1+ & Chrome 10+ */
background-image: -webkit-linear-gradient(#0066CC, #6699CC);
/* code for Firefox 3.6+ */
background-image: -moz-linear-gradient(#0066CC, #6699CC);
height: 100%; width: 100%;}
background-position
background-position is used to specify exactly where in the browser window the background image should appear. background position can take a number of values, usually in the form of a value pair, specifying the horizontal and vertical position of the image from the top left of the browser window.
EXAMPLE CSS:
body { background-image: url(“images/twps-icon.png”); background-repeat: no-repeat; background-position: center center;}
Possible values: left top, left center, left bottom, center top, center center, center bottom, right top, right center, right bottom, any value pair expressed in pixels (px px), and value pair expressed in percentages (% %).
background-repeat
background-repeat is used to specify how a background image will be repeated.
EXAMPLE CSS:
div { background-image: url(“images/horiz-pattern.png”); background-repeat: repeat-x;}
Possible values: repeat; the image is repeated in both x and y axes (default behaviour if background-repeat is omitted), repeat-x; image is repeated in the x-axis, repeat-y; image is repeated in the y-axis, no-repeat; image is not repeated beyond the first instance.
Index Of CSS Properties - BORDER PROPERTIES
border
The border property can be used to set all possible border properties in one single declaration. Each of the 3 border properties must be stated in order but individual properties may be omitted if not required. Order: 1) border-width, 2) border-style, and 3) border-color.
EXAMPLE CSS:
div { border:solid #006600;}
p {border: 2px dashed #CC0033;}
Notes: The first example applies only properties 2) and 3), while the second applies all 3 border properties.
border-bottom-color
border-bottom-color specifies the colour applied to only the bottom edge of a border.
EXAMPLE CSS:
div { border-bottom-color: #006600;}
border-bottom-style
border-bottom-style specifies the line style applied to only the bottom edge of a border.
EXAMPLE CSS:
div { border-bottom-style: solid;}
Possible values: none; no border is shown, hidden; no border is shown (until activated), dotted; a dotted line type is shown (a border 1px wide will be made up of 1px by 1px square dots), dashed; line type is dashed, solid; a single solid line is shown, double; two parallel solid lines are shown around the border (border-width property specifies the width occupied by the two lines), groove; line appears as if carved or indented into web page, ridge; line appears as if proud or on top of web page, inset; line appears as if embedded into web page, outset; line appears as if coming out of web page, inherit; line type inherited from parent element.
border-collapse
border-collapse tries to collapse all borders between the cells of a table, into single/shared borders, and remove any whitespace between. By default, if border-collapse is used, then any value given to border-spacing is ignored and cells are pushed together where possible.
EXAMPLE CSS:
td { background-color: grey; border: 3px solid black;}
table.a { border-spacing: 10px 10px;}
table.b { border-collapse: collapse;}
border-color
border-color is used to specify the colours of all four border edges (where an all-round border is used). By convention, the four edges are specified in clockwise order; top, right, bottom, left.
EXAMPLE CSS:
h1 { border-color: blue green yellow red;}
Possible values: Any possible colour in either RGB values, hexadecimal codes, or default colour names. HSL values may also be used, where CSS3 is supported by the users browser.
border-image [new to CSS3]
border-image is used to specify all of the border-image properties in a single declaration. There are 5 properties: 1) border-image-source, 2) border-image-slice, 3) border-image-width, 4) border-image-outset, and 5) border-image-repeat. Since support for the border-image property is not consistent, some browsers require additional code to produce the same end result.
EXAMPLE CSS:
div.1 {
-moz-border-image: url(“images/border1.gif”) 5 5 2 0 round;
-webkit-border-image: url(“images/border1.gif”) 5 5 2 0 round;
border-image: url(“images/border1.gif”) 5 5 2 0 round;}
Notes: See individual border-image properties for each possible value set. Internet Explorer does not currently support the border-image property.
border-left-color
border-left-color specifies the colour of the left border edge only.
EXAMPLE CSS:
h2 { border-left-color: red;}
Possible values: Any possible colour in either RGB values, hexadecimal codes, or default colour names. HSL values may also be used, where CSS3 is supported by the users browser.
border-left-style
border-left-style specifies the line style of the left edge of a border only.
EXAMPLE CSS:
p { border-left-style: dotted;}
Possible values: none; no border is shown, hidden; no border is shown (until activated), dotted; a dotted line type is shown (a border 1px wide will be made up of 1px by 1px square dots), dashed; line type is dashed, solid; a single solid line is shown, double; two parallel solid lines are shown around the border (border-width property specifies the width occupied by the two lines), groove; line appears as if carved or indented into web page, ridge; line appears as if proud or on top of web page, inset; line appears as if embedded into web page, outset; line appears as if coming out of web page, inherit; line type inherited from parent element.
border-radius [new to CSS3]
border-radius allows the corners of a border to be rounded, and specifies the radius of curvature for each corner. Each corner is referenced in clockwise order: top, right, bottom, left. Since support for the border-radius property is not consistent, some browsers require additional code to produce the same end result.
EXAMPLE CSS:
p { border: 5px dotted black; padding 15px; width:200px; height:200px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;}
border-right-color
border-right-color specifies the colour of the right border edge only.
EXAMPLE CSS:
h3 { border-right-color: blue;}
Possible values: Any possible colour in either RGB values, hexadecimal codes, or default colour names. HSL values may also be used, where CSS3 is supported by the users browser.
border-right-style
border-right-style specifies the line style of the right edge of a border only.
EXAMPLE CSS:
p { border-right-style: double;}
Possible values: none; no border is shown, hidden; no border is shown (until activated), dotted; a dotted line type is shown (a border 1px wide will be made up of 1px by 1px square dots), dashed; line type is dashed, solid; a single solid line is shown, double; two parallel solid lines are shown around the border (border-width property specifies the width occupied by the two lines), groove; line appears as if carved or indented into web page, ridge; line appears as if proud or on top of web page, inset; line appears as if embedded into web page, outset; line appears as if coming out of web page, inherit; line type inherited from parent element.
border-spacing
border-spacing is used to specify the spacing between borders of adjacent table cells. Most browsers will leave a set amount of space between each table cell; the border-spacing property allows you to adjust and specify this.
EXAMPLE CSS:
td { background-color: grey; border: 3px solid black;}
table.a { border-spacing: 10px 10px;}
Note: The border-spacing can be specified in single values (for an all-round spacing), or as a value pair (correlating to horizontal and vertical spacing respectively).
border-style
border-style is used to specify the line style used on all four edges of a border (when an all-round border is to be applied).
EXAMPLE CSS:
p { border-style: solid;}
Possible values: none; no border is shown, hidden; no border is shown (until activated), dotted; a dotted line type is shown (a border 1px wide will be made up of 1px by 1px square dots), dashed; line type is dashed, solid; a single solid line is shown, double; two parallel solid lines are shown around the border (border-width property specifies the width occupied by the two lines), groove; line appears as if carved or indented into web page, ridge; line appears as if proud or on top of web page, inset; line appears as if embedded into web page, outset; line appears as if coming out of web page, inherit; line type inherited from parent element.
border-top-color
border-top-color specifies the colour of the top border edge only.
EXAMPLE CSS:
h4 { border-top-color: yellow;}
Possible values: Any possible colour in either RGB values, hexadecimal codes, or default colour names. HSL values may also be used, where CSS3 is supported by the users browser.
border-top-style
border-top-style specifies the line style of the top edge of a border only.
EXAMPLE CSS:
ul { border-top-style: double;}
Possible values: none; no border is shown, hidden; no border is shown (until activated), dotted; a dotted line type is shown (a border 1px wide will be made up of 1px by 1px square dots), dashed; line type is dashed, solid; a single solid line is shown, double; two parallel solid lines are shown around the border (border-width property specifies the width occupied by the two lines), groove; line appears as if carved or indented into web page, ridge; line appears as if proud or on top of web page, inset; line appears as if embedded into web page, outset; line appears as if coming out of web page, inherit; line type inherited from parent element.
box-shadow [new to CSS3]
box-shadow specifies a drop shadow around a box element, similar to that produced on text elements by the text-shadow property. Since support for the box-shadow property is not consistent, some browsers require additional code to produce the same end result.
EXAMPLE CSS:
div.a {
-moz-box-shadow: -6px -6px 3px #efefef;
-webkit-box-shadow: -6px -6px 3px #efefef;
box-shadow: -6px -6px 3px #efefef;}
div.b {
-moz-box-shadow: 3px 3px 5px grey;
-webkit-box-shadow: 3px 3px 5px grey;
box-shadow: 3px 3px 5px grey;}
div.c {
-moz-box-shadow: 10px 10px 2px #006600 inset;
-webkit-box-shadow: 10px 10px 2px #006600 inset;
box-shadow: 10px 10px 2px #006600 inset;}
Notes: The property can include the following 6 values (the first two of which are required): horizontal offset; specified in pixels with negative values placing the shadow to the left of the box element, vertical offset; specified in pixels with negative values placing the shadow to the top of the box element, blur distance; the distance in pixels that the shadow extends (if omitted, shadow appears as a solid line like a border), spread of shadow; a positive value results in shadow spreading outwards in all directions (negative value will achieve converse), colour; as specified using either RGB values, hexadecimal codes, or default colour names (HSL values may also be used where supported), and inset; will change the shadow to an inner shadow if used.
Index Of CSS Properties - POSITIONING PROPERTIES
bottom
The bottom property specifies the position of the bottom edge of an element, depending on whether it has been positioned relatively or absolutely. For an absolutely positioned element, the bottom edge is set at a specified distance above or below the bottom edge of its parent element. For a relatively positioned element, the bottom edge is set at a specified distance above or below its normal position. The bottom property is overridden and takes no effect if the position of an element has been set to position: static.
EXAMPLE CSS:
img { position: absolute; bottom: 5px; }
Note: In the above example, the bottom edge of the <img> element has been set 5px above the bottom edge of its parent element. A negative value would position the bottom edge of the <img> element below the bottom edge of the parent element.
clear
The clear property can be used to specify that (within the same containing element) no other element can touch the left or right edges of a given element (box). This is a useful tool in the battle ensure your content appears in the order and layout you intend for it.
EXAMPLE CSS:
body { width: 960px; color: white; }
div1,div2,div3 { width:200px; float: left; margin: 10px; padding: 20px; background-color: grey;}
div3.clear { clear: both;}
Possible values: left; only the left-hand edge of an element should not touch any other elements in the same containing (parent) element, right; only the right-hand edge of an element should not touch any other elements in the same containing (parent) element, both; both left and right-hand edges of an element should not touch any other elements in the same container element, none; other elements can touch either edge of the element concerned.
display
display specifies how a given HTML element should be displayed and treated, relative to other elements around it.
EXAMPLE CSS:
p.inline { display:inline;}
Note: The above example changes a specific paragraph <p> element from being a block-level element (default) to an inline element.
Possible values: inline; causes a block-level element to behave like an inline element, block; causes an inline element to behave like a block-level element, inline-block; causes a block-level element to orientate (flow) as an inline element but keep other characteristics of a typical block-level element, none; the element and its contents are not displayed in the web browser (a user can still view the content of the element if they invoke the View Source browser feature though), inherit; (where supported) the value of the display property is inherited from the parent element. Additional values are available, but I have just listed the most frequently used.
float
Elements can be “floated” to take them out of their normal flow/positioning constraints, and instead positioned to the far left or far right of their containing element (box). The float property specifies whether an element should be floated to the left or right. The width property should also be used in conjunction with float, to ensure elements don’t take up the full width of their containing element. Any other elements and containers in the same containing element will simply flow around the floated element.
EXAMPLE CSS:
div.left { width: 200px; padding: 15px 10px; margin: 0 0; float: left; border: none;}
Possible values: left; element is floated to far left of its containing element, right; element is floated to far right of its containing element, none; element is not floated, inherit; (where supported) specifies that the value of the float property should be inherited from the parent element.
float (images)
The float property can also be applied to <img> elements as a simply an effective means of aligning images on a page.
EXAMPLE CSS:
img.right-align { width: 200px; float: right; padding: 15px 10px; margin-left: 10px; border: none;}
Possible values: left; element is floated to far left of its containing element, right; element is floated to far right of its containing element, none; element is not floated, inherit; (where supported) specifies that the value of the float property should be inherited from the parent element.
left
left is used in conjunction with the position: relative property to specify how far the left edge of an element is to be moved, relative to where it would have otherwise been placed in normal flow.
EXAMPLE CSS:
img.shift-left { position: relative; top: 0px; left: 60px;}
Possible values: any length value specified in pixels (px), ems (em), centimeters (cm), or as a percentage (%), (negative values are allowed). auto; (default) the browser calculates the distance to be applied. A value of inherit may also be used (where supported) to specify that the left property of the element should be inherited from the parent element.
right
right is used in conjunction with the position: relative property to specify how far the right edge of an element is to be moved, relative to where it would have otherwise been placed in normal flow.
EXAMPLE CSS:
img.shift-right { position: relative; top: 0px; right: 30px;}
Possible values: any length value specified in pixels (px), ems (em), centimeters (cm), or as a percentage (%), (negative values are allowed). auto; (default) the browser calculates the distance to be applied. A value of inherit may also be used (where supported) to specify that the right property of the element should be inherited from the parent element.
position
position is used to specify the position and behaviour of a given element, relative to the browser window and rest of the web page. position can be used to fix an element in a specific position in the browser, or allow it to scroll with the rest of the web page.
EXAMPLE CSS:
img { position: relative; top: 50px; left: 50px;}
Possible values: position: static; (default) each element is positioned and behaves as it would in normal flow (each block-level element sits on top of the next etc.), position: relative; the element is moved relative to where it would have been in normal flow (the offset values of top, bottom, left or right can all be used to specify how far the element has been moved in each axis, relative to where it would have been), position: absolute; the element is removed from normal flow and no longer affects positioning of other elements, the element is positioned relative to its containing element using the offset values (top, bottom, left or right etc.), position: fixed; the element is positioned relative to the browser window (not any other elements or normal flow), as a user scrolls down the webpage, the element remains fixed in the same position in the window.
top
top is used in conjunction with the position: relative property to specify how far the top edge of an element is to be moved, relative to where it would have otherwise been placed in normal flow. (Positive values shift the element down the page from where it would otherwise have been placed).
EXAMPLE CSS:
img.shift-top { position: relative; top: 10px; left: 50px;}
Possible values: any length value specified in pixels (px), ems (em), centimeters (cm), or as a percentage (%), (negative values are allowed). auto; (default) the browser calculates the distance to be applied. A value of inherit may also be used (where supported) to specify that the left property of the element should be inherited from the parent element.
vertical-align
vertical-align is used to vertically align inline elements such as <img>. It is not intended for vertically aligning text within block-level elements such as <p>, though it might be forced to achieve this effect. vertical-align is intended for use on inline or inline-block elements, and affects the alignment of the element not its contents (unless applied to table cells). When applied to table cells, vertical-align affects the contents of a cell, not the cell itself.
EXAMPLE CSS:
#baseline {vertical-align: baseline;}
#topline { vertical-align: text-top;}
#bottom {vertical-align: text-bottom;}
Possible values: baseline; the baseline of the element is aligned with that of its parent element, sub; the element is aligned as if it is a subscript, super; the element is aligned as if it is a superscript, top; the top of the element is aligned with the top of the highest neighbouring inline element, text-top; the element is aligned with the top of the parent elements font, middle; the element is aligned with the middle of a hypothetical lowercase ‘x’ character (the “x-height”) , bottom; the bottom of the element is aligned with the lowest neighbouring inline element, text-bottom; the element is aligned with the bottom of the parent elements font, length; any length value expressed in pixels, ems or percentage (%) of line height. A value of inherit may also be used (where supported) to specify that the value of the padding-top property of the element should be inherited from the parent element.
cursor
The cursor property specifies the symbol type that should be displayed at the users cursor.
EXAMPLE CSS:
a { cursor: default;}
a.move {cursor: move;}
Possible values: auto; the browser is left to determine the cursor, crosshair; cursor appears as crosshairs, default; cursor takes default cursor of user, pointer; cursor appears as a pointer, move; cursor appears as a move/pan symbol, text; cursor indicates a text field, wait; cursor indicates a process is running (might typically be an egg-timer), help; cursor indicates help is available, url(“images/custom-cursor.gif”); cursor displays a URL (typically when hovering over a link to that same URL), progress; cursor indicates a process is running (might typically be an egg-timer), inherit; (where supported) the cursor is inherited from the parent element. Additional values are available, but I have just listed the most frequently used.
visibility
visibility is used to hide or reveal elements. In this case, a space will always be shown to indicate where an element should be regardless of whether or not it is visible.
EXAMPLE CSS:
footer li { display: inline; margin: 10px 10px 10px 5px;}
footer li.hidden {visibility: hidden;}
Possible values: hidden; the element is hidden from view (a space remains where the element should be), visible; the element is visible to the user (default behaviour if the visibility property is not used).
z-index
z-index is used to specify the order in which overlapping elements are placed. Elements tend to overlap if they are given a property of either position: relative, position: fixed, or position: absolute. Overlapping elements can be ‘sent to the back’ or ‘brought forward’ using the z-index property. By default, where two elements share the same position and overlap, the element which appears later in the HTML code will sit atop any other element earlier in the code. This default order is changed, using the z-index. z-index might sometimes be referred to as the ‘stacking context’.
EXAMPLE CSS:
h1 { position: fixed; top: 10px; left: 10px; margin: 0px; padding: 0px; width: 100%; background-color: #efefef; z-index: 10;}
p { position: relative; top: 100px; left: 50px;}
Possible values: any numerical value (e.g. -1, 10, 15 etc.), auto; value is set equal to that of the parent element (default), inherit may also be used (where supported) to specify that the z-index of the element should be inherited from the parent element.
Index Of CSS Properties - TEXT PROPERTIES
color
color specifies the colour of the text in an element.
EXAMPLE CSS:
p { font-family: Arial, Veranda, sans-serif; color: #0000FF;}
Possible values: Any possible colour in either RGB values, hexadecimal codes, or default colour names. HSL values may also be used, where CSS3 is supported by the users browser. A value of inherit may also be used (where supported) to specify that the colour of the text should be inherited from the parent element.
empty-cells
empty-cells is used to specify how the borders of empty table cells should be displayed. Since different browsers will treat empty table cells in different ways by default, a declaration should be made if you want the borders to be specifically shown or hidden.
EXAMPLE CSS:
td { border: 2px solid blue; padding: 5px;}
table { empty-cells: show;}
Possible values: show; borders are shown on any empty cells, hide; borders are not shown on any empty cells, inherit; the empty-cells value is inherited from the containing/parent table (requires a table to be nested within another table).
@font-face [CSS Rule]
@font-face is used to specify and include a font which might not be installed on a user’s computer. Typically, a declaration will be made for the font-family name of the font to be used, along with an src file path to tell the users browser where to find the font. The users browser will then download and use a local copy of the specified font. Once the @font-face property has been used to load a specific font, follow on CSS rules can refer to the same font, using just the font-family property.
EXAMPLE CSS:
@font-face { font-family: ‘TWPScustom’; src: url(‘fonts/TWPScustom.eot’);}
p.custom-font { font-family: TWPScustom, Georgia, serif;}
Possible attributes: font-family; specifies the name of the font to be used, src; specifies the file path to locate the font file (often multiple file paths and font files need to be specified to gain consistent results across the different browsers), format; specifies the format that a font is provided in (eot, woff, ttf/otf, svg etc.).
font-family
font-family specifies the typeface to be used for the text contents of a given element. The users browser must have the specified typeface already installed to be able to display that font correctly, if not then the @font-face rule is an option which should be applied first.
EXAMPLE CSS:
p { font-family: Georgia, Times, serif;}
Notes: In the above example, Georgia is the preferred font type, if the browser does not carry that font then Times will be used, failing that, any of the serif generic family of fonts will be used.
Possible values: Any supported font-family. A value of inherit may also be used (where supported) to specify that the font-family of the element should be inherited from the parent element.
font-size
font-size is used to specify the size of a font used for a given element. Font sizes are typically expressed in either pixels (px), percentages (%), or ems (a single em is equivalent to the width of the character ‘m’).
EXAMPLE CSS:
p { font-family: Georgia, Times, serif;}
h1 { font-family: Arial, Helvetica, sans-serif; font-size: 20px;}
h2 { font-family: Arial, Helvetica, sans-serif; font-size: 16px;}
h3 { font-family: Arial, Helvetica, sans-serif; font-size: 12px;}
Possible values: any value expressed in pixels (px), as a percentage (%), or in ems (em). A value of inherit may also be used (where supported) to specify that the font-size of the element should be inherited from the parent element.
font-style
font-style specifies the styling to be applied to the text of a given element.
EXAMPLE CSS:
h1.oblique { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-style: oblique;}
p.footer { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: italic;}
Possible values: normal; no additional styling is applied to the base font, italic; the font is styled to appear italic, oblique; the font is styled to appear oblique (equivalent to a normal font face placed on an angle), inherit; (where supported) specifies that the value of the font-style property should be inherited from the parent element.
letter-spacing
letter-spacing is used to specify the spacing between letters in a piece of text. This might be useful to increase the readability of some fonts and at certain sizes etc. The spacing should be stated in ems, and is added to the default spacing normally attributed to the font.
EXAMPLE CSS:
h1 { font-size: 16px; text-style: bold; letter-spacing: 0.4em;}
Possible values: any spacing specified in ems (e.g. 0.2em or 1em).
line-height
line-height specifies the overall line height you intend for an element of text. The total line height is equal to the sum of the font-size and the space between the top of one line of text and the bottom of the line above. Therefore, if you wish to increase the gap between consecutive lines of text but not the font-size itself; the line-height property should be used.
EXAMPLE CSS:
p.tall-lines { line-height: 2.0em;}
Possible values: any line height expressed in ems.
text-align
text-align is used to control and specify the alignment of a text element.
EXAMPLE CSS:
h1 { text-align: left;}
p { text-align: justify;}
p.align-right {text-align: right;}
Possible values: left; text is aligned to the left of its container, right; text is aligned to the right of its container, center; text is centered within its container, justify; text is justified so that every line of text (except the last) is adjusted to take up the full width of its container.
text-decoration
text-decoration is used to specify decoration to be added to a given text element.
EXAMPLE CSS:
p.strike { text-decoration: line-through;}
p.footer { text-decoration: underline;}
Possible values: none; any existing text decoration is removed, underline; a line is placed under the text, overline; a line is placed above the text, line-through; a line is ruled through the center of the text, blink; text is made to flash on and off.
text-indent
text-indent is used to specify the indent applied to the first line of text in an element.
EXAMPLE CSS:
p.indent30 { text-indent: 30px;}
p.indent10 {text-indent: 10px;}
Possible values: any length value specified in pixels (px), ems (em), centimeters (cm), or as a percentage (%). auto; (default) the browser calculates the distance to be applied. A value of inherit may also be used (where supported), to specify that the value of the text-indent property should be inherited from the parent element.
text-shadow [new to CSS3]
text-shadow is used to specify and produce a drop shadow behind a piece of text. A drop shadow is an offset and darker version of a word which lies just behind the original. text-shadow can also be used to create an embossed effect by adding a shadow which is lighter, rather than darker than the original text.
EXAMPLE CSS:
p.shadow1 { color: #666666; text-shadow: 2px 2px 1px #000000;}
p.shadow2 { color: #FFFFFF; text-shadow: -1px -1px #666666;}
Possible values: text-shadow is specified using four values; the first indicates how far left or right the shadow should fall (in pixels), the second indicates how far above or below the shadow should fall (in pixels), the third (optional) indicated the amount of blur to be applied to the shadow, the fourth specifies the colour of the shadow (in any of the usual formats; RGB, Hexadecimal, standard colour names etc.).
text-transform
text-transform is used to alter the case of the text.
EXAMPLE CSS:
h1.upper { text-transform: uppercase;}
h1.lower { text-transform: lowercase;}
h1.caps { text-transform: capitalize:}
Possible values: uppercase; text appears in uppercase format, lowercase; text appears in lowercase format, capitalize; the first letter of each word is capitalised.
word-spacing
word-spacing is used to specify the spacing between words in a piece of text. This might be useful to increase the readability of some fonts and at certain sizes etc. The spacing should be stated in ems, and is added to the default spacing normally attributed to the font (typically about 0.25em).
EXAMPLE CSS:
p.spaced { font-size: 12px; text-style: bold; word-spacing: 1.2em;}
Possible values: any spacing specified in ems (e.g. 0.2em or 1em).
Index Of CSS Properties - DIMENSIONAL PROPERTIES
height (images)
height can be used on many different HTML elements, but is particularly useful in specifying the height of an image. Controlling the size of images using CSS is very easy using both the width and height properties, and particularly useful since it lets a browser know how much space to leave for a given <image> element while the page loads (images typically take longer to download than other content). CSS classes can be used to quickly and easily set standard sizes for images across a website.
EXAMPLE CSS:
img.small { width:150px; height: 150px;}
img.medium { width:250px; height: 250px;}
img.large { width:400px; height: 400px;}
img.full-width { width:100%; height: auto;}
Possible values: any value expressed in pixels (px), as a percentage (%), or in ems (em), auto; the browser is left to determine the height (in relation to width if specified). A value of inherit may also be used (where supported) to specify that the height of the element should be inherited from the parent element.
width (images)
width can be used on many different HTML elements, but is particularly useful in specifying the width of an image. Controlling the size of images using CSS is very easy using both the width and height properties, and particularly useful since it lets a browser know how much space to leave for a given <image> element while the page loads (images typically take longer to download than other content). CSS classes can be used to quickly and easily set standard sizes for images across a website.
EXAMPLE CSS:
img.small { width:150px; height: 150px;}
img.medium { width:250px; height: 250px;}
img.large { width:400px; height: 400px;}
img.full-width { width:100%; height: auto;}
Possible values: any value expressed in pixels (px), as a percentage (%), or in ems (em), auto; the browser is left to determine the width (in relation to height if specified). A value of inherit may also be used (where supported) to specify that the width of the element should be inherited from the parent element.
width (floating elements)
width can be used on many different HTML elements, but is particularly useful in specifying the width of floated elements. Controlling the size of floated elements using CSS is very easy using both the width and height properties, and particularly useful to ensure that floated items have enough space to arrange and fit on a web page in the positions and orientation intended. For example, a web designer may wish to include 3 distinct paragraphs in a row across a single page. This can be achieved by floating each <p> element, but specifying the width of each ensures that the elements fit together and will fit properly within the containing element.
EXAMPLE CSS:
body { width:800px; padding: 0px;}
p { float: left; width:250px; height: 250px; margin: 15px 10px;}
p.middle { float: left; width:250px; height: 250px; margin: 15px 15px;}
Possible values: any value expressed in pixels (px), as a percentage (%), or in ems (em), auto; the browser is left to determine the width (in relation to height if specified). A value of inherit may also be used (where supported) to specify that the width of the element should be inherited from the parent element.
width (tables)
width can be used on many different HTML elements, but is particularly useful in specifying the width of a table element. Controlling the size of a table will help ensure it fits within its containing element and that all table cells inside fit also.
EXAMPLE CSS:
body { width:800px; padding: 0px;}
table { width:600px; margin: 15px 100px;}
Possible values: any value expressed in pixels (px), as a percentage (%), or in ems (em), auto; the browser is left to determine the width (in relation to height if specified). A value of inherit may also be used (where supported) to specify that the width of the element should be inherited from the parent element.
Index Of CSS Properties - COLOUR PROPERTIES
hsl / hsla [colour value, new to CSS3]
hsl and hsla (hsl ‘alpha’) are two new methods for specifying colours, as introduced in CSS3. hsl stands for “Hue, Saturation, and Lightness”, and a typical hsl value is expressed with reference to those three components. Where supported, hsl/hsla values may be used to specify a colour, though since browser support is currently not consistent; a fall-back option would also be included in either of the usual formats (RGB, Hexadecimal, or standard colour name). The addition of the ‘a’ (alpha) value to complete the hsla value accounts for the level of transparency applied to the colour.
EXAMPLE CSS:
p { background-color: #00F; background-color: hsl(240, 100%, 50%);}
p.mod-a { background-color: #00F; background-color: hsl(240, 100%, 50%, 0.5);}
Values: hue; (first value) expressed as an angle (0-360), saturation; (second value) expressed as a percentage (%), lightness; (third value) expressed as a percentage (0% = white, 50% = normal, 100% = black), alpha; (optional) transparency expressed as a number between 0 and 1.0 (0.25 = 25% transparency, 100 = 100% transparency etc.).
Notes: hsl/hsla values are not supported by Internet Explorer 8 or below, or Opera 9 or below.
rgba [new to CSS3]
rgba is used to specify an RGB colour, but with the addition of the alpha ‘a’ value which specifies the opacity of the colour. Since support for CSS3 is not yet consistent, it is worth also including a colour declaration using one of the usual colour formats (RGB, Hexadecimal, or standard colour names).
EXAMPLE CSS:
p { background-color: rgb(0,0,0); background-color: rgb(0,0,0,0.6);
Possible values: Any RGB value, expressed in the format rgb(X,X,X,_) where the forth value specifies the opacity. Opacity is specified as a value between 0.0 and 1.0, where 0.5 corresponds to 50% opacity, and 0.75 is 75% opacity.
opacity [new to CSS3]
opacity specifies the opacity of a given element. By default, this value of opacity is also inherited by any elements contained by that element (child elements).
EXAMPLE CSS:
p.low-opacity { background-color: blue; opacity: 0.2;}
p.high-opacity { background-color: blue; opacity: 0.9;}
Possible values: Opacity is specified as a value between 0.0 and 1.0, where 0.2 corresponds to 20% opacity, and 0.9 is 90% opacity.
Index Of CSS Properties - LIST PROPERTIES
list-style
list-style is used to declare all the list-style properties in one single declaration. The three properties which can be specified are the marker style, marker image, and marker position; all of which can be expressed in any order (and any may be omitted).
EXAMPLE CSS:
ul { list-style: inside square;}
ul.custom-bullet { list-style: url(“images/custom-bullet.png”) inside;}
Possible values: See the individual entries for list-style-image, list-style-position, and list-style-type.
list-style-image
list-style-image is used to specify and include an image file in the place of a bullet point.
EXAMPLE CSS:
ul { list-style-image: url(“images/custom-bullet.png”);}
li { margin: 10px 0px;}
Possible values: The value assigned is simply the url to the image to be inserted.
list-style-position
list-style-position is used to specify where the list markers (“bullet points”) should appear relative to the boxes containing the text they relate to.
EXAMPLE CSS:
ul {width:300px; }
ul.outside-bullets { list-style-position: outside;}
ul.inside-bullets { list-style-position: inside;}
li { margin: 15px 15px;}
Possible values: outside; the marker is placed outside of and to the left of the box containing the text, inside; the marker is placed inside of the box containing the text to which it relates, and any text running onto additional lines wraps and flows around the marker.
list-style-type
list-style-type is used to specify the shape/type of the list markers (“bullet points”). A number of pre-defined and default marker types exist and are common to all browsers. The list-style-type property can be applied to <ol>, <ul> and <li> elements.
EXAMPLE CSS:
ol { list-style-type: upper-alpa;}
ul { list-style-type: disc;}
ul.circle { list-style-type: circle;}
Possible values: For Unordered Lists <ul>; none; no marker is shown, disk; a solid disk (typical bullet point) is shown, circle; an empty circle is shown, square; a square marker is shown. For Ordered Lists <ol>; decimal; decimal numbers (1, 2, 3 etc.), decimal-leading-zero; decimal numbers but with a leading zero (01, 02, 03 etc.), lower-alpha; lowercase alphabet (a, b, c, d etc.), upper-alpha; uppercase alphabet (A, B, C, D etc.), lower-roman; lowercase roman numerals (I, ii, iii, iv etc.), upper-roman; uppercase roman numerals (I, II, III, IV etc.).
Index Of CSS Properties - MARGIN & PADDING PROPERTIES
margin
margin is used to specify the properties of an all-round margin. It should be noted that if a width is specified for an element, then the value of the margin is added onto that width. Typically, margin comprises four values, one for each edge; however shorthand may also be applied whereby margin: 10px 15px specifies top and bottom (vertical) margins at 10px, along with left and right (horizontal) margins at 15px. A single value might also be used in the case where all four border edges are to be set at the same distance.
EXAMPLE CSS:
p { padding: 10px 5px; margin: 10px 15px 5px 10px;}
Possible values: any length value specified in pixels (px), ems (em), centimeters (cm), or as a percentage (%). auto; (default) the browser calculates the distance to be applied. A value of inherit may also be used (where supported) to specify that the value of the margin property of the element should be inherited from the parent element.
margin-bottom
margin-bottom specifies a margin along only the bottom edge of a given element.
EXAMPLE CSS:
p { padding: 10px 5px; margin-bottom: 10px;}
Possible values: any length value specified in pixels (px), ems (em), centimeters (cm), or as a percentage (%). auto; (default) the browser calculates the distance to be applied. A value of inherit may also be used (where supported) to specify that the value of the margin-bottom property of the element should be inherited from the parent element.
margin-left
margin-left specifies a margin along only the left-hand edge of a given element.
EXAMPLE CSS:
p { padding: 10px 5px; margin-left: 5px;}
Possible values: any length value specified in pixels (px), ems (em), centimeters (cm), or as a percentage (%). auto; (default) the browser calculates the distance to be applied. A value of inherit may also be used (where supported) to specify that the value of the margin-left property of the element should be inherited from the parent element.
margin-right
margin-right specifies a margin along only the right-hand edge of a given element.
EXAMPLE CSS:
p { padding: 10px 5px; margin-right: 15px;}
Possible values: any length value specified in pixels (px), ems (em), centimeters (cm), or as a percentage (%). auto; (default) the browser calculates the distance to be applied. A value of inherit may also be used (where supported) to specify that the value of the margin-right property of the element should be inherited from the parent element.
margin-top
margin-top specifies a margin along only the top edge of a given element.
EXAMPLE CSS:
p { padding: 10px 5px; margin-top: 30px;}
Possible values: any length value specified in pixels (px), ems (em), centimeters (cm), or as a percentage (%). auto; (default) the browser calculates the distance to be applied. A value of inherit may also be used (where supported) to specify that the value of the margin-top property of the element should be inherited from the parent element.
padding
padding is used to specify the amount of space which should be left between the contents of an element and its outer edges in all directions. It should be noted that if a width is specified for an element, then the value of the padding is added onto that width. Typically, padding comprises four values, one for each edge of the container; however shorthand may also be applied whereby padding: 10px 15px specifies top and bottom (vertical) padding of 10px, along with left and right (horizontal) padding of 15px. A single value might also be used in the case where all four edges are to be given the same amount of padding.
EXAMPLE CSS:
p { width: 300px; border: 1px solid blue;}
p.padded { width: 300px; border: 1px solid blue; padding: 10px 20px;}
Possible values: any length value specified in pixels (px), ems (em), centimeters (cm), or as a percentage (%). auto; (default) the browser calculates the distance to be applied. A value of inherit may also be used (where supported) to specify that the value of the padding property of the element should be inherited from the parent element.
padding-bottom
padding-bottom is used to specify the amount of space which should be left between the contents of an element and only its bottom edge.
EXAMPLE CSS:
p { width: 300px; border: 1px solid red; padding-bottom: 10px;}
Possible values: any length value specified in pixels (px), ems (em), centimeters (cm), or as a percentage (%). auto; (default) the browser calculates the distance to be applied. A value of inherit may also be used (where supported) to specify that the value of the padding-bottom property of the element should be inherited from the parent element.
padding-left
padding-left is used to specify the amount of space which should be left between the contents of an element and only its left-hand edge.
EXAMPLE CSS:
p { width: 300px; border: 1px solid red; padding-left: 15px;}
Possible values: any length value specified in pixels (px), ems (em), centimeters (cm), or as a percentage (%). auto; (default) the browser calculates the distance to be applied. A value of inherit may also be used (where supported) to specify that the value of the padding-left property of the element should be inherited from the parent element.
padding-right
padding-right is used to specify the amount of space which should be left between the contents of an element and only its right-hand edge.
EXAMPLE CSS:
p { width: 300px; border: 1px solid green; padding-right: 30px;}
Possible values: any length value specified in pixels (px), ems (em), centimeters (cm), or as a percentage (%). auto; (default) the browser calculates the distance to be applied. A value of inherit may also be used (where supported) to specify that the value of the padding-right property of the element should be inherited from the parent element.
padding-top
padding-top is used to specify the amount of space which should be left between the contents of an element and only its top edge.
EXAMPLE CSS:
p { width: 300px; border: 2px dashed blue; padding-top: 6px;}
Possible values: any length value specified in pixels (px), ems (em), centimeters (cm), or as a percentage (%). auto; (default) the browser calculates the distance to be applied. A value of inherit may also be used (where supported) to specify that the value of the padding-top property of the element should be inherited from the parent element.
padding (tables)
padding can also be used within <table> elements, to specify the amount of space between the contents of cells and their outer edges. It should be noted that if a width is specified for an table cell, then the value of the padding is added onto that width. Typically, padding comprises four values, one for each edge of the container; however shorthand may also be applied whereby padding: 10px 15px specifies top and bottom (vertical) padding of 10px, along with left and right (horizontal) padding of 15px. A single value might also be used in the case where all four edges are to be given the same amount of padding.
EXAMPLE CSS:
table { width: 500px; border: 1px solid black;}
th, td { padding: 10px 15px;}
Possible values: any length value specified in pixels (px), ems (em), centimeters (cm), or as a percentage (%). auto; (default) the browser calculates the distance to be applied. A value of inherit may also be used (where supported), if the table is nested; to specify that the value of the padding property should be inherited from the parent table.
