Tag Archives: css

CSS Cheat Sheet

by on March 15, 2012 in Frontend

CSS Selector

  1. *  //universal selector
  2. #container *  //everything under #container element
  3. X  //all elements according to their type like ul, a, li, etc
  4. X:visited, X:link  //pseudo-class targeting – eg. input[type=radio]:checked
  5. #X : id selector    //target single element
  6. .X : class selector //target multiple elements
  7. X Y: descendant selector //select only a set of elements under X
  8. X > Y  //only direct children Y of X
  9. X + Y //first adjacent sibling selector: select only the Y that is preceded by X (eg. ul + p)
  10. X ~ Y //all sibling selector
  11. X[Y]  //attribute selector (select X if it has Y as attribute)
  12. X[Y="Z"] //conditional attribute selector : exact
  13. X[Y*="Z"] //conditional attribute selector: contains
  14. X[Y^="Z"] //conditional attribute selector: begins with
  15. X[Y$="Z"] //conditional attribute selector: end with
  16. X[Y~="Z"] //target an attribute which has a spaced-separated list of values
  17. X:not(selector)

Use those tag to help you generated content around the selected elements

  1. X:after
  2. X:before
  3. X:hover (div:hover, a:hover)

Use pseudo-elements

  1. p::first-line
  2. p::first-letter

Use hierarchical notation

  1. X:nth-child(n)   -  eg. li:nth-child(100)
  2. X:nth-last-child(n)
  3. X:nth-of-type(n)
  4. X:nth-of-last-of-type(n)
  5. X:first-child
  6. X:last-child
  7. X:only-child
  8. X:first-of-type (eg. ul:first-of-type)
  9. X:only-of-type //no sibling from its parent container

Absolute positioning inside relative positioning

Without a relative positioned direct parent, the absolutely positioned children elements are positioning themselves in relation to the body element instead of their direct parent.

Reference: Absolute positing inside relative positioning

CSS positioning

The Box Model

To understand positioning in CSS you must first understand the box model. For display purposes, every element in a document is considered to be a rectangular box which has a content area surrounded by padding, a border and margins.

There are two basic types of boxes, block and inline.

  • inline: follow the flow without add new line.
  • block: always starts an new line before and after. (override via display: inline)

Default inline elements

  • <span>, <a>, <img>, <input>

Default block element

  • <div>, <p>, <ul>, <li>, <table>, <pre>, <blockquote>, <form>

Rules

  1. Block elements may contain both inline elements and other block elements, but inline elements may contain only other inline elements.
  2. CSS features a property called display, which allows you to change a block element into an inline one and vice versa.

 

Float

Float

  • A common problem with float-based layouts is that the floats’ container doesn’t want to stretch up to accomodate the floats. To do that, you need:

div.container {
  border: 1px solid #000000;
<strong> overflow: hidden; width: 100%;</strong>
}

div.left {
  width: 45%;
  float: left;
}

div.right {
  width: 45%;
  float: right;
}

 

Leave a comment • Continue Reading →

Hacking CSS

by on January 7, 2011 in Frontend

Recently, I have built some of the websites from church and friends via Wordpress, a popular blogging/ CMS system. Being very impressed by the quality of the themes and rich plug-ins, I decide to take a step further to learn about the Wordpress programming model. I can do that via writing my simple Hello world plugin. However, it doesn't allow me to grasp the full power of Wordpress framework. So, I decide to study about a sophisticated Wordpress theme and find out how it integrated with Wordpress and leveraged its plug-ins. To do that, I need to ramp up CSS, PHP in few days. This article is the quick note that summarized what I have learnt about CSS. Hope it is helpful to you as well.

Class and ID Selector

/* The difference between an ID and a class is that an ID can be used to identify
one element, whereas a class can be used to identify more than one. */

/* class selector */
.intro

/* id selector*/
#top

/* built-in html element (no need to put symbol) */
p

/* locate specific element – paragraph with class=jam
   (for example <p class=jam>xxx</p>) */
