Without compatibility problems, additional code or resource files

Prettify Fonts with common CSS attributs

Tags:


Boring common fonts can be easily styled with CSS attributs. No compatibility problems, additional code or resource files with wide spreaded and established CSS/CSS2.

This selector attributs have a small size, were efficient in reading and code understanding. Refectoring or changes are very comfortable. The "efficient additional" content attribute below are more comfortable as Javascript DOM manipulations can be.

Style attributs emphasize syntactical content

  • font-variant: small-caps
  • text-transform:uppercase
  • :first-letter
  • :first-line
  • :first-child

Small-Caps

    a{
        font-variant: small-caps;
    }

Uppercase

    h2{
        text-transform: uppercase;
    }

First letter

    h1:first-letter{
        font-size: 110%;
        color: #CDF8CD;
        color: rgba(160, 242, 160, 1);
    }

First-line, In October 1993, NIOSH provided funding through its Agricultural Health Promotion System (AHPS) grant program to develop the first NASD. The database was developed at the University of Florida's Cooperative Extension Service. In October 1996, NIOSH funded a three-year program to update the database and convert the database into HTML format for delivery on the World-Wide Web. By October 1997, the entire database had been converted, a web-site was established.

    p:first-line{
        font-size: 138%;
        color: #D878D8;
        color: rgba(116, 120, 216, 1);
    }

  • First-child
  • First-child
  • First-child

    h1:first-child{
        font-size: 115%;
        color: #A0FFFF;
        color: rgba(160, 255, 255, 1);
    }

Efficient additionals

To make additional decorations near font letters, line-rows or citations. There is a simple way to do this with CSS Pseudoelements, :after and :before, and the content attribute. The content is generated for all selector which will be affected.

Each selector gets a heard

selector


    .selector:before{
        color: red;
        content: "♥";
    }

With this content attribut you can do a lot variations and helpful CSS syntax.

The content:attr( data-type ) can be used to be context sensitive for each selector. The attr() reads a setted data-type.

Set the currency for each selected element

179,-


    <style>
        .selector:after{
            content: attr(data-icon);
        }
    </style>
    <div> data-icon="€"> 249,- </div>

For e-shop, CMS or dynamic and updated webpages an auto numerator is given.

Counting with CSS

  • Product
  • Product
  • Product
  • Product

    <style>
        body { 
            counter-reset: product-enumerator; 
        }
        .selector li:before{
            content: counter( product-enumerator ". " );
            counter-increment: product-enumerator;
        }
    </style>

© Kometschuh.de | Impressum | GitHub | Facebook |