# Adjusting styles based on a language

Traditionally, language HTML files would be stored separately and load language specific CSS files.  
But now we just store the language _strings_ separately and programmatically print the language strings within the same HTML file.  
Very often I find myself adjusting the style attributes a little here and there for different languages just so that it fits nicely inside a container or a navigation bar and looks the same across all languages.  
Its actually easy to set style attributes based on the language attribute, **lang** in the HTML element.

    <!DOCTYPE html>
    <html lang="fr" dir="ltr">
    <head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <style type="text/css">
    html[lang="en"] h2
    {
        color:black;
    }
    
    html[lang="hi"] h2
    {
        color:red;
    }
    </style>
    </head>
    <body>
    <h2>The quick brown fox jumps over the lazy dog</h2>
    </body>
    </html>

[This Example](http://css.co.in/examples/language-fonts.html) doesn’t change the text colour using JavaScript. JavaScript was used to change the **lang** attribute value in the **html** element.
