CODEWITHSUNDEEP
htmlcsstags
P5music
P5music

Reputation: 3337

multiple "HTML" tags in HTML file: how to separate CSS rules when classes and id's can be the same?

I see that multiple HTML tag file is correctly rendered by the browser. I mean like two html files merged and concatenated. But if I put a STYLE region into each of the HTML parts and the classes or id's are the same I get the last css rules applied also to the first part. I ask how to make css rules acting just on the part they are inserted, even the classes and ids are the same. I need this special thing, so I am looking for a solution or a trick.

Upvotes: 1

Views: 2677

Answers (6)

Harshad Holkar
Harshad Holkar

Reputation: 1

You can't put two html tags in one css file. But you can put the style tag in every html file and from there you can refer the html tag.

For example : consider I have two files home.html and login.html

So In css in can make entry of one html tag for one file while in other html file I can simply put it in tag.

This is one css I have made for both the files.

html {
    background: #ffffff;
}

So I am keeping entry of html tag of home.html in css while for other I can write in its own html file like this

<title>Login Page</title>
<link rel="stylesheet" type="text/css" href="FeedbackManagement.css"/>

<style>html{background: green;}</style>

Hope this helps. Please see the background color for both of these files.

Home.html file

login.html file

Upvotes: 0

Starx
Starx

Reputation: 79041

Having multiple elements with same id is very error prone. Breaks on more than one occasion like

On javascript: document.getElementById('idname');

Upvotes: 0

vivek
vivek

Reputation: 2004

You can do this by replacing the classes/ids with inline code.

Consider the following 1st html file:

<html>
<head>
    <style>
        .aclass{
            color: #fff;
        }
    </style>
</head>
<body>
    <a href="#" class="aclass">xyz</a>
</body>
</html>

And this 2nd html file:

<html>
<head>
    <style>
        .aclass{
            color: #000;
        }
    </style>
</head>
<body>
    <a href="#" class="aclass">abc</a>
</body>
</html>

Now you can make the styles inline in both the files and then merge them, and final results should look like:

<html>
<head>
</head>
<body>
    <a href="#" style="color:#fff;">xyz</a>
    <a href="#" style="color:#000;">abc</a>
</body>
</html>

Upvotes: 0

Vijay Sarin
Vijay Sarin

Reputation: 1336

HTML Tags and CSS rules are entirely different in behavior. So, if u merge html files also, it will all act as a single file. Try PHP include function and include a HTML page inside another. Once rendered, it will act as a child of parent.

So for a Single HTML file if you write multiple CSS rules with same name, it will surely crash.

Upvotes: 0

stefan bachert
stefan bachert

Reputation: 9624

I think multiple html-Tags in one document are not allowed. I do not see any advantages for doing so.

When you have multiple documents, consider to use the frame or better iframe-tag

Upvotes: 0

Guffa
Guffa

Reputation: 700740

Having more than one html tag in a document is not valid HTML code. The browser will try to render the content anyway, but the separate html sections will simply be mashed together into a single document.

You can't apply separate styles to seperate html sections, because the browser will not keep the html sections separate. Anything after the first html section will just be thrown in at the end of the previous body, and the browser tries to make some kind of sense out of the complete mess.

Upvotes: 1

Related Questions