How to use tags in classes with CSS

Question

0.00/5 (No votes)

See more:

Good Morning Sir,
I am having a problem on using a classes in CSS I have so far searched in the internet but I could not find the answer so I am asking here,

I have a class in my external CSS file like this

CSS

.class
{
    h1
    {
        color:green;
    }
}

I have correctly linked the CSS to my HTML5 file using a link tag

HTML

<link href="Venture.css" type="text/css" rel="stylesheet">

But when I use the heading (h1) tags the font has no color (green)

What I have tried:

I searched in the internet. I am self-learning this so I don't know what am I missing.

I have searched about 20 web pages none of them gave me this answer,

To make my-self clear, can we create many classes in one external css file and in each class can we create styles for different tags?

CSS

.class
{
    h1
    {
        color:green;
    }
}
.class1
{
    h1
    {
        color:blue;
    }
}

If I use class then green color heading will be displayed if I use class1 blue color heading should be displayed how can I do that?

Kindly help me with this sir!

Thank you for your time sir!

Posted 5-Sep-16 4:08am

VISWESWARAN1998

Updated 5-Sep-16 9:01am

Add a Solution

4 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

NaibedyaKar · Accepted Answer · 2016-09-05T09:01:00

Solution 4

Simple use

CSS

h1
    {
        color:green;
    }

This is a very fundamental thing. I think you are new to this area. But you can be a designer master if you really put some more effort into it. Learn it from CSS Tutorial[^]. And I am sure you will do great. Good luck!!!

Posted 5-Sep-16 9:01am

NaibedyaKar

Peter Leow · Accepted Answer · 2016-09-05T05:12:00

Solution 3

Start learning CSS properly from Beginner's Guide to HTML5 & CSS3 - Styling Your First Web Page[^] and you shall be fine.

Posted 5-Sep-16 5:12am

Peter Leow

Updated 5-Sep-16 5:15am

v2

W∴ Balboos, *GHB* · Accepted Answer · 2016-09-05T04:55:00

Declaring a class in CSS is one thing - you then need to make your various elements users of the class. You can have many classes - how does an element know which class or classes to use unless you tell it? You need a good tutorial on how CSS classes are used.

Try this one (worked for me): CSS Tutorial[^]

David_Wimbley · Accepted Answer · 2016-09-05T04:10:00

Solution 1

I think what you mean to do is the following:

CSS

h1.class
{
    color:green;
}

h1.class1
{
    color:blue;
}

Or you can simply do

CSS

.class
{
    color:green;
}

.class1
{
    color:blue;
}

Which does not limit your css here to just h1 elements.

Posted 5-Sep-16 4:10am

David_Wimbley

Updated 5-Sep-16 4:51am

v3

Comments

[no name] 5-Sep-16 10:19am

Thank you for your solution sir,
I tried calling h1 your 1st option like this,
<body>
<div class="class1">

Hello world

</div>
</body>
but the color isn't displaying could help me with this?

And in the second option, Is there any way to change the attributes for the different tags

[no name] 5-Sep-16 10:21am

I am sorry the hello world has become bigger It is h1 tag

Richard Deeming 5-Sep-16 10:22am

In the second option, you're missing the . before the CSS class names. :)

David_Wimbley 5-Sep-16 10:52am

My bad, that's what I get for copy/paste. Updated...thanks

Karthik_Mahalingam 6-Sep-16 1:19am

5