React with Redux Certification Training
- 5k Enrolled Learners
- Live Class
So let’s take a moment to understand how CSS cascades.
CSS brought about a revolution in web-development and how people perceive the process of building a website. Prior to the existence of CSS, elements had to be styled in an in-line fashion or the style were implemented in the head section of an HTML page. changed due to the cascading nature of CSS. Here are the three major ways CSS cascades:
Now, let’s take a look at a very important concept of CSS, selectors.
Selectors, as the name suggests is a way to target specific HTML elements for styling purposes. If you are well versed with HTML, you will remember the two special attributes that can be added to any HTML elements i.e. ID and CLASS. With the help of these two attributes, CSS can be targeted at specific elements.
Let’s understand the fundamentals of these two selectors:
ID – An ID is unique. A particular ID can be only assigned to a single element. IDs are used when specific styling is being tried to be achieved over a single element. Below is a pictorial example of how to use an ID.
Class – Just like the word suggests, a class is a collective way of targetting HTML elements for styling. Classes are not unique and multiple elements can have the same class. In fact, multiple classes can also be added to the same element to achieve the desired style and look. Below is an example of the usage of classes.
Now that we know how selectors work, I’d like to bring it to your notice that there are a lot of ways to select elements on an HTML page. It’s nigh impossible to list them all out, so here’s an official link.
Ok, so we have read about how CSS selects elements on an HTML page. In this section, we will be addressing how CSS is written. Below is a picture of an example of CSS code.
So if you look at the above image, you will notice that the styling commands are written in a property & value fashion. In the picture above, the property is font-color while the value is yellow. The CSS syntax also incorporates a statement terminator in the form of a semi-colon ‘;’. The entire style in then wrapped around curly braces and then attached to a selector(.boxes here). This creates a style that can be added to a style sheet and then applied to an HTML page. This is how CSS is written everywhere.
Now, there are a lot of properties and they can have a host of values. It’s almost impossible to cover all of them in a single write up, so here’s a link to the official list of properties & values.
This brings us to the end of this “What is CSS” blog. I hope you have a general idea of what is CSS, why it is needed, and how it works.
If you’re interested in learning more about web-development, check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you Learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3).
If you are still interested If you have any question, you could post it in the comment section of this “What is CSS” blog, and we will get back to you as soon as possible.