Monday, January 7, 2019
UNDERSTANDING CSS COMMENTS AND DESCENDANT SELECTORS
CSS comments and descendant selectors are the two things I will be discussing with you in this lesson. Perhaps you may have seen something like this /*…*/, or a particular word in a sentence having a unique colour different from other words and you are wondering how it is done in the process of designing a website. Well, with me by your side today, I will lower my voice in a comprehensible tone and unleash useful information about the subject matter, including some colourful examples. So, stick with me.
1. CSS COMMENT
Comments in CSS aim at explaining or noting important information when writing code so that it will help you by the time you revisit your code. Comments are usually ignored by the browsers. In other words, it is not displayed on your web page. It is only visible in your document. We discussed extensively comment in HTML course so I won’t spend much time on it here. If you can vividly remember, we stressed that HTML comment is expressed as <!-comment->. However, in CSS, and even C++, PHP, Javascript Swift etc., a comment format is expressed like this /* comment here */.
Now, let us consider an example before jumping into the descendant selector.
Write the following codes into your text editor.
HTML
<p>CSS makes me feel like an artist.</p>
CSS
p{
Color: white;
Background color: blue;
/*Comment anything you like here*/
Font-size:300%;
}
The CSS document will look like this in your text editor
Reference the CSS in HTML document and it will look like this.
Save and open it, the result won’t be different from this below.
You will discover on the above that the comment didn’t show on the web page.
2. DESCENDANT SELECTOR
Descendant selector is primarily used to select a text(s) in a paragraph using <em> element for emphasis. In other words, when you want to do something special or unique, let’s say you want to change the background color, text font, text color, and so on, on a specific part of your code, you can you can use descendant selector.. <em> actually means emphasis. For example, if I want to change the color of the word ‘’miss’’ in the sentence ‘’I miss you.’’, I will simply put ‘’miss’’ within the <em> tag. Let us try it.
HTML
<div id="miss">
<p class="first">I <em>miss</em> you.</p>
<p>I’m sincere about it.</p>
<p class="first">I thank God.</p>
<p>I’m a programmer.</p>
</div>
CSS
#miss .first em{
color: white;
background-color: green;
font-size: 250%;
}
Reference the CSS file in the HTML document, it will look like this.
Save and open it
WRAPPING UP
I believe you’re getting on with CSS course, in case you encounter any challenge, never hesitate to drop your comment below. I will definitely respond within 30 minutes. Prepare for our next lesson.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment