Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Thursday, September 13, 2012

CSS Cheat Sheets





Source:
All The Cheat Sheets That A Web Developer Needs
No comments:
Labels: ,

Tuesday, July 21, 2009

Specificity and Star Wars

Specificity is a type of weighting that has a bearing on how your cascading style sheet (CSS) rules are displayed.”
“All rules in your CSS carry a specificity rating regardless of selector type, although the weighting that is given to each selector type varies and will ultimately affect the styling of your web documents.”
http://www.adobe.com/devnet/dreamweaver/articles/css_specificity.html


CSS Specificity: Things You Should Know

CSS Specificity Tools & Resources

  • CSS Specificity for Poker Players
    If you’re not from the programming world and CSS seems a bit confusing, perhaps this analogy may help clear some concepts up. Think of CSS rules as poker hands. The best hand determines an element’s style.
  • CSS specificity calculator
    Calculates the specificity of a given selector.
  • Understanding Specificity Tutorial
    In this tutorial you will look at specificity. Specificity is a type of weighting that has a bearing on how your cascading style sheet (CSS) rules are displayed. All rules in your style sheet carry a specificity rating regardless of selector type, although the weighting that is given to each selector type varies and will ultimately affect the styling of your web documents.
  • Cascade Inheritance: Specificity
    At this point it might be timely to have a quick discussion of specificity. Both inside a single style sheet, and in a cascade of style sheets, it should be clear that more than one rule can apply to the same element. What happens when two properties in separate rules which both apply to an element contradict one another?
  • CSS 2.1 Selectors Explained
    An extensive overview of CSS 2.1 selectors. Learning how to use the full range of CSS selectors available in CSS 2.1 properly can actually help you keep your HTML a lot cleaner. It will let you minimise unnecessary use of the class attribute and the need for adding extraneous div and span elements to the markup.
  • CSS Specificity Bugs in IE
    A brief overview of specificity bugs implemented in Microsoft Internet Explorer/Win.
  • CSS Structure and Rules
    Basic Syntax, Pseudo-classes and Pseudo-elements, Cascading Order.
  • Specificity
    It may not seem like something that important, and in most cases you won’t come across any conflicts at all, but the larger and more complex your CSS files become, or the more CSS files you start to juggle with, the greater likelihood there is of conflicts turning up.
No comments:
Labels:

Sunday, July 12, 2009

Master Stylesheet vs Global Resets

Trackback: http://www.crucialwebhost.com/blog/master-stylesheet-the-most-useful-css-technique/trackback/

The problem with Global Resets is that when set form buttons and fieldsets and a few other elements lose their original styling beyond recognition.

A better option is to individually style the elements that you want to reset. It also makes it easier to apply your own style to common elements.

Below is a basic master stylesheet that has some styling removed, such as color, removed to keep it simple and customizable.

The global classes at the bottom cover basic styling and will remove styling that was initially set. For example, the .nobullet and .noindent work great on an unordered or ordered list.
This is the place to add the classes that are commonly used.


  1. /***** Global Settings *****/
  2.  
  3. html, body {
  4. border:0;
  5. margin:0;
  6. padding:0;
  7. }
  8.  
  9. body {
  10. font:100%/1.25 Arial, Helvetica, sans-serif;
  11. }
  12.  
  13. /***** Headings *****/
  14.  
  15. h1, h2, h3, h4, h5, h6 {
  16. margin:0;
  17. padding:0;
  18. font-weight:normal;
  19. }
  20.  
  21. h1 {
  22. padding:30px 0 25px 0;
  23. letter-spacing:-1px;
  24. font-size:2em;
  25. }
  26.  
  27. h2 {
  28. padding:20px 0;
  29. letter-spacing:-1px;
  30. font-size:1.5em;
  31. }
  32.  
  33. h3 {
  34. font-size:1em;
  35. font-weight:bold;
  36. }
  37.  
  38. /***** Common Formatting *****/
  39.  
  40. p, ul, ol {
  41. margin:0;
  42. padding:0 0 1.25em 0;
  43. }
  44.  
  45. ul, ol {
  46. padding:0 0 1.25em 2.5em;
  47. }
  48.  
  49. blockquote {
  50. margin:1.25em;
  51. padding:1.25em 1.25em 0 1.25em;
  52. }
  53.  
  54. small {
  55. font-size:0.85em;
  56. }
  57.  
  58. img {
  59. border:0;
  60. }
  61.  
  62. sup {
  63. position:relative;
  64. bottom:0.3em;
  65. vertical-align:baseline;
  66. }
  67.  
  68. sub {
  69. position:relative;
  70. bottom:-0.2em;
  71. vertical-align:baseline;
  72. }
  73.  
  74. acronym, abbr {
  75. cursor:help;
  76. letter-spacing:1px;
  77. border-bottom:1px dashed;
  78. }
  79.  
  80. /***** Links *****/
  81.  
  82. a,
  83. a:link,
  84. a:visited,
  85. a:hover {
  86. text-decoration:underline;
  87. }
  88.  
  89. /***** Forms *****/
  90.  
  91. form {
  92. margin:0;
  93. padding:0;
  94. display:inline;
  95. }
  96.  
  97. input, select, textarea {
  98. font:1em Arial, Helvetica, sans-serif;
  99. }
  100.  
  101. textarea {
  102. width:100%;
  103. line-height:1.25;
  104. }
  105.  
  106. label {
  107. cursor:pointer;
  108. }
  109.  
  110. /***** Tables *****/
  111.  
  112. table {
  113. border:0;
  114. margin:0 0 1.25em 0;
  115. padding:0;
  116. }
  117.  
  118. table tr td {
  119. padding:2px;
  120. }
  121.  
  122. /***** Wrapper *****/
  123.  
  124. #wrap {
  125. width:960px;
  126. margin:0 auto;
  127. }
  128.  
  129. /***** Global Classes *****/
  130.  
  131. .clear         { clear:both; }
  132. .float-left    { float:left; }
  133. .float-right   { float:right; }
  134.  
  135. .text-left     { text-align:left; }
  136. .text-right    { text-align:right; }
  137. .text-center   { text-align:center; }
  138. .text-justify  { text-align:justify; }
  139.  
  140. .bold          { font-weight:bold; }
  141. .italic        { font-style:italic; }
  142. .underline     { border-bottom:1px solid; }
  143. .highlight     { background:#ffc; }
  144.  
  145. .wrap          { width:960px;margin:0 auto; }
  146.  
  147. .img-left      { float:left;margin:4px 10px 4px 0; }
  148. .img-right     { float:right;margin:4px 0 4px 10px; }
  149.  
  150. .nopadding     { padding:0; }
  151. .noindent      { margin-left:0;padding-left:0; }
  152. .nobullet      { list-style:none;list-style-image:none; }

No comments:
Labels:

Sunday, May 24, 2009

A collection of Global CSS Resets

Reset Reloaded

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

/* remember to define focus styles! */ :focus {
outline: 0;
}

body {
line-height: 1;
color: black;
background: white;
}

ol, ul {
list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse:
separate; border-spacing: 0;
}

caption, th, td {
text-align: left;
font-weight: normal;
}

blockquote:before, blockquote:after, q:before, q:after {
content: "";
}

blockquote, q {
quotes: "" "";
}


A Killer Collection of Global CSS Reset Styles


Discussion on Global CSS Resets at Webmaster World

No comments:
Labels:

Wednesday, May 13, 2009

CSS CHEAT SHEET

SYNTAX
Syntax
selector {property: value;}
External Style Sheet
link rel="stylesheet" type="text/css" href="style.css"
Internal Style

Inline Style



GENERAL
Class String preceded by a period
ID String preceded by a hash mark
div Formats structure or block of text
span Inline formatting
color Foreground color
cursor Appearance of the cursor
display
block; inline; list-item; none
overflow How content overflowing its box is handled
visible, hidden, scroll, auto
visibility
visible, hidden
FONT
font-style
Italic, normal
font-variant
normal, small-caps
font-weight
bold, normal, lighter, bolder, integer (100-900)
font-size Size of the font
font-family Specific font(s) to be used
TEXT
letter-spacing Space between letters
line-height Vertical distance between baselines
text-align Horizontal alignment
text-decoration
blink, line-through, none, overline, underline
text-indent First line indentation
text-transform
capitalize, lowercase, uppercase
vertical-align Vertical alignment
word-spacing Spacing between words
BOX MODEL
CSS Box Model height; width; margin-top; margin-right; margin-bottom; margin-left; padding-top; padding-right; padding-bottom; padding-left;
BORDER
border-width Width of the border
border-style
dashed; dotted; double; groove; inset; outset; ridge; solid; none
border-color Color of the border
POSITION
clear Any floating elements around the element?
both, left, right, none
float Floats to a specified side
left, right, none
left The left position of an element
auto, length values (pt, in, cm, px)
top The top position of an element
auto, length values (pt, in, cm, px)
position
static, relative, absolute
z-index Element above or below overlapping elements?
auto, integer (higher numbers on top)
BACKGROUND
background-color Background color
background-image Background image
background-repeat
repeat, no-repeat, repeat-x, repeat-y
background-attachment Background image scroll with the element?
scroll, fixed
background-position
(x y), top, center, bottom, left, right
LIST
list-style-type Type of bullet or numbering in the list
disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none
list-style-position Position of the bullet or number in a list
inside; outside
list-style-image Image to be used as the bullet in a list

* The properties for each selector are in the order they should appear when using shorthand notation.

Shorthand*

background
border
border-bottom
border-left
border-right
border-top
font
list-style
margin
padding

Comments

/* Comment */

Pseudo Selectors

:hover
:active
:focus
:link
:visited
:first-line
:first-letter

Media Types

all
braille
embossed
handheld
print
projection
screen
speech
tty
tv

Units

Length %
em
pt
px
Keywords bolder
lighter
larger



Source
http://lesliefranke.com/files/reference/csscheatsheet.html
No comments:
Labels:
Subscribe to: Posts (Atom)