Copy & Paste

Anpassbares Style Sheet für Webseiten

Komplett anpassbar, der Vorteil, alle wichtigen Inhaltselemente sind vorhanden und brauchen nur noch angepasst werden.
Einfach eine Datei stylesheet.css erstellen und den Text einkopieren

In die HTML / PHP Datei dann im HEAD Bereich <link rel=“stylesheet“ href=“/.include/stylesheet.css“ type=“text/css“>

@charset "ISO-8859-1"; 

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { 
    display: block; unicode-bidi: embed 
    background-color: #F0FFF0;
    color: #a70000;
    padding: 0 5em 0 0;
    margin: 5px;
    font-family: Tahoma, Arial, Verdana, Helvetica, sans-serif;
    font-weight: normal;
    font-size : 100.01%;
    }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A"; white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Runde Bilder           */
/* ====================== */
/* fuer bilder <img class="avatar" alt="" width="" height="" border="0" /> */ 
.avatar{width:80px;height:80px;border-radius:40px;border:thin solid blue; border:5px}

/* Text mit Schatten      */
/* ====================== */
.text_shadow{

                font-weight: bold;
                color:#299CCE;
                text-shadow:#C0C0C0 6px 8px 3px;
        }
.

a.text_shadow:link , a.text_shadow:visited{
text-shadow:#C0C0C0 6px 8px 3px; font-weight: bold; color: #0000FF; text-decoration: underline; display: inline;}

hr{
                width:80%;
                color:#BBC9D5;
                height:1px;
                text-align:center;
                border:0.5px; solid #BBC9D6;
                background-color:#BBC9D5;
                }

/* Formulare              */
/* ====================== */
input{
                font-family:Verdana,Arial,Helvetica,Sans-Serif;
                font-size:11px;
                border:1px solid #BBC9D5;
                color:#000000;
                -moz-border-radius: 5px;
               -webkit-border-radius: 5px;
                }
.input{
                font-family:Verdana,Arial,Helvetica,Sans-Serif;
                font-size:11px;
                border:1px solid #BBC9D5;
                color:#000000;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                background-color:#E4E4E4;
                text-decoration:none;
                display: inline;
                padding:1px 5px 1px 5px;
                margin:0;
                }
select{
                font-family:Verdana,Arial,Helvetica,Sans-Serif;
                font-size:11px;
                color:#000000;
                }

textarea        {
                font-family:Verdana,Arial,Helvetica,Sans-Serif;
                font-size:11px;
                color:#000000;
                border:1px solid #BBC9D5;

                }
searchBox{
        background: #FFFFFF url( https://business-view.photo/graphics/search-icon.png ) left no-repeat;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        background-repeat: no-repeat;
        background-position: 2px 1px;
        padding-left: 20px;
        border-width: small;
        border-color: #FF0000;
        border-style: solid;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Tables
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

table {
    margin-left: auto;
    margin-right: auto;

}

/* Headings               */
/* ====================== */
h1 {
    padding: 0.2em;
    margin: 0;
    background-color: inherit;
    color: #2F2F2F;
    text-decoration: none;
    font-size: 22px;
    font-weight: bold;
}

h2 {
    padding: 0.2em 0 0.2em 0.7em;
    margin: 0 0 0.5em 0;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
}

h3 {
    background-color: inherit;
    color: #036;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    margin: 1.3em 0 0.4em 0;
    padding: 0;
}

h4 {
    background-color: inherit;
    color: #036;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    margin: 1.3em 0 0.2em 0;
    padding: 0;
}

h5 {
    background-color: inherit;
    color: #036;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    margin: 1.3em 0 0.2em 0;
    padding: 0;
}

/* margin adjustment */
h3 + *, h4 + * , h5 + *{
    margin-top: 0;
}

/* IE confuses the + * :-(
 * so reset some things
 */

.hinweis {
    /*cursor: url(example.svg#linkcursor), url(hyper.cur), help;*/
    cursor: help;
    border-bottom: 1px dashed #0073c7;
    text-decoration: bold;
    display: inline;
    font-size: 14px;
    color: #FF0000;
}

/* glossary help [links] */
/* ====================== */
.help {
    /*cursor: url(example.svg#linkcursor), url(hyper.cur), help;*/
    cursor: help;
    border-bottom: 1px dashed #0073c7;
    text-decoration: none;
    display: inline;
}

/* nur drucken */
@media screen{
.print{display:none;}
}
/* nicht drucken */
@media print{
.noprint,.nichtdrucken,.pass,.passwort{display:none;}
body        {background-color: #C0C0C0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; margin: 12px;}
.print      {background-color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; margin: 10px;}
}

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}