In just 10 minutes you too can be a CSS genius. Do you like style? Do you like color? Don’t hesitate say yes aloud, now! This is the CSS tutorial for you, right here on this page are all the answers.
*I do not actually cover box shadow.
Okay!
So in this quick tutorial I am going to briefly touch on div’s in HTML, basic CSS, tools for implementing CSS, and bootstrap. Bootstrap is a stylesheet with a ton of pre-built styles that you can link to elements in your HTML. People freak out about it. It is powerful and approachable. However, I typically utilize Bootstrap for its columns. More on this later.
First you should have a basic understanding of HTML and CSS syntax. I am only briefly going to look at each. First HTML’s syntax looks like this:
In short this will produce an unordered list with list items inside of it.
CSS’s syntax looks like this:
The selector is the tag or element from HTML you want to style. A selector can also be a class or id that you create in HTML. The property is the type of styling you want to do. The value is actual styling, in this case all header 1’s (h1) will have a red font color.
Okay! A page of HTML looks like this:
WOW! This guy is a great coder. Yes.
Sai-tip: Copy that code into a text editor like Sublime and save it with .html after the file name. The text editor will markup the file highlighting the different aspects: HTML tags, tag attributes, content etc.
The important element to note here are the div tags. When you are first introduced to div tags I think it helps to consider them as labels for your code. Each div tag opens and then closes. Everything in between the opening and closing tag contained within that div and therefore inherits stylings from the div.
So in the code example we have a div tag that we are thinking of as a label for our container. Our container holds everything within the body tag. The body tag holds everything you see rendered on the page.
We also have div tags for navigation, content, sidebar, and footer. Each of these sections of code correspond to what you imagine on the front-end.
CSS uses these labels as a map to navigate what is called the DOM. If you want to use CSS to make the navigation div have a blue background then you can use CSS to target that section and style it. So our HTML above with the navigation div could be selected and styled in CSS like this to produce a blue background:
WOW! This guy cannot be stopped.
Okay, so here is the point in the tutorial where I sit you down and give you a solid heart to heart. The amount to which you believe me will directly correlate to how smart you are.
Learning how CSS works will take a little practice. Having a solid conceptualization of what is happening and what tools are out there will make it dramatically easier.
Okay, I am really happy we had that talk. I am standing again and therefore back to teaching.
So the next thing you need to do is have a flashback. You have worked in Microsoft Word, sent an email, played with InDesign, or any other software that had a text-editor. Any of the ways you were able to manipulate text in those programs you can do with CSS.
For example, you can make text larger, bold, add spacing between words, lines, letters.
If you want to play around with editing text and colors, here is my recommendation. I am assuming you are using Google Chrome and an Apple computer: press command+option+i. That will open this up:
See my cursor about 50% of the way down the screen over on the left side. It is hovering over a button that will allow you to click on anything on the page to see the related HTML and CSS. In the bottom right corner is a bunch of CSS. You can select a HTML element, then edit the CSS live. You can read through the current CSS and get a sense of how things are working. You can uncheck each CSS property to see what it looks like without it!
This could easily be overwhelming, but getting in the habit of using the Chrome’s developer tools to play with CSS will help you immensely. Essentially you are providing yourself an instant feedback loop on your customizations.
Now it is time to up our game. The game upping process involves Bootstrap. You may be tempted to hold onto Bootstrap and that is okay, but yet again I think it is great to use for columns especially when just starting out.
So CSS allows you to more elaborately position HTML elements on the screen. But positioning in CSS is a little tricky. In comes Bootstrap columns. Nothing else, not tabs, not a bunch of extras that are going to convolute your learning experience. Columns!
So here is the grid model (aka columns!):
The screen is divided into twelve evenly sized columns. You can combine columns however you would like. A row all the way across will consist of twelve columns. As an example I can take 2 columns together + 4 columns together + 6 columns together to make a complete row across the screen.
Within the first two columns I could have my logo. In the next 4 I could have empty space. In the last 6 I could have a navigation. These columns have predefined styles in Bootstrap’s CSS. You simply name your div labels (class & ids) to match Bootstrap’s labels and positioning has become dramatically easier.
Here is the HTML from before with some Bootstrap labels linked up.
I want to introduce one last concept about every HTML element and how CSS can manipulate it. It is called the box model:
Content represents the text, link or whatever it is you have inside your HTML element. Each layer moving out can be manipulated to have color and size. You will see this same representation in Chrome’s inspector (command+option+i) if you switch from the “style” tab in the bottom right corner to the “computed” tab. That is it! Go forth and conquer!
BONUS:
CSS Cheatsheet, go forth and cheat!!! But honestly, cheat a lot in code because the resources are endless:
Cool color thing:
http://www.colllor.com
http://infographic.arte.tv/cinema/polar/fr/femme-fatale#/presentation
Obligatory gif:
