Style application

Style application#

This page is about various ways to align css to a specific group of elements.

Integrated#

By using style attribute inside definition of element:

%%HTML
<p style="color:red">Red paragraph</p>

Red paragraph

Inside/Outsize#

Inside#

You can use <style> tag inside <head> of html page.

Outsize#

With <link rel="stylesheet"> tag for giving reference for special css file.

Basic selectors#

You can apply some style:

to all definitions of specific tag;
to elements with specific class .class_name;
to element with specific id #id_name;
to each element of the page with universal selector *.

So the basic css syntax looks like:

    * {property_1:value_1, property_1:value_1, ...}
    <tag name 1> {property_1_1:value_1_1, property_1_2:value_1_2, ...}
    <tag name 2> {property_2_1:value_2_1, property_2_2:value_2_2, ...}
    ...
    <tag name n> {property_n_1:value_n_1, property_n_2:value_n_2, ...}
    .<class name 1> {property_n+1_1:value_n+1_1, property_n+1_2:value_n+1_2, ...}
    .<class name 2> {property_n+2_1:value_n+2_1, property_n+2_2:value_n+2_2, ...}
    ...
    .<class name k> {property_n+k_1:value_n+k_1, property_n+k_2:value_n+k_2, ...}
    #<id name 1> property_n+k+1_1:value_n+k+1_1, property_n+k+1_2:value_n+k+1_2, ...}
    #<id name 2> property_n+k+2_1:value_n+k+2_1, property_n+k+2_2:value_n+k+2_2, ...}
    ...
    #<id name m> property_n+k+m_1:value_n+k+m_1, property_n+k+m_2:value_n+k+m_2, ...}

In the following example, I use all of these options.

%%writefile style_application_files/selectors.html

<head>
<style>
  * {background-color: purple;}
  h1 {background-color: red;}
  #spec_id {background-color: green;} 
  .spec_class {background-color: yellow;}
</style>
</head>
<body>

<p>not header at all</p>
<h1>just header</h1>
<h1 class="spec_class">header with class</h1>
<h1  id="spec_id" class="spec_class">header with id</h1>
<h1  id="spec_id" class="spec_class" style="background-color: blue;">header with style</h1>

</body>

Overwriting style_application_files/selectors.html

See the results here.

Note the last example shows that properties mentioned for tag are less important than properties mentioned for class. Id properties are more important than class properties. And properties mentioned in the style attribute have the higher priority.

Combination selectors#

You can define selector relatevety other selector.

Descendant selector `A B`#

If you are using the following syntax.

A B : {property_1:value_1, property_1:value_1, ...}

Where A and B are some other selectors. You will apply properties to items belonging to selector B, but only to A’s descendant at the same time.

For example I setted blue font and red background for each element with class my_class. But by using div .my_class {...} selector I set a different background color for each .my_class instance inside div.

%%writefile style_application_files/descendant_selector.html
<header><style>
    .my_class {
        background: red;
        color: blue
    }
    div .my_class {
        background: green
    }
</style></header>
<p class="my_class">Just paragraph</p>
<div>
    <p class="my_class">Paragraph in div</p>
    <table>
        <tr>
            <td><text class="my_class">my_class</text></td>
            <td><text>some other cell</text></text></td></td>
        </tr>
        <tr>
            <td><text>some other cell</text></td>
            <td><text class="my_class">my_class</text></td>
        </tr>
    </table>
</div>
<p class="my_class">Just paragraph</p>

Overwriting style_application_files/descendant_selector.html

See the result here.

Daughter selector `A > B`#

If you are using the following syntax:

A > B : {property_1:value_1, property_1:value_1, ...}

Where A and B are some other selectors. You will apply properties to items belonging to selector B, but only to A’s daughter element at the same time (an element B is a child of element A if element B is a direct descendant of element A, i.e. there are no other levels of inheritance between them).

So in the following example I define red background for colour for each p tag. But by using the syntax .some_class > p {background: yellow} I set yellow back ground to each daughter of .some_class instances.

The main feature of the example is that I have used pargraphs:

Only paragraph - obvious red colour;
Daughter paragraph of <div class="some_class"> - obvious yellow color;
Descendant of <div class="some_class"> but not daughter - red color.

%%writefile style_application_files/daughter_selector.html
<header>
    <style>
        .some_class {
            background: red
        }
        .some_class > p {
            background: yellow
        }
    </style>
