HTML <style>

5th March 2020 | Christopher Pisani

The HTML element <style> is used to add CSS styles to an HTML document without calling to an external stylesheet file. Styles can be called by a class name, id or even by tag name.

Some CSS styling example

<style>
    #example {
        color: white;
        background: black;
        padding: 20px;
        margin: 20px;
        font-size: 25px;
        border-radius: 10px;
        text-align: center;
    }
</style>

<div id="example">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

If various styles are used for the same element, there are a few steps to consider. Follow the next examples carefully to see how priority takes over styles.

Using unique id has precedence on class in CSS styles

<style>
    #useId {
        color: red;
    }

    .useClass  {
        color: orange;
    }
</style>

<div id="useId" class="useClass">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</div>

The second call in styles takes precedence.

<style>
    #useId {
        color: orange;
    }

    #useId {
        color: red;
    }
</style>

<div id="useId">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</div>

The !important statment takes precedence

<style>
    #useId {
        color: orange !important;
    }

    #useId {
        color: red;
    }
</style>

<div id="useId">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</div>

An in-line statement within the element takes precedence

<style>
    #useId {
        color: orange;
    }

    .useClass {
        color: red;
    }
</style>

<div id="useId" class="useClass" style="color:blue">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</div>

The statement with !important takes precedence over all statements

<style>
    #useId {
        color: orange;
    }

    .useClass {
        color: red !important;
    }
</style>

<div id="useId" class="useClass" style="color:blue">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</div>

Important Note :

A simple table of precedence actions
1. - id takes over class
2. - inline statment takes over id
3. - Using !important statment takes over the inline statement

Available Attributes

Attribute	Values	Functionality
media	all (default) aural (Speech synthesizers) braille (Braille feedback devices) handheld (small devices or limited bandwith) projection (Projectors) print (Print preview mode) screen (Computer size) tty (Teletypes and similar media) tv (Television devices)	The media resource optimization method
type	Media types	Media type of the style sheet