Let me start off by saying, I LOVE CSS. Like, I could style pages with CSS all day, and probably never get bored. But there are some things I’d wish I’d known before I started using CSS, and knowing them would have definitely helped with the learning curve when I first got started.

    If you are new to CSS, or having trouble picking it up, then this is definitely one of those articles that you should bookmark. Yes, it’s possible to write basic CSS without them, but as your skills advance, it will definitely come in handy.

     

    An Overview: Everything you need to know to get started with CSS

    1. What is CSS?
    2. How to get started with CSS?
    3. What is the CSS Box Model?
    4. Selectors, properties and values
    5. What is a CSS Preprocessor?
    6.  Awesome resources for learning CSS

    What is CSS? 

    CSS or Cascading Style Sheets, is the language responsible for both styling (fonts, colors, etc) and layout (CSS Grid Model, padding, margins, etc) of an application or webpage. It is often used in combination with HTML and JavaScript to create both simple and complex projects. 

    When working with CSS, consider the following: 

    • HTML: The structure of a webpage
    • CSS: The styling and layout
    • JavaScript: How an application behaves. 

    How to get started with CSS:

    When using CSS on a webpage or application, there are three ways that you can do it:

    Inline CSS

    • You can add CSS directly to an HTML item. This is convenient when you just have 1 or 2 styling items to add to an entire application, but is otherwise frowned upon.

     

    inline css example

    Internal CSS

    • You can add CSS to a <style> component inside of the <head> section of a webpage or application. This is convenient when styling only applies to one page, but is not a good idea if your application has multiple pages.

     

    internal css example

    External CSS

    • You can add a CSS file to your directory (typically called style.css) and then link that file to the <head> section of your index.html page. This will apply the styles indicated in your CSS file to your entire webpage or application.

     

    external css example

    The CSS Box Model:

    According to the CSS Box Model, all HTML elements are considered to be boxes, and this model is used to determine the design and layout of an HTML element. When styling an HTML element, it’s important to understand the box model, especially in regards to padding and margin. 

    The CSS Box Model is made up of four items: 

    • Content: This is the area where text, images and icons appear.
    • Padding: This is the transparent space that wraps around the content.
    • Border: This item wraps around the padding and content.
    • Margin: This is the transparent space outside of the border.
    css box model

    Selectors, Properties, Values

    When using CSS, there are a few basic parts that you need to be aware of. These are the selector, property and value.

    Selectors:

    Selectors are used to indicate which element you would like to style using CSS.

    This following list contains the most common CSS selectors,  listed from least to most specific..

    Elements

    • Standard HTML elements that can be found througout the application. For instance you could assign the color red to all H1 elements, or a font-size of 20px to all <p> tags.

    Psuedo Elements

    • These elements are used to indicate a specifc state or an object. For instance, you may want to style a button when it’s being hovered over, or a link once it’s been clicked.

    Classes

    • Classes are used to identify a group of elements with similar styling and characteristics. For instance, you may have ten unordered lists on your application, but want half of them to be red, and the other half to be blue. You may apply the class .red-list to one and .blue-list to the other.

    IDs

    • An id is similar to a class, however it can only be used to identify ONE element. If you use it on more than one element, the style will only be applied to the first chronological element. In general, it’s good practice to use classes for CSS and ids for JavaScript behaviors. Ids are indicated with the “#” symbol , for instance #red-list.

    Note: Selectors can be combined in order to make very specific styles, and the most specific styles will always take precedent.

    Properties

    The property is the specific name of the aspect of an HTML element that you are changing. For instance font-size, background-color, border, etc.

    Values

    The value is the specific style that you are applying to the property. For instance 18px, orange, 1 px solid black.

    Every CSS declaration must have each of these three parts in order to take effect, and must end with a semi-colon.

    css selector, property and value

    What is a CSS Preprocessor?

     

    As you begin to dive into the world of CSS, you may start to hear about CSS preprocessors like SASS, LESS. and Stylus

    CSS preprocessors are scripting languages that extend the capabilities of CSS. Each has it’s own syntax that is compiled into regular CSS prior to the browser processing it. It doesn’t sound all that exciting, but let me tell you, when I first learned SASS my mind was blown. It made CSS easier to read, easier to apply styles across the entire site,  easier to update and definitely allowed me to style my applications much faster than using plain CSS.

    Most Popular CSS Preprocessors: 

    SASS

    Syntactically Awesome Style Sheet (yes, that’s really what SASS stands for) is a Ruby based scripting language that incorporates variables, if/else statements, for/while/each loops, nesting and mixins into it’s code.

    LESS

    Leaner Style Sheets was heavily influenced by SASS and contains many of the same features (mixins, variables, nesting), however it is a JavaScript library and requires node to run. While SASS is arguably the best CSS preprocessor out there, LESS is known for it’s user friendly documentation and more accurate error messages, which can be great for a new coder.

    Stylus

    Stylus is a Node.js based scripting language that’s been influenced by both SASS and LESS. It conveniently leaves out brackets, colons, semi-colons or punctuation all together.

    Of course, you don’t have to use a CSS preprocessor if you don’t want to, and starting out it’s good to learn basic CSS. But you should be aware of them and what their capabilities are.

     

    places to learn css

     Now that you know the basics, it’s time to jump in. Here are a list of my favorite FREE CSS resources. 

    1. Codecademy

    2. W3Schools 

    3.  Skillshare

     

    Have other questions about CSS? Know other great resources. Let me know in the comments below!