Learn CSS Syntax
In this blog, we will discuss the syntax of CSS. We will also discuss how we can create CSS for an element that has a class attribute compared to an element that has an id attribute.
Identify CSS Syntax
Before we get started, we have to first know what each of these mean. Let’s start with the selector.
- The selector, in this case,
p, this would match the HTML element we want to style from our HTML files. - The property is what style we want to give to our element, in this case we want to give it a color. Click HERE to see a list of properties.
- The value is what we want to set it to. In this case, we want to set our color of our paragraph tags to be blue.
Let’s Get Started
Now that we know what each of these are, let’s implement CSS to our code below. Let’s also add an id to our h1 and a class attribute to our h2 , this should look like the code below:
We should get this when we open the file:
ID Attribute
When using a id attribute, we want to make sure that we provoke the # before the id of the element within our css. If I wanted to change my title to be blue, I can surely do this:
In this case is would work because we do not have 2 h1 HTML elements. What is we did have the same elements? How can I use the id attribute to change the color the that specific h1 ? We can do this:
Both of these would come to a result changing the color of our h1 HTML element to have a font color of blue.
Class Attribute
When we want to establish CSS to an HTML element that has a class attribute, we have to invoke a period . before we call the class. Let’s highlight the h2 element and change the font color to red.
Nice! What if we had two identical h2 HTML elements. Let try it. Let’s change the h1 element to an h2 . What do you think our result would be?
Our result:
We get all of our h2 elements to be red and highlighted. What if we only wanted the second h2 to be highlighted and red font color. How can we use our class attribute in order to specifically use those CSS properties on the second h2 ? Without changing our HTML file, we can do this:
Our result should be this:
We used the class attribute by calling out .subtitle that will specifically target that h2 HTML element and set the CSS properties to the text color and the background-color in order to give us a highlighted text.
Resources
For more information about CSS, check out this websites:
Also, check out this video to get more about CSS. Click here to view on Youtube
