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
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.
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.
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.
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.
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.
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!
Recent Comments