CSS

software-development

Books

Use normalize.css

box-sizing
display: flext;
justify-content: space-around;
flext-direction: column;
align-items: centers;

https://www.youtube.com/watch?v=CdZZcbZG83o
https://blog.jim-nielsen.com/2022/previous-sibling-selector/
https://css-tricks.com/pseudo-class-selectors/
https://cssfordesigners.com/articles/things-i-wish-id-known-about-css
https://css-tricks.com/box-sizing/
https://www.tjvantoll.com/2013/01/28/stop-messing-with-the-browsers-default-focus-outline/

UA stylesheet:
http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm
http://www.iecss.com/
http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements
https://www.w3schools.com/css/css_examples.asp

selector {
    property: value;
}

// Example of combining selectors, and specifying selectors
#id, tagName, .className {
    property: value;
    color: red;
    text-align: center;
}
// In the above code, we use # with element ID, and . with class name.

span {
    font-style: italic;
    font-weight: bold;
    text-transform: uppercase;
    font-variant: small-caps;
}
// In the above code, we use the tag selector to select all span tags.

// We can combine selectors:
p.center {
    text-align: center;
    color: red;
}
// In the above code, we use the element selector to select all paragraph elements, and we combine it with the 
// class selector to select all paragraphs that has the class center.

// CSS only has one style for commenting.  That is: /* ... */
// CSS does not support // for commenting

// Structure your CSS:
Have one CSS file that is common to all pages, and one CSS file for each page.

<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />

<style media="screen" type="text/css">
</style>

<h2 style="color:red;background:black;">Inline style</h2>

// Printing
<link rel="stylesheet" href="print.css" media="print" />
<style type="text/css" media="print">
    body {
        margin: 8px;
    }
</style>

// Apply a style based on the data attribute:
[data-make-raw] { outline: 1px solid tomato; }

In most cases your CSS for links need to be in the order of
:link :visited :hover :active.

border: 1px solid #333;
border: width style color;
outline: #f00 solid 2px;
color: #333;
margin: 5px 10px 10px 5px;  /* Top, Right, Bottom, Left (clockwise) */
padding: 5px 10px 10px 5px;

background: color image-url repeat attachment position;
background: #ccc url(logo.png) no-repeat 0px 0px fixed;
background: #f00 url(background.gif) no-repeat fixed 0 0;

font: [style] [variant] [weight] size families
font: [style] [variant] [weight] size / line-height font-family
font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif
// Acceptable values for font-style are: normal, italic, oblique or inherit
// Acceptable values for font-variant are: small-caps | normal | inherit
// Acceptable values for font-size are: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger
// Acceptable values for font-weight: 
//   100 (ultra thin or ultra light)
//   200 (thin or light)
//   300
//   400 (normal)
//   500 (medium)
//   600 (semi-bold)
//   700 (bold)
//   800 (extra-bold)
//   900 (ultra-bold)

list-style:square inside url(image.gif);  /* list-style-type, list-style-position, list-style-image */

input[type="text"] {background-color: blue}

// Special selectors:
* match any element
E match any element of type E (E is an HTML tag)
E F match any element of type F that is direct descendent of type E
E > F match any element of type F that is a child of element type E
E:first-child
E:link
E:visited
E:active
E:hover
E:focus
E:lang(c)

// Cross-browser transparency:
#your _div {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

// Changing the shape of the mouse cursor:
.className { cursor: cursorType }
1. auto: the default cursor
2. crosshair: gun-style cross
3. default: no change
4. pointer: the normal hand cursor when you mouseover a link
5. hand: a value only supported by MSIE, use pointer instead
6. wait: hour-glass
7. text: the vertical I-beam for selecting text
7. help: arrow with a question mark
8. move: crosshair with arrows on the ends
9. n-resize, ne-resize, nw-resize, e-resize, w-resize, s-resize,
   se-resize, sw-resize

Articles
Resources
Bugs

Nice CSS
Colors
Text wrapping
Cheat Sheet
Styling scrollbars
Best Practices
Mixins
Units
Pseudo-Elements
Pseudo-Classes
Box Sizing
Crunchers / Compressors / Compilers
uncss

Positioning
Box Model
Flexbox
Grid

Background

Font / Typography - Continue from here
line-height

Clearing floated elements

Table
Tableless
Layout
Equal Height Columns

Counters / Numbering

Animation
Variables
Preprocessors
Frameworks

Screen resolutions

The anchor tag
Accessiblity / Usability
Minimalism
Margin Collapse - done
Negative Margins
Centering an element
User Style Sheets

Techniques
Shapes
Responsive

Divitis and Tagitis
Style sheet switching and alternate style sheets
Sprite
Selectable Text Replacement
Vendor Prefixes
Images
Light Reading
CSS3
Form elements
Print Media

What happens if you set visibility:hidden on the parent element but the child element has visibility:visible?

Visibility hidden can be overwritten by a descendant. Consider that you have box1 with visibility:hidden that contains box2 with visibility:visible. box2 will be visible. This is not a bug. This is according to CSS 2.1 specification.

How to deal with displaced or disappeared elements?

If an element is displaced, check to see if any element in the chain is floated. If an element in the chain is floated, try adding 'position:relative'. This bug effect IE6.

Why do we need to eliminate the overflow-x property if possible when we do not define a height?

This is a problem with Firefox 3.6.x. If we have div, which we did not define a height, but we define overflow-x: hidden, vertical scrollbar appear (at least with Firefox 3.6.x). Eliminate overflow-x if possible if we don't want to explicitly define the height

How can we effectively cause the textarea to have 100% width without overflowing the parent DIV?

We have a div, which contains a textarea, and we want the textarea to have borders, paddings, and width=100%. The problem is that the width=100% means that the width of the textarea equal to the width of the parent div. Because the width does not contain the border and padding, the textarea will overflow the parent div. To work around this issue, we can use one of the following approaches:

  • Set padding-right on the parent div to twice the border of the textarea.
  • Try to eliminate the parent DIV if possible (not tested)
  • Use position:absolute on the textarea, and assign appropriate value for the left, and right property (not tested).

How can we use overflow:auto to prevent unnecessary scrollbar?

For textarea, by default, IE will display the vertical scrollbar even when it is not necessary. To tell IE not to display the vertical scrollbar until necessary, use overflow:auto. For a div, if all of its child elements are floated or position:absolute, the div collapsed (causing its background to disappear, or your elements are not displayed appropriately). To fix these problems, use overflow:auto and set the height on the div. This cause the div to regain its dimension.

How to Replace nobr with css?

The <nobr> is supposed to prevent the text from wrapping. However, the <nobr> tag is not part of any standard specification, and it is not supported by all browsers. If you need to prevent the contained text from wrapping (all the contained text must be rendered on the same line for some reason), you can achieve this behavior with CSS:

.nobr { white-space:nowrap; }

Problem with fluid header / footer:

If your header and footer DIVs are fluid (you do not want to set the width on these because you want them to stretch nicely), a problem occurs when the window is resized so that it is smaller than the content DIV (which is typically 960px). At this point, the horizontal scrollbar appears, and if you scroll right, you will see that your header and footer DIVs do not stretch as you may expect. Possible solution is to put all of your elements (header, content, footer DIVs) inside another DIV

How to create a block that extends to the bottom of the viewport?

You have a page with two blocks (a header and a body). How can you get the body to start below the header, and extends all the way to the bottom of the viewport, whatever the size of the window is? One obvious way is to use JavaScript to set the height of the body block at runtime. However, we can also do this with CSS. Make the body block absolutely positioned, and set both top and bottom attributes to 0. The drawback of this technique is that we need to know the height of the header block ahead of time.

How can we use the overflow property to clear float instead of adding extra markup with clear:both?

You can use overflow:hidden to prevent the box next to a float from extending and wrapping below the float. For example, you have a profile photo which you need to display on the left, and on the right you need to display some text. You use float:left on the profile photo. On the right, you can set overflow:hidden or overflow:auto (for IE6, we also need zoom:1). Another solution is to set margin-left on the right element.

How to align images with an input field?

If you need to have an image next to an input element and have the two element vertically align, set vertical-align:middle on both elements. The default value for vertical-align of the input element is baseline.

How to find bugs in your style sheet?

Before delving into cross-browser CSS compatibility issues, validate your style sheet. If it passes this test you are sure that the problems aren't caused by incorrect code but by incorrect browser implementations. Validation doesn't remove the problems, though. If you encounter weird behavior, don't assume you found a bug. Ask for help at the wonderful css-discuss mailing list, where plenty of experts are ready to lend a helping hand. If you still think you've discovered a bug, follow the instructions on the MysteryBug page to isolate and define the bug. Usually you'll find that you've misunderstood an obscure detail in the specs.

What is the purpose of clipping?

Consider that each element has a "box" surrounding it. Changing the elements's clipping area is a way of shrinking or growing this box. Clipping can be used to create a box for an element that extends way beyond the box necessary to contain the element. Clipping can shrink this box, cutting off the content.

span {
    font-style: italic;
    font-weight: bold;
    text-transform: uppercase;
    font-variant: small-caps;
}

How can we remove the unwanted color box around the image (when the image is inside an anchor tag)?

Specify the border of the image to be zero.

More on CSS

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License