CSS Reference

Cascade Order: external, internal, tag, class, ID, inline, style appearing last, important!

  • Guide
  • Link bootstrap then CSS file before javascript file then bootstrap.min
  • Use headings to indicate importance of text
  • * { padding: 0; margin: 0; box-sizing: border-box; } removes all space around tags
  • p { margin-top: 0; margin-bottom: 0; } removes gaps between all paragraphs
  • Use CSS reset
  • html { font-size: 62.5% } sets font-size to 10px
  • Use descendant selector instead of classes and IDs
  • Use less IDs and !important
  • Use png file for icons
  • Use CSS Comments

 

  • Menu Guide
  • ul – controls the appearance of the menu
  • li – controls the styling for each button
  • ul, li {margin: 0; padding: 0; list-style-type: none; }
  • a – controls the appearance of each link

CSS Cheat Sheet: http://overapi.com/css

CSS Reset: http://bit.ly/1QFqX3V and https://jsfiddle.net/aicccia/xk12scqs/

Basic How To: http://www.w3schools.com/howto/

Responsive Patterns: https://bradfrost.github.io/this-is-responsive/patterns.html

Using Multiple Style Sheet: @import

Media Query Breakpoints: 

@media screen and (max-width: 1200px)
@media screen and (max-width: 992px)
@media screen and (max-width: 767px)
@media screen and (max-width: 668px)
@media screen and (max-width: 600px)
@media screen and (max-width: 550px)
@media screen and (max-width: 500px)
@media screen and (max-width: 450px)
@media screen and (max-width: 400px)
@media screen and (max-width: 350px)

Float: float layout

Line-height: example

Animation: example

Keyframe Animation Syntax: https://css-tricks.com/snippets/css/keyframe-animation-syntax/

CSS for SEO: https://css-tricks.com/snippets/css/accessibilityseo-friendly-css-hiding/

Guide to Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Guide to Grid: https://css-tricks.com/snippets/css/complete-guide-grid/

Advertisements

About bernadetteengleman

Hello, I am Bernadette from New York City. I moved here from Chicago in 2013. I am originally from the Philippines. I started studying web programming in 2015. I love it because I like making fun websites and web apps. The projects that I built so far are posted below. I like to cook and I love to travel. I also like to volunteer and I am a team leader with the non-profit organization, NYCares.
This entry was posted in HTML/CSS and tagged , , , , , , , , , , . Bookmark the permalink.