CSS which stands for Cascading Style Sheets is one of the buddies of HTML, you will find it at the Presentation layer of the Web and it's specifically used to make HTML much more presentable and pleasing to the eyes (if done right).
CSS can be used to achieve lots of effects in a Web document, some example include:
- Changing text font size
- Adding background colors
- Creating Page Layout
- Hiding and Showing HTML Elements
- Transition and Animations
We can apply CSS to an HTML Element using any of the methods below:
- Directly to the Element
- With a
styletag within theheadElement - Using an External Style Sheet
- With JavaScript
One of the beauty of CSS is that its quite easy to get started with, but without patience you might get frustrated along the way.
Learning CSS well will go a long way in helping you figure out solutions when you find yourself in such situations. Now you might be thinking, have done a few Google searches on CSS and it seems to be quite easy at a glance, of course it is. Then you go a little deeper and come across terms like:
- Specificity
- The Cascade
- Inheritance
- Margin Collapse
- Block Formatting Context
Reading the terms above for the first time, might make you think like: I just want to apply some color, increase my paragraph font size, why do i need to care about this? Specificity? The Cascade? Inheritance? Common! . Well, starting out with CSS, these terms might seem non-existence until you work on a project and stumble on roadblocks like:
- styles not getting applied
- page layout crashing
Doing some Google searches you might get recommendation of slapping !important at any property that fails to do your bidding, you proceed with the advice and voila! it works! The time you spent on searching online could have been saved if you had learnt CSS well.
Just like HTML, there are some accessibility gotchas that we need to watch out for when using CSS, some are:
- The combination of colors to use on a web page
- Making text readable irrespective of the device accessing the document
- Making the document adapt to different screen sizes
- Hiding page objects the right way
That's it for the introduction. Next, Some history lesson.
Top comments (0)