What is CSS and Why Should I Learn It?

1 post Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

I've been developing web and desktop applications years and maaaaany people ask me about CSS. I get questions about "How should I learn?", "What's the best and fastest way to learn CSS?", etc: Today I'll be answering all those questions for you.

As I explained in my What Is HTML And Why Should You Use It? post. CSS (aka Cascading Style Sheets) is used solely for styling content on the page. In CSS you are not able to add additional elements to the page or even make am email for with Formspree. It's just not possible. However, once you learn the basics of CSS and styling content it can be a lot of fun.

To make this post as simple as possible we're going to the bare bones of CSS. We won't go over everything in CSS as that'll get boring. I'm just going to show you what you need to get started and what resources you should look into before proceeding into web design or development.

If you want to learn as fast as possible I'd suggest viewing tutorials and playing around with code. The more you play, experiment, read and create the easier it'll be for you to learn the language. I suggest taking a look at Codepen as there's a HUGE community always making and building stuff. There's a lot to Codepen as well such as Preprocessors which make writing code significantly easier but we won't be getting into that today.

There are tons of resources out there where people have built frameworks to help make your page now just more stylish but also faster and more responsive like Bootstrap or even Foundation. There's also programs out there where you can design websites without writing a single line of code. Such as Webflow, Google Web Designer,
Adobe's Edge Reflow, and Macaw just to name a few and some like Webflow actually utilize the Bootstrap framework into your website.

These applications save tons of time. Although in web application development a lot of time they mostly help to build the template or foundation to the website. You generally have to do all the programming or scripting yourself.

So for starters in CSS we style elements by using what we call selectors. A selector targets a specific element, a property/attribute of that element, and or it's behavior and allows us to change the way it's styled and/or displayed on the page.

The nice thing about CSS is most of the properties that you use for styling an element, for example, are simple and predefined. For example, if I wanted to change the body which is the base of the HTML content's width, height, background, and color. In CSS those are predefined properties.
Code: Select all
body {
  width: 200px;
  height: 200px;
  background: black;
  color: white;
}
Now it can get much much more complex...
Code: Select all
#dataurl:checked ~ .dataurlbg,
#dataurl:checked ~ .dataurl {
  visibility: visible;
  opacity: 1;
}
@media all and (max-width:430px) {
  .preprocessor-tab > label {
    top: 8px;
    margin: 0;
    font-size: 1em;
  }
}
A media query, in this case, is used to change the design of the content when the browser window reaches a specific size. The ">" character styles just the children or direct descendants within that container or as we call in CSS the parent.

I don't want to keep this post to long for you and as you can see there's tons of examples already on here for you ready to get started learning CSS and with how dominant the web is nowadays I highly suggest learning HTML and CSS at the same time before diving into anything else in web development. Again I recommend taking a look at CodePen to play with code and you can also take a look at CSS Tricks to learn a lot about code.
1 post Page 1 of 1
Return to “Tutorials”