HOW CSS IS APPLIED TO HTML ELEMENTS?
There are specific styles for each element and CSS is applied to those elements on a web page by declaring them. A style declaration looks somewhat like this:
selector {
property: value;
}
Let’s have a look at each of these pieces separately:
Selector
The piece of content that we want to style and target is called selector. It is either a Class Name or an HTML element.
In an HTML element, the tag name is used without opening and closing the bracket. For instance, the <p> (or paragraph tag) would simply be:
p
A Class Name should always begin with a dot. i-e,
.big-font
Let’s move towards the property, we’ll go deep into classes in a bit.
Property
Curly braces are usually used in Properties and their respective values:
p {
}
All web browsers understand properties as they are considered pre-defined terms. They are things like:
font-size, font-family, color, etc.
p {
font-size:
font-family:
color:
}
We always place a colon after a property (:)
Value
To assign to a property, we need a variable or particular style like value. For example:
p {
font-family: Arial;
font-size: 16px;
color: gray;
}
We always place a semi-colon after a value(;)
So the example above is instructing the browser that all page titles (or any element surrounded by a <p> tag) must be displayed in Arial font in the color grey and at 16 pixels in size.
Seems easy, right? Let’s do another example.
a {
color: pink;
font-weight: bold;
text-decoration: none;
}
This example above is instructing the browser to make all links (tags that look like this: <a>) within our blog should be bold, displayed in the color pink, and not underlined.
(By default browser display links in blue with an underline).
text-decoration: All browsers understand text decoration as a pre-defined property. As compared to underline: it’s quite difficult to use and understand. Once a beginner step in learning CSS for a while, he/ she begin to memorize the more common properties. But to make it easier, developers create different sheets.
Make sense so far?
CSS QUESTIONS?
Soooooo what did you think after reading this blog? Did this make sense? Was it too complicated or easy to understand? Your feedback in the comments below will help me create the best experience for you!
