8 Reasons to Learn CSS
CSS is one of the cornerstone technologies for the web. But how good is it really? And is it worth the time investment to learn?
Hello everyone, my name is Robert, and today I’m going over 8 awesome reasons why you should learn CSS.
In the last 2 decades, I’ve worked with a few different UI frameworks including Win Forms, WPF (XAML), QT3, QML, Java Spring, and Java UI for Android Development. Nothing comes even close to CSS’s simplicity, precision, and usability. Oh yes, did I mention it can run on different devices?
Learning CSS is no doubt one of the best investments you can make if you’re starting off as a programmer. Not only is it fun and easy to learn; it is also expressive, simple, and powerful.
1. It’s Simple & Elegant
CSS stands for Cascading Style Sheets and it is a language used most notably to customize the presentation of HTML elements. It allows users to easily define such attributes as fonts, colors, spacings, positionings, layouts, and much more by way of it’s intuitive selectors.
Re-usability and inheritance is built into the syntax of CSS. Whether you’re defining a class or id or you’re just selecting an HTML element, it all seems to flow seamlessly!
CSS is simply brilliant. The learning curve of CSS has got to be among the lowest of any programming language. So if you’re an artsy person or if you have a background in design, you should learn CSS.
2. Powerful Features: Shadows, Corner Radius, Image Borders, Transform (Scale, Translate, Rotate)
These features may sound very specific, but it allows for rich and immersive experience when appropriately utilized.
Shadows: This feature allows users to highlight text or images in a very fancy way. Applying this technique correctly can add a dimensions and perspective to enrich the experience.
Corner Radius: This feature can soften the look of harsh edges and make your page look and feel much more seamless. The effect can be used in conjunction with shadows to produce an even more sophisticated look.
Image Borders: This allows images to be used as your borders to provide a richer experience when creating containers.
Transforms (Scale, Translate, Rotate): This has got to be my favorite addition to CSS3. The ability to transform objects by scaling is essentially changing it’s size by some percentage. Translation is moving it along the x, y, or z axis. Rotation is allowing the object to be rotated along the x, y, or z axis. The introduction of these properties also means you can easily restore the object to it’s initial state. For instance, here is how to restore any transforms to it’s initial state: for scale, set it 100%; for translation along the x, y, and z axis set the property to 0; for rotation along the x, y, z, set it to 0. This is because these transformations now have an origin which run independently from the width, height, z-index, top, left, and other prior CSS properties. This is particularly useful when discussing animations states!
3. Animations
This is another one of my favorite features when it comes to HTML. Other languages have made animations pretty simple like XAML and QML. However, CSS is also able to make animations simple and fun.
Animations can be done in CSS3 by transitions or animations. Typically you can define a from or a to state (or a percentage) and utilize the keyframe inside a selector as an animation with some duration.
For instance, this keyframe definition below will fade in and scroll down an element.
@keyframe fadein-down {
from { opacity: 0; translateX(20px); }
to { opacity: 1; translateX(0); }
}
Assuming we have a div class called intro-title, we can apply our animation like this
.intro-title {
animation: fadein-down .7s ease-in;
}
This will apply the animation for .7 seconds and use the ease-in motion function. You can also specify a delay using the animation-delay attribute to allow users a period of time to wait before the animation starts. Negative animation delay values will skip to that point in time for the animation.
Not only does this make animations so much easier, it organizes animations into a definition list of properties to be changed from state-to-state. You can, for instance, have multiple animations keyframes running while manipulating different CSS attributes in parallel, each animation having its own delay and motion easing function. Some common attributes may include color, translation (transform), scale (transform), or opacity.
Moreover, because of the addition of transforms, the element’s original properties such as translation (on x, y, or z) will not have to alter such properties like height, width, top, or left of the object. You can set the animation so the transformation keeps the final state after the animation, have it rewind, or simply return to it’s initial state.
Once an animation is defined, it can be easily applied and reused.
4. It Influences Other Languages (XAML & QML)
Back in the late 90’s, early 2000’s Win Forms was the craze. Back then, I wanted to learn how to be a C++ hacker and build Windows Apps. Then there was MFC, and then was C# Win Forms. But looking back, it was all a joke. OOP was the bee’s knees back in the day and UI was painful, antiquated, and monolithic. I cannot believe I thought it was cool to want to learn these messy things.
Let’s fast-forward to 2010 when XAML was introduced. Not only did it utilize a lot of static programming over OOP, it introduced the concept of databinding, styling, and components. Oh yes, most importantly, it used element tags like HTML for UI code. UI development dramatically shifted for the better! There is no doubt that CSS had a tremendous impact on this shift.
In the world of QT, which is another realm of C++, it also made a shift to it’s UI in the form of QML which uses a JSON syntax and JavaScript to design the front-end. As a matter of fact, the front-end itself is an entire application which will need to interact with the C++ side of the application!
But there’s more! CSS has also influenced Android’s XML UI development and GTK+ from the Linux world.
5. It’s Easy to Read & Write
There are two ways to write CSS, block style and inline. Both ways are convenient to both write and read because the syntax is similar to a dictionary-style seen in JavaScript’s JSON. Block styles are typically great for re-usability and tidiness whereas inline is optimal for over-writing and on-the-spot style changes.
CSS allows programmers to conveniently and precisely control the presentation of a page. Reading and troubleshooting CSS is fairly straight forward as well.
6. Diverse Support for Different Devices
Everyone knows about responsive design in CSS. This allows for a page’s look to provide the user with a better experience when visiting the page. CSS has native support for tablets and mobile devices. In addition, modern UI Frameworks like Material Design can supplement native CSS to provide even more extensive layout support.
This allows a front-end application to target multiple devices and seamlessly change the experience for the user. The dramatic appearance shift may even happen independently of the actual HTML code.
7. It makes you a better coder.
Using CSS over the years has been a very interesting journey for me. It has surprised me and shifted my perspective on programming several times towards the more simplistic and practical side.
As mentioned earlier, UI coding can be very painful, but CSS seems to make it so easy. In the last 2 decades, I’ve used several technology stacks, but whenever I come back to CSS, I gain a greater appreciation for it.
It is a truly powerful language and it makes me a better coder every time I use it. To my disbelief, there are even games written purely in CSS!
https://codepen.io/finnhvman/full/xJRMJp/
8. There’s nothing else like CSS! (and it is here to stay!)
Since it’s birth in 1996 by CERN, CSS has retained almost all of it’s level 1 specifications. What’s remarkable is, ever since then, I have not seen anything quite like this technology. And there’s so much more to come. Yet, there are still more specifications to be pushed out. For more information check out the w3.org link I have provided.
https://www.w3.org/Style/CSS/current-work
CSS is an excellent tool for creative folks. It is brilliantly expressive and elegantly simple. It’s syntax is intuitive and it’s re-usability is seamless. If you’re waiting for something better, good luck.
Want More?
Join us: https://intully.com
Facebook: https://fb.com/intully