p.jam {xxxx} 

/* apply grouping */
h2, .thisClass, .thatClass {…}

/* nested selector */
#top{…}
#top h1{…}

/* state of an element (ex. link) */
a.snowman:link
a.snowman:visited
a.snowman:active
a.snowman:hover

/* shorthand : margin, padding, border-width where th
p {
    border-top-width: 1px;
    border-right-width: 5px;
    border-bottom-width: 10px;
    border-left-width: 20px;
}

//can be
p {
    border-width: 1px 5px 10px 20px;
}

//border-width, border-color and border-style shorthand
p {
    border: 1px red solid;
}

margin: 1em 10em; // top/bottom = 1em, left/right = 10em

//background-color, background-image, background-repeat, background-position
body {
    background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}

 

Box Model

All html tags/ elements in html can be think of within its own box/ container. And it can be aligned on the screen in accordance with the CSS box model. Here is the box model in diagram:

I keep forgetting where is margin and padding. So, I use the word "MBP" to help me out where M=margin, B=border, P=padding. ;)

At the first glance, it is all about spacing between an element and its neighbors. However, when I see how creative people leverage negative margin. I think it is good to write about it. For margin like "margin: 0px -30px 0px 0px;",

 

Display Flow

Once you understand how the spacing of an element, you need to under the display flow. Block element (div, p, h1) will display in an newline while Inline element (span, a, img) will display without open up an newline. You can take an element out from its flow via explicitly setting its display properties: inline, block and none. "none" here means not showing it at all. The difference between "display:none" and "visibility:hidden" is "display:none" will take the element out from the flow, so it will not leave an empty space on screen. For example when you want to print an article, you want to just print its content. So, you will do:

#navigation, #seeAlso, #comments, #standards {
    display: none;
}

To take an element out from the display flow but still showing it, there are 2 common ways:

  1. Floating
  2. Positioning

I will cover these in the layout section.

Layout

margin: -30px 0 15px 0; (clockwise: top, right, bottom, left)
Imagine margin is like a photo white border that make your photo bigger in size and it is often enforced.
So, if a photo has margin inside a div like "right 50" and it is
floating right as well. Because external container doesn't moved by internal element, margin-right 50
will push the photo leftward by 50px instead. And -ve margin here will do the opposite.

When static element (ie. no float) is given a -ve margin on top, left, it pulls the element in that specified direction.
But for bottom and left, it doesn't move but move the content surrounding towards it (ie. overlap with it).

Possibility:
(1) use list to build a table
(2) Overlap to add emphasis
(3) Smashing 3D effect for Bevel text
(4) Layout – Flexible Document Structure

Using negative margins with floats sometimes pisses off older browsers. Some symptoms include:

    * Making links unclickable
    * Text becomes difficult to select
    * Tabbing any links disappears when you lose focus

Solution: Just add position:relative and it works!

Layout

Positioning

position has 4 options: absolute, relative, static and fixed

  • absolute will take the element out from the flow and use top, left, buttom and left coordinate to locate it
  • fixed did the same as absolute but it will not move even u scroll the browser.

Floating

floating an element will shift it to the right or left of a line, with surrounding content flowing around it. If you don't want the next element to wrap around the floating object, you can apply the clear property like: clear:left, clear:right and clear:both

@ Rules

/* attach a set of css to another css file */
@import url(xyz.css); 

/* apply its content to a specified media (ex. all, aural, handheld, print,
   projection, screen): IE just takes all, screen, print */
@media print{
    body {xxxx}
    …
}

/* embedded external font (not all browser supports it) */
@font-face {
    font-family: somerandomfontname;
    src: url(somefont.eot);
    font-weight: bold;
}

p {
    font-family: somerandomfontname;
    font-weight: bold;
}
 

Reference

ref: http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
ref: http://www.htmldog.com/guides/cssbeginner/
ref: http://www.htmldog.com/reference/cssproperties/
http://devzone.zend.com/article/627

Leave a comment • Continue Reading →