How to inherit CSS Menu on each html page linked on Homepage without using any javascript and templates


Tags: html,css

Problem :

I've task at hand of creating website without using Javascript and templates. I am unable to comprehend after reading many CSS tutorials, that how to inherit same page styles and menus to all linked pages. Do I have to create menu in each pages or is there code to inherit via main.css ? I want same menu fixed on all pages for easy navigation without use of any client side scripting. my main css

/* my styles */

html{
    background: white;
}



body {
    font-family:"Verdana";

}


#page {
    width:960px;
    background-image:url("src/school.png");
    margin:20px auto;

}

nav {
    background:#001D2D;
    width:100%;
    height:50px;

}


nav a{
    display:block;
    background-color:#001D2D;
    color:#fff;
    text-decoration:none;
    padding:14.5px;
    float:left;
}

nav a:hover{
    background-color:#15A88C;
}

nav ul li:hover{
    position:relative;
    list-style-type: nones;
}

nav ul li{
    float:left;
}

edit*

I understand that I have to link css to all html page, What I want to know is that do I have to copy paste nav tag elements and recreate menu in all linked html pages to inherit css styles?. is that a good practice? any workarounds?



Solution :

I think the best way would be to include the main.css in each page you need it.

So in the html pages between the <head> tags place this line:

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

Edit:

To answer your edit, yes you have copy that portion of HTML you want if you don't want to use templates.


    CSS Howto..

    How do I change the Mailchimp subscribe button color using inline CSS?

    How to add & show 4d image in web site with css

    How to achieve this CSS layout - Answered [closed]

    How do I get the border-radius from an element using jQuery?

    How to I apply a style to only the first row (matching a class) of a table using pure css?

    How to style a subset of some text in HTML/CSS?

    How do I get a CSS class to work in my Javascript file?

    how do you set css to add an asp img?

    How to fix image to bottom right in gallery

    How to scale jumbotron bootstrap on larger monitors?

    How to generate ABBAABBA… sequence with PHP and CSS nth-child

    How to horizontally and vertically center two images on top of each other?

    How to group CSS/Javascript button behaviour? [closed]

    How can I do the following thing without inline styling?

    How to fade between classes in a conditional query

    How to change text transparency in html/css?

    How can I center the page to allow background on sides?

    Changing a DIV to “position:fixed” then change it back to “static” and show the rest of DIVs

    Change how CSS border edges meet? [duplicate]

    How to align radio buttons inside a DIV?

    How to vertically align Facebook and Twitter share buttons

    How can I clip and transform an image, adding rounded corners and perspective?

    how to have spacing html/css

    How to make CSS Multi Column layout over html to move between the columns on user click

    How to Build fieldSets with fixed width/height & 2 columns of checkboxes

    How to remove captcha image and it's textbox using css?

    With three divs, how to make one float to the right?

    How to make an inline-block box stick to the top? [duplicate]

    How to parse a specific link using a Selector CSS Query

    How to align images and unordered list