CSS Keynotes

Specs:
http://www.w3.org/TR/css-2010/

Guide:
https://developer.mozilla.org/en-US/docs/Web/CSS

1. CSS Box Model
Margin, border, padding, content
http://www.w3schools.com/css/css_boxmodel.asp

Inline elements: normally displayed without line breaks, e.g. b, td, a, img
Block level elements: normally start with a new line, e.g. h1, p, ul, table

2. “reset” CSS

A reset CSS is to style all the HTML elements in a consistent manner.
http://www.cssreset.com/what-is-a-css-reset/
pros: maintain a consistent design for all browsers
cons: too much work, may override cause confusions

3. CSS define methods
a. <link rel=”stylesheet” type=”text/css”>
b. <style></style>
c. <span style=””></span>
d. <style> @import url(‘a.css’)</style>
@import css will start to load after page download completed

4. Floats and z-index
An element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of it’s containing box or another floated element.
https://developer.mozilla.org/en-US/docs/Web/CSS/float
z-index works to stack elements like layers in Photoshop.
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

5. CSS sprites
Image sprites are used in apps where multiple icons are used to save memory and bandwidth. It helps reduce HTTP requests.
http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
Set background position to locate the icons in CSS.

6. Grid system
CSS grid for page layout
http://code.tutsplus.com/tutorials/which-css-grid-framework-should-you-use-for-web-design–net-25
Bootstrap Grid Template
http://getbootstrap.com/css/

7. CSS preprocessors, SASS, Stylus, LESS, pros and cons ?
Preprocessed CSS is aim to reduce the work of writing repetitive CSS. You can write CSS in a manner of programming with designed syntax, and let the compiler to decode for you.
http://sass-lang.com/

8. SVG
http://www.w3.org/TR/SVG/styling.html

9. Media query and how to handle CSS for different IEs ?
Media query allow the presentation of content be tailored to a specific range of output devices without changing the content.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
IE conditional Comments
You are using Internet Explorer.

<![if !IE]>
You are not using Internet Explorer.
<![endif]>
http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx

10. CSS selector: how a browser determines what elements match a CSS selector ?
Class Selector
ID Selector
Pseudo Class Selector
:link
:visited
:active
:hover
:focus
:first-child
:last-child
:nth-child
:nth-last-child
:nth-of-type
:first-of-type
:last-of-type
:empty
:target
:checked
:enabled
:disabled
Selector based on Relationship
A E
Any E element that is a descendant of an A element (that is: a child, or a child of a child, etc.)
A > E
Any E element that is a child of an A element
E:first-child
Any E element that is the first child of its parent
B + E
Any E element that is the next sibling of a B element (that is: the next child of the same parent)

Attribute Selector: input [type = ‘text’]
Element Selector: div, ul, ect.
* Universal Selector: for all elements

11. CSS Specificity
CSS specificity determines the CSS rule for the element to use in styling.
The more specific the CSS rule goes for the element, the more weight it will have.
A selector’s specificity is calculated as follows:
count 1 if the declaration is from is a ‘style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s “style” attribute are stylesheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
count the number of ID attributes in the selector (= b)
count the number of other attributes and pseudo-classes in the selector (= c)
count the number of element names and pseudo-elements in the selector (= d)
The specificity is based only on the form of the selector. In particular, a selector of the form “[id=p33]” is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an “ID” in the source document’s DTD.
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.
!important declaration has the highest weight.
http://www.w3.org/TR/CSS21/cascade.html#specificity
http://www.sitepoint.com/web-foundations/specificity/
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

12. * { box-sizing: border-box }, resize, outline-offset
box-sizing: border-box is to tell the browser to include the border and padding for the all elements for the width.
CSS3 User Interface: box-sizing, resize, outline-offset
resize:true will allow the div to resize by drag
outline-offset: offset a outline and draw beyonds border
http://css-tricks.com/almanac/properties/b/box-sizing/
http://www.w3schools.com/css/css3_user_interface.asp

13. CSS Flexbox ?
Flexbox model
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

14. Responsive design vs Adaptive Design
Responsive Design makes use of media query to changes CSS according to the width/height of the device.
Adaptive Design uses predefined layouts that have been carefully constructed for a variety of screen sizes. A particular layout is activated when the screen size of the device viewing the website is detected and matched with a stylesheet.
http://alistapart.com/article/responsive-web-design
http://www.techrepublic.com/blog/web-designer/what-is-the-difference-between-responsive-vs-adaptive-web-design/

15. Center a DIV
http://www.w3.org/Style/Examples/007/center.en.html#block

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s