CSS : A simple introduction for beginners.
What is CSS:
Cascading Style Sheet aka CSS has vital role in web development. It was released in Dec, 1996 by World Wide Web Consortium and after that its has released a series of versions during the last years. We can not be a good web developer without CSS practical knowledge.
Why we use CSS:
A webpage without CSS is like a bride without makeup. With the help of CSS, we can make a website more meaningful , well structured and presentable. Using CSS3/CSS4 we can create very interactive , intuitive designs that were not possible in the past.
The first working version of CSS3 came in 2001. Main features of CSS3 were the animations ,rounded corners ,shadows, gradients, transitions, multi-columns and grid system.
There are three different ways to declare CSS:
- Inline CSS
- Internal CSS
- External CSS
Normally, we use External CSS for medium/large size projects.
Syntax:
CSS syntax is based on 3 things selector, property and value.
Selector: It can be an html tag, class or id of the element that we want to target.
Property: It is an attribute of an html element.
Value: As the name showing it would be a value that we give to property according to our requirements.
Internal and external css have 100% same syntax style but Inline css syntax look a little different. I will give one example for each to clarify the point.
Inline CSS:
<p style="color:#2e2e2e;text-aline:center;">A simple paragraph line.</p>
In above example style keyword shows thats we want to style the element <p> and color & text-align are two properties that we are giving to this element.
Internal/External CSS:
<p class = "center bold" id =”para1”> A simple paragraph line. </p>
<p class = "center bold" id =”para2”> A simple paragraph line. </p>
We can target both elements <p> using css and give them style as we want.
p{
color : #2e2e2e;
}
.center{
text-align: center;
}
#para1{
background: #fffeee;
}
#para2{
background: #adadad;
}
In the above example, We can see two special characters Dot(.) and #. Dot(.) is representing Class of the element and # sign is representing the Id of the element. Different elements can have the same class but Id should be different to each element.
A very important point that we need to know about CSS is ID always have priority over Class and then Tag. We can assume it as ID = 100, Class = 10 & Tag = 1.
For example If we have same properties with different values to that element, parser will give priority to the ID over Class and Tag.
p{
color : #ffffff;
}
#para1{
color : #2e2e2e;
}
.center{
color : #2e2e2e;
}
CSS Frameworks:
In a nutshell, CSS framework are built-in classes that web developers use to render fast, robust web pages. During the last few years CSS frameworks got huge popularity as they have reduced a lot of work for developers. Some of the most widely used frameworks are Bootstrap, Foundation, Materialize, Bulma etc.
- Bootstrap: Released by Twitter in 2011 was the first brick in the wall.
- Foundation: Aka ZURB Foundation was released in late 2011.
- Bulma: Its is quite new framework, based on flexbox.
- Materialize: A modern responsive framework designed by google.
Suggestion:
If you are new to web development & want to become pro then one should must have strong CSS skills. Like other programming languages, practical experience of css is vital. As a beginner, you can start by creating your own resume/cv or simple pages to get a better understanding of CSS properties.
According to my experience w3schools is a very good resource to understand the basics. After having enough experience CSS-Tricks would be a wise choice to get deep and advanced skills. Once you have a tight grip over vanilla CSS, pick any of the CSS framework and get your hands dirty. It will shorten your learning curve and led you towards your professional goal faster.
Resources: