/* Assume this to be a CSS Document named "mystyles.css" */
/* → for ID's */
#big {
color: black;
font-size: xx-large;
}
/* → for Classes */
.myword {
color: blue;
font-size: 16px;
}
To call these values in your HTML codes,use the attributes ID and Class respectively in any HTML tag.
<html>
<head>
<link rel="stylesheet" href="mystyles.css" type="text/css" />
</head>
<body>
<p id="big"> This is How you use an ID selector in html </p>
<p class="myword"> This is How you use a Class selector in html </p>
</body>
</html>
it will look like this on your browser
This is How you use an ID selector in html
This is How you use an Class selector in html
As you can see, it can call up those selectors in your CSS document to affect your HTML document on the particular element it was placed.
The id selector is used to specify a style for a single, unique element.
#mylang {
color: red;
border: 1px solid black;
text-align: right;
}
In our HTML document the code will be:
<html>
<head>
<link rel="stylesheet" href="mystyles.css" type="text/css" />
</head>
<body>
<p id="mylang"> IDs only can affect one element at a time, you can't
call ID of different values on the same element, it won't work.</p>
</body>
</html>
it will look like this on your browser
IDs only can affect one element at a time, you can’t call ID of different values on the same element, it won’t work.
N/B : Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.
E.g
.myword {
color: blue;
}
.paraword {
background-color: gray;
}
.center {
text-align: center;
}
In our HTML document the code will be:
<html>
<head>
<link rel="stylesheet" href="mystyles.css" type="text/css" />
</head>
<body>
<h3> This is a random text, Oh No! </h3>
<p class="myword paraword center"> Can you see how all
classes were used here</p>
</body>
</html>
it will look like this on your browser
This is a random text, Oh No!?
Can you see how all classes were used here
You can also specify that only specific HTML elements should be affected by a class.
In the example below, all p elements with class="center" will be center-aligned:
p.center {
text-align: center;
}
In our HTML Document, the code will be:
<html>
<head>
<link rel="stylesheet" href="mystyles.css" type="text/css" />
</head>
<body>
<h3> Can you see how only the p element is affected? </h3>
<p class="center"> Only the p element is aligned </p>
</body>
</html>
it will look like this on your browser
Can you see how only the p element is affected?
Only the p element is aligned
N/B: Do NOT start a class name with a number! This is only supported in Internet Explorer. If using multiple classes on an element, give a single space after each class name.
Grouping of Elements (Div and Span)
Now you have a basic knowledge of how to use IDs and Classes in your HTML document, now in order for you to be able to group up elements in HTML, you'll use the HTML tags <div> & <span>. In a good way, these element basically does nothing on their own, but with CSS, they can arrange almost anything in your Web page. div and span uses the HTML attributes of ID and Class to structure a document.
Grouping with Span
Span tag is what you can call a neutral element, but with CSS it can add fancy and nice effects on your HTML document especially with Texts. to define a CSS value for Span, we use the CSS selector "dot your_selector_name(.anyname)", and call up the selector in our HTML document using the "class" attribute.
For Instance if we're creating a web page, and would like to high light certain words in a different way from the normal flow, a span tag can be used in context to its normal flow. let's see an example.
span.myword {
color: red;
text-transform: uppercase;
}
In our HTML document our code will be:
<html>
<head>
<link rel="stylesheet" href="mystyles.css" type="text/css" />
</head>
<body>
<h3> My Travel Experience Article </h3>
<p > When i traveled to New York, i saw the Statue of <span class="myword">
Liberty</span>. </p>
</body>
</html>
it will look like this on your browser
My Travel Experience Article
When i traveled to New York, i saw the Statue of
Liberty.
Did you see how it worked with the other text in flow but only where we wanted the effect to take place is where we inserted the span tag.
Grouping with Div
The <div> tag is a block element, and it can be able to group up other inline elements as well as block elements. to use a div, you can include the property value in your CSS in a "#your_selector(#anyname)" and call up the selector with the ID attribute in your HTML code. a div can be used to group up elements especially in a box form. Lets see an example.
div#mybox {
color: blue;
border: 1px solid purple;
width: 400px;
background-color: white;
}
In our HTML document our code will be:
<html>
<head>
<link rel="stylesheet" href="mystyles.css" type="text/css" />
</head>
<body>
<div id="mybox"><h3> My Travel Experience Article </h3>
<p > When i traveled to New York, i saw the Statue of
Liberty. </p></div>
</body>
</html>
it will look like this on your browser
My Travel Experience Article
When i traveled to New York, i saw the Statue of
Liberty .
As you can see, it grouped the elements in a box shape, and it's properties affected every other element in our HTML document.
N/B: you can as well use a class attribute for a <div> tag as well as an Id attribute for a <span> tag but mostly its the reverse that works properly.
Keep up the practice and very soon you'll become a Pro!
Back
Main: CSS Programming
Previous Lesson: Links
Next Lesson: List & Tables
