CSS Fundamentals

Even if most developers don’t touch front-end code (looking at fellow back-end/integration developers here) it’s good to know the basics of CSS and the fundamentals involved in coming up with a stylesheet for your personal website for example.  Here’s some notes that I’ve taken over the years:-

  • Class Selectors – use when you want to apply one particular style to multiple HTML elements. You can use same classes on multiple elements and multiple classes can  be used on one element.
  • ID Selectors – each element can only have one ID, and each page can only have one element with that ID. Use them for unique or global styles that are not repeated.
  • CSS uses the prefix . for classes and # for IDs.
  • CSS rules also cascade (“Cascading” style sheets so they are executed from top to bottom.
  • Organising the CSS into related blocks can help reduce errors rather than just repeating the selectors. Much like writing any other piece of code – be methodical.
  • Styles are inherited from ancestor elements by descendent elements – except for links.
  • Use max-width to avoid horizontal scroll bars on your page.
  • CSS Specificity – the selector with the higher specificity will take precedence.
  • Type selectors such as h1{} have the lowest specificity, followed by class selectors(.example) and ID selectors (#example{}) have the highest specificity.
  • If two selectors apply to the same element, the one with the higher specificity wins.
  • CSS specificity can get quite tricky, a good example here.

Categories: Uncategorized

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