CODEWITHSUNDEEP
htmlcss
David Rasuli
David Rasuli

Reputation: 832

The way CSS works

I was wondering, if anyone could tell. Suggest I have an CSS at my website, and I'd like to use the same properties (class) at the top of the page of each page. I'll use different classes the rest of the pages. Lets say for example that I have Page1, Page2 , Page3. They all use the same CSS class for the "Welcome to my site" Label, but except of that label each page displays different data and uses different classes. So each time I move from page1 to page 3, I keep calling the same CSS.

My question is , what would be the best to do , both efficiently and purist-ly :

1.Call the same class again at each page.

2.Set a style for the head of the page so we won't call the CSS each time.

3.Use Iframe for the rest of the pages.

4.another method that I didn't mention.

--After Edit--

The best, David

Upvotes: 0

Views: 92

Answers (3)

Alice
Alice

Reputation: 1

You don't need to use iframe. body tag could have class also.

If I give body of Page1 class 'style1' and give body of Page2 class 'style2'

<span class="welcome">Welcome to my site</span>

and css is

.style1 .welcome { color:red; }
.style2 .welcome { color:blue; }

,

Page1's 'welcome message' text color will be red, and Page2's 'welcome message' text color will be blue.

This would be that you want;

Upvotes: 0

Vilx-
Vilx-

Reputation: 106904

I'm not sure what it is that you want, but if you want some common CSS across your pages, then that's where CSS links come in handy:

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

You can have as many of these as you like in a page (they have to go in <head>), so you can split your CSS in as many files as you like. Also, this allows your viewers to cache the CSS file, so they don't have to download it every time.

Example:

SuperLabel.css

.superLabel
{
    color: red;
    font-weight: bold;
    margin: 50px;
}

Page1.html

<!DOCTYPE html>
<html>
    <head>
        <title>Page 1</title>
        <link rel="stylesheet" type="text/css" href="SuperLabel.css"/>
        <link rel="stylesheet" type="text/css" href="page1.css"/>
    </head>
    <body>
        <div class="superLabel">I'm FABULOUS!</div>
        ... the rest of content ...
    </body>
</html>

Page2.html

<!DOCTYPE html>
<html>
    <head>
        <title>Page 1</title>
        <link rel="stylesheet" type="text/css" href="SuperLabel.css"/>
        <link rel="stylesheet" type="text/css" href="page2.css"/>
    </head>
    <body>
        <div class="superLabel">I'm fabulous AGAIN!</div>
        ... the rest of content ...
    </body>
</html>

Upvotes: 4

Steffen Martinsen
Steffen Martinsen

Reputation: 208

Iam not completely sure if I understand your question - but do you mean separating the header CSS from the rest of the body to improve loadtime? If thats your question, I don't think its necessary. It isn't that heavy, and the users browser usually cache it and then checks if its modified since your last visit.

Upvotes: 1

Related Questions