</header>

<p>some random paragraph</p>
<div class="some_class">
    <p>Test paragraph daughter of some_class</p>
    <div>
        <p>Test paragraph descendant but not daughter of some_class</p>
    </div>
</div>

Overwriting style_application_files/daughter_selector.html

See the result here.

Next element selector `A+B`#

If you are using the following syntax:

A+B : {property_1:value_1, property_1:value_1, ...}

Where A and B are some other selectors. Will apply properties to all elements belonging to the B selector, but only next to elements belonging to A within a parent.

So in following example I using syntax p+p {background:purple}. As a result every paragraph after another paragraph will have a purple background:

First paragraph - obviously nothing before that => no colour;
Second paragraph - next to the first paragraph => purple colour;
Third paragraph - next to the second paragraph => purple colour;
Forth paragraph - the first inside this div => no colour;
Fifth paragraph - next to the forth in the same div => purple color;
Sixth paragraph - next to div, not paragraph => no color.

%%writefile style_application_files/next_element_selector.html

<head>
    <style>
        p~p {background:purple}
    </style>
</head>

<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>

<div>
    <p>Fourth paragraph (in div)</p>
    <p>Fifth paragraph (in div)</p>
</div>

<p>Sixth paragraph</p>

Overwriting style_application_files/next_element_selector.html

See results here.

After element selector `A~B`#

If you are using the following syntax:

A~B : {property_1:value_1, property_1:value_1, ...}

Where A and B are some other selectors. Will apply properties to all elements belonging to the B selector, but only after elements belonging to A within a parent.

In following exmaple I use syntax #my_id~p {background: yellow}. So every paragraph after an element with id=my_id with same parent should have yellow background. See result here.

A detailed breakdown of the result:

First paragraph - obviously nothing before that => no colour;
Second paragraph - have only first paragraph before wich don’t have any id => no colour;
Third paragraph - have second paragraph before, which have an id=my_id => yellow colour;
Forth paragraph - first paragraph in the div => no colour;
Fifth paragraph - have second paragraph before, which have an id=my_id => yellow colour.

%%writefile style_application_files/after_element_selector.html
<head>
    <style>
        #my_id~p {background: yellow}
    </style>
</head>

<p>First paragraph</p>
<p id="my_id">Second paragraph with id</p>
<p>Third paragraph</p>
<div>
    <p>Fourth paragraph</p>
</div>
<p>Fiftht paragraph</p>

Overwriting style_application_files/after_element_selector.html

See result here.

Note аlways prioritise the style that is listed later. In following example I have two divs:

First div:
- First paragraph make second paragraph to have yellow background;
- Third paragraph make fourth, fifth, sixth to have purple colour;
- Sixth paragraph doesn’t return yellow colour;
Second div:
- Fist paragraph make all paragraphs after to have a purple color;
- Third paragraph doesn’t make the folowing paragraphs yellow.

%%writefile style_application_files/after_element_selector_hierarchy.html
<head>
    <style>
        #id_one~p {background: yellow}
        #id_two~p {background: purple}
    </style>
</head>
<h1>div1</h1>
<div>
    <p id="id_one">first paragraph div1</p>
    <p>second paragraph div1</p>
    <p id="id_two">third paragraph div1</p>
    <p>forth paragraph div1</p>
    <p>fifth paragraph div1</p>
    <p id="id_one">sixth paragraph div1</p>
    <p id="id_one">seventh paragraph div1</p>
</div>

<h1>div2</h1>
<div>
    <p id="id_two">first paragraph div2</p>
    <p>second paragraph div2</p>
    <p id="id_one">third paragraph div2</p>
    <p>forth paragraph div2</p>
    <p>fifth paragraph div2</p>
</div>

Overwriting style_application_files/after_element_selector_hierarchy.html

See result here.

Looks like that style for id_two was defined later so this style is preferable than style defined for id_one.

Style application

Contents

Style application#

Integrated#

Inside/Outsize#

Inside#

Outsize#

Basic selectors#

Combination selectors#

Descendant selector A B#

Daughter selector A > B#

Next element selector A+B#

After element selector A~B#

Descendant selector `A B`#

Daughter selector `A > B`#

Next element selector `A+B`#

After element selector `A~B`#