Powered by eUKhost®

Announcement

Collapse
No announcement yet.

All-in-One CSS "Cheat Sheet" Reference

Collapse
This is a sticky topic.
X
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • All-in-One CSS "Cheat Sheet" Reference

    Schematics of CSS

    Code:
    selector { property: value; }
    The selector is the HTML element you wish to manipulate using CSS. The property will be the styling you want to apply on the selector, and the value is the property value specifying the kind of styling, such as "font-weight: bold". Each property-value pair in a selector must terminate with a semi-colon to tell the browser when you have finished specifying the values for a specific property. Such as:

    Code:
    div
    {
     font-weight: bold;
     text-decoration: underline;
     margin: auto;
    }
    This would make the <div> element bolded and underlined and centred on the page (margin: auto).

    CSS Reference
    Note: Not all properties are listed and the list will be updated in the future.

    color: #f5f5f5
    This changes the foreground colour of the applicable HTML element(s). You can also specify RGB (e.g. rgb(255,255,255)) and text values (e.g. "blue", "red", "brown").

    background-color: #f5f5f5
    This changes the background colour of the applicable HTML element(s). You can also specify RGB (e.g. rgb(255,255,255)) and text values (e.g. "blue", "red", "brown").

    font-family: Arial, Verdana
    This specifies the font to be used for text in the applicable HTML element(s). If you want to use more exotic fonts, see Google Webfonts. Using Google Webfonts is simple - you include an external JavaScript file on your website and use the font via CSS.

    font-size: 25px
    This specifies the font size of text in the applicable HTML element(s). You can also specify em, % and pt (points) values, too.

    font-weight: bold
    This specifies the weight of the font text in the applicable HTML element(s). As well as bold, you can specify other values including "normal", "bolder", "lighter" and numeric values from 100 to 900 (900 is the boldest value).

    font-style: italic
    This sets the text in the applicable HTML element to italicised. You can also set the value as oblique and [I]normal[I].

    text-decoration: underline
    This sets the text in the applicable HTML element to have underlines. You can also set the value as overline, line-through (strike) and blink, although the blink value is not supported in some major browsers including Internet Explorer, Chrome and Safari (both browsers using the WebKit rendering engine).

    text-align: center
    This aligns the text in an HTML element to the centre. You can also set the value as left, right and justified. The "justified" value will not centre the text but make text fit proportionally on each line, so you may see wider gaps between each word in some cases when using the justified property value.

    margin-left: 100px
    This adds margin to the left of the applicable HTML element(s). "Margin" is the outer spacing of the applicable HTML element(s). Other properties similar to margin-left include: margin-right, margin-bottom and margin-top. However, there is also a shorthand margin property that allows you to set the margin on all sides at the same time. For example:

    Code:
    div { margin: 0 0 40px 50px; }
    The first value is for the top, the second value is for the right, the third value is for the bottom and the last value is for the left. So a 40 pixel margin shall apply at the bottom and a 50 pixel margin on the left of all <div> elements in the HTML document.

    If you are wondering how to centre HTML elements, use: margin: auto. If you only have one value in the margin shorthand property, it sets the same value on each side. For example:

    Code:
    div { margin: 50px; }
    The above code sets a 50 pixel margin on each side. So the "auto" value automatically sets the width 100% on each side, causing an HTML element to be centred horizontally. It will not centre the HTML element vertically (top to bottom).

    padding: 50px
    This is the padding shorthand which sets a 50 pixel padding to each side within the applicable HTML element(s). You can also specify each side like this: padding: 50px 50px 35px 50px. This is the shorthand property for padding-left, padding-right, padding-top and padding-bottom.

    Padding is similar to margin but is the "spacing" inside the HTML element, not surrounding the HTML element (which is what the margin property is for.

    float: right
    This floats the specific HTML element to the right. This is useful for positioning a menu to the right or simply floating an image to the right of some content.

    height: 100px
    This sets the height of the applicable HTML element(s). You can also specify the size with pt (points), em and %.

    width: 100px
    This sets the width of the applicable HTML element(s). You can also specify the size with pt (points), em and %.

    border-color: #f5f5f5
    This sets the border colour of the applicable HTML element(s). You can also specify the colour using rgb (e.g. rgb(255,255,255)) and text values (e.g. blue, orange, green, red).

    border-width: 1px
    This sets the width of the border of the applicable HTML element(s).

    border-radius: 2px
    This adds a rounded corner on the border of 2 pixels.

    border-style: solid
    This sets the border style to solid. You can also choose others, such as dotted, dashed, double, inset, outset and ridge.

    border: 1px solid #f5f5f5
    This is the border styling shorthand. In order, you can set the border-width, border-style and border-color in one property.

    text-indent: 5px
    This property sets an initial indentation to the first line of a paragraph.

    letter-spacing: 2px
    This sets the spacing between each character/letter within the applicable HTML element(s).

    text-transform: uppercase
    This sets the specific HTML element(s) text to always be uppercase, even if the text within the HTML element is in lower case. You can also specify other values, including capitalize, lowercase and none.

    position: absolute
    By default, HTML elements are bound by the positioning of other elements relative to it. However, if you want to freely move an HTML element to a specific area of the HTML document (or an element within an element), you have to set the position of the HTML element to absolute. You can then use the left:, right:, bottom: and top: properties to position the HTML element within the respective bounds (for example, if the HTML element is within a parent HTML element).

    The position: relative property-value pair does the opposite of absolute and will position the HTML element relative to the natural bounds and scope of where the HTML element is within the HTML document, relative to any other elements on the page.

    z-index: 0
    This property changes the default stack order of HTML elements on the page. For example, if a menu drop-down is indadvertedly behind an image, you can use z-index to tell the browser that the drop-down should appear on top of the image for the portion of the drop-down which cuts into the image that is, for example, below the menu. So the image could have a z-index of 1 and the menu drop-down could have a z-index of 2, this means the stack order of the menu drop-down is greater than that of the image.

    Bear in mind if you have an HTML element which is absolutely positioned, in Internet Explorer 7 this creates a new stack order context effectively meaning that z-index will not work relative to the other element you want it stacked above. To remedy this, you need to have a parent HTML element which is relatively positioned and has a higher z-index value. This will create the z-index stack order you intended to have in Internet Explorer 7 and which works fine in other browsers.

    Example:

    HTML Code:
    <div style="position:relative;z-index: -99;"><div id="hideimg" style="position:absolute;right:0;top: 10px;width:595px;height:695px;z-index:-999;"></div></div>
    Find us on Twitter and Facebook

    Need to contact us?
    Customer Support: Client Area - 0800 862 0380 (option 2)
    Customer Relations: [email protected] - 0800 862 0380 (option 3)
    Sales: [email protected] - 0800 862 0380 (option 1)




    The opinions or views expressed above are not necessarily the opinions or views of eUKhost Ltd.

  • #2
    Re: All-in-One CSS &quot;Cheat Sheet&quot; Reference

    I have always had issues with CSS. Your cheat sheet is the answer to my problems. I have downloaded a few guides online, but they are lacing some of the information you have supplied. Thank you for taking the time to post this guide.

    Comment

    ban-img
    Working...
    X