CSS

Syntax

• Cascading Style Sheets (abbreviation CSS), is a declarative stylesheet language for structured documents
• In a stylesheet definition, HTML tags are assigned layout properties (e. g. fonts, colours, size or position)
• Important principle of CSS: Inheritance of property values to child elements and combination of different stylesheets
• Elements can be identified or addressed on the basis of different properties:
  • Element name: a for all links
  • Classes or IDs:
    in HTML: <h1 class="special" id="border">
    in CSS: h1.special or h1#border
  • Position within the document, attributes, position in a set of elements etc.
• Different representations can be specified for different output media (screen, paper, projection, language) – important for Responsive Web Design, among other things

Examples of CSS declarations

/* Overarching for elements */
body {
  font-family: Arial,Helvetica,sans-serif;
  font-size: 14px;
  line-height: 1.6em;
  color: #000;
}
p {
  margin: 0 0 11px;
}

/* For element classes */
h1.linie {
  font-size: 28px;
  font-weight: bold;
  border-bottom: 1px solid #e6e6e6 !important;
  padding: .2em 0 .3em;
  text-decoration: none;
}
ul.spacing li {
  margin-bottom: .7em;
}

/* For elements with a specific attribute */
.class-tuc a[href] {
  color: #177665;
}

/* Elements with position within the document:
   Example: :first-child = elements that are the first child of their parent element */
ul li span:first-child {
  font-size: x-large;
}

/* Elements with position in a set of elements:
   Example: :ntn-child(2n) = every nth (second) child of the parent element */
table.zeile tr:nth-child(2n) {
  background-color: #eee;
}

/* Pseudo elements:
   Example: ::before = creates an element at the beginning of the element */
.tucicon-link::before {
  content: "\2192" "\00a0";
}