CSS Intro

CSS is a coding language that describes the physical appearance of an HTML document (the style). CSS manipulates HTML elements to a specific style, these styles are located in the style guide.

What is CSS?

CSS stands for Cascading Style Sheets. Using CSS can save you a lot of work by giving you control over multiple web pages all at once. CSS allows for styles to be done inline on the page or can be stored in an external stylesheet with the extension .css

Why use CSS?

CSS is used to define styles for your web pages, including the design, layout, and variations for different types of devices and screens.

CSS Solved a Big Problem

HTML was never intended to contain tags for formatting a web page, it was created to describe the content within the page such as Headings, images, videos, and links. On October 10, 1994, Håkon Wium Lie was working with Tim Bernes-Lee at CERN on a styling language to help solve the styling issues at the time. The World Wide Web Consortium presented W3C CSS Recommendation (CSS1) in 1996. CSS 3 was started in 1998 and underdevelopment until 2014. Currently, there are over 50 css3 modules.

Advantages of CSS

  • Consistently Efficient
    • CSS improves web efficiency by allowing the implementation and adjustment of elements across the whole website with just a few lines of code.
  • Improves Site Speed
    • Less code means faster load time.
  • Low Maintenance
    • One style sheet or web page gives developers less to worry about and maintain.

Disadvantages of CSS

  • Fragmentation
    • CSS renders different dimensions across each browser. Programmers are required to test across multiple browsers and devices to ensure consistently.
  • Different Levels
    • There are 3 different levels to CSS currently (CSS, CSS2, CSS3) and CSS4 is in production, this causes confusion for developers and browsers.

Next Generation CSS - SCSS vs. SASS

To improve upon some of the limitations in CSS, SASS (Syntactically Awesome Stylesheets) was created. This stylesheet language was initially designed by Hampton Catlin and developed by Natalie Weizenbaum. This scripting language is compiled into CSS and consists of 2 syntaxes.

  • The original syntax, also called "the indented syntax" uses indentation to separate code blocks and newline characters to separate rules.
  • The newer syntax (SCSS - Sassy CSS), uses blocks similar to CSS, and uses braces to denote code blocks and semicolons to separate lines within a block.

"Learning the Basics styling using SCSS/SASS"

On March 15th Gregory Foreman will be giving a special presentation at LEARN academy going over the basics of how to style websites using SCSS and SASS.

RSVP on our Meetup page

Want some more CSS knowledge?

Visit W3Schools