Senthilkumar Gopal

Musings of a machine learning researcher, engineer and leader

Learning basics of CSS and quick notes

The following are some of the important points that i had gathered during my learning of CSS and HTML markup. It also contains the important factors to consider when converting a given PSD or image into a good HTML markup and CSS.

Slicing techniques

  1. Do not slice the logo
  2. Figure out the gradient for repeating along the x -axis
  3. Dont start with the slice tool from the toolbar
  4. Always design with a wrapper div - for a row or a column - to be enclosed as a container tag
  5. Decide upon only one type of slicing for a given layout - for the wrapper divs and then perform the slicing
  6. First horizontal - because the flow goes from right to left
  7. After selecting the slice, divide the slice and give the number of dividers you would need
  8. Save for Web and Devices - Gif and PNG for transparent ones
  9. Quality generally set up as 75-85%

Remember

  1. height, width, padding, margin, float - main important properties
  2. use the following (or use a reset)
body{
    padding:0;
    margin:0;
}
  1. Give Wrapper margin:auto; to make the whole container centered
  2. Give fixed width and height to get the margin auto to work properly
  3. Div dimensions: width + margin + padding + border
  4. Whenever u are adding a padding or margin, adjust the width or height appropriately
  5. Use margin:auto; to center the div within the container
  6. \#nav ul{ margin:0; padding:0;} - remember for every UL block or use a reset
  7. Always use ul{list-style-type: none;}
  8. Give li{display:block} and provide width & height to get a BUTTON look and feel
  9. For vertical nav bar, when absolute position is used, use negative margin-left and margin-top of size half of the width and height of the div.
  10. Always the target browsers and supported resolutions needs to be decided

Media Queries

  1. Change float to normal using the height/width/float properties for changing screen size
  2. Always use margin,padding:0 - for reset
  3. Types of layouts - pure fluid / pure display oriented / hybrid .. Fluid Layout … system of relative layout instead of absolute pixels … height/width - only in percentages

.. Adaptive Layout … using the (media?) tags

.. Responsive Layout … Mix of Fluid and adaptive layouts. PERCENTAGE + Media Tags

  1. New way of setting the media value [source,html]
        <meta name="viewport" content="initial-scale=1,width=device-width">
  1. Media query representation
        @media screen and (max-width: 980px){
            ....
        }
  1. Always create the smallest resolution first
  2. Try to use different images with different srcs to cater to different sizes

Types of Selectors

  1. Tag
  2. Class
  3. Pseudo-element [first-line, first-character] This is the LEAST important selector
  4. Contextual/Conditional - selective styling - p strong{}
  5. Group/Compound selector - more than 1 tag
  6. Pseudo-class [link,active,hover,visited] - MORE important than the other pseudo-element
  7. ID Selector
  8. when to use id vs class? .. Use Class references with Less weightage .. Use the TAG selectors first

Selectors Precedence

  1. The precedence for any style flows as : inline > Embedded > External
  2. The precedence for any selector: id > class > tag
  3. For more details, refer to
  • http://www.w3.org/TR/CSS21/cascade.html#specificity[Specificity]
  • http://www.w3.org/TR/CSS2/selector.html[Selector]
  • http://css-tricks.com/specifics-on-css-specificity/[CSS Tricks]

Hierarchy of precedence

  1. The ID selector
  2. The attribute selector
  3. The class selector
  4. The child selector
  5. The adjacent sibling selector - .blog-img + p
  6. The descendant selector
  7. The tag selector

Shorthand syntax

###= background

    background: url(example.gif);
    background-color: #eaeaea ;
    background-repeat: repeat-x;
    background-position: top left;

can be written as:

background: #eaeaea url(example.gif) repeat-x top left;

###= border

    border-color: red;
    border-width: 1px;
    border-style: solid;

can be written as:

border: 1px solid red;

###= list

    list-style-position: outside;
    list-style-image: none;
    list-style-type: disc;

can be written as:

list-style: disc outside;`

the general format for a list style is:

list-style: [list-style-type] [list-style-position] [list-style-image];
font
    font-family: Arial, Helvetica;
    font-weight: bold;
    font-style: italic;
    font-size: 1em;
    line-height: 1.5em;

can be written as:

font: bold italic 1em/1.5em Arial, Helvetica;

###= margin The margin properties allows a shorthand for margin-top, margin-right, margin-bottom and margin-left.

    /* top=10px, right=5px, bottom=15px, left=20px */
    margin: 10px 5px 15px 20px;

    /* top=10px, right=5px, bottom=10px, left=5px*/
    margin: 10px 5px;

    /* top=10px, right=5px, bottom=15px, left=5px*/
    margin: 10px 5px 15px;

Form features in HTML5

  1. Placeholder text
  2. Slider control
  3. Calendar/Date picker
  4. autocomplete
  5. Input type Search

CSS features in HTML5

  1. Shadow - box shadow, text shadow
  2. Gradient
  3. Blur
  4. column text
  5. transform / transitions
  6. Rounded corners (using border radius)
  7. CSS Regions
  8. Exclusions
  9. Shaders
  10. Shadow DOM
  11. Multiple Images in background
  12. Alpha
  13. Font-faces
  14. Animation using Keyframes
  15. Position:fixed or other positioning important for animations to work

New Tags in HTML5

  1. New semantic tags - header, footer, nav, section, aside, article
  2. Multimedia tags - audio/sound,video
  3. Drawing based tags - canvas, svg
  4. Form based new tags - Date, slider, time, spinner
  1. Css3Generator
  2. Reset
  3. Grid
  4. IE support
  5. html5shiv
  6. modernizer
  7. html5boilerplate
  8. Adobe Inspect
  9. Brackets