Direct Targeting CSS to Element ID and Class
Direct Targeting CSS to Element ID and Class, after we have created our Html index file. There are 3 ways to target our CSS Styling in relational to the HTML tag or code that we created.
- Targeting CSS Styling via Element
- Targeting CSS Styling via ID
- CSS via Class
Before we begin to target any CSS to the above mention method. We probably should have an idea of What is an Element ? An ID or a Class?
What is an Element?
An Element has a Start Tag and an End Tag, The content will always go between the Element
eg: <h1> I am an Element , and i contain between the Start Tag and End Tag </h1>
What is a Class?
Class is use inside an Element , eg :<div class=””> or use as a pointer to an Element ,reference to HTML to Do the Styling.
What is an ID ?
The Id is used inside the element, and serve as a pointer to CSS and JavaScript, to control the element with specific ID.
Targeting CSS towards an Element?
Now we check out the below code on how to target CSS towards an Element
Below show the HTML File
<!DOCTYPE html> <html> <body> <h1>This is a Heading</h1> <p>This is a Paragraph.</p> </body> </html>
Target the Element in my CSS File
body{
background-color:#cb88ff;
}
h1{
color:blue;
font-size: 50px;
}
Targeting CSS towards a Class
Now we check out the below code on how to target CSS towards a Class
Probably we will use a div tag to showcase how class is being used .A Div Tag is normally used as a division or block of section in HTML.
At the code below, i created a Div tag, between the Body tag to divide the HTML into Section, inside the Div tag i will create a box in CSS.There
will be a Paragraph inside the Box of the Div Tag.
Below show the HTML File
<!DOCTYPE html> <html> <body> <h1>This is a Heading</h1> <div class="box"> <p class="colorme">I am inside the Box</p> </div> </body> </html>
Target the Class in CSS File
.box{
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 200px;
margin-left: 80px;
background-color: lightblue;
}
p.colorme {
color: green;
}
Targeting CSS towards an ID
Below show the HTML File
<!DOCTYPE html> <html> <body> <h1>This is a Heading</h1> <div id="box"> <p>I am inside the Box</p> </div> </body> </html>
Target the ID in CSS File
#box{
background-color: lightblue;
}
Leave a Reply