Main Menu

search

You are here

Home

CSS: Cascading Style Sheets

[last updated: 2024-01-25
Drupal home page
CSS example code
CSS Rule selectors:
HTML
CSS in Drupal
-----


      On This page:
  • background - html vs. css code
  • CSS rules
    • definition
    • location: internal, in-line, or external
    • syntax, multiple rules
    • rule conflicts - cascade priority
  • CSS in Drupal - see link above
  • reference/links

--------------------------------------------------------------------------------

  • Background/context:
      HTML files supply the content of a webpage.


      CSS rules supply the Style/formatting of a webpage.
      They instruct the browser to render the desired "look and feel" of the page, including such things as size, color, and placement of all elements on the page, whether text, images, or whatever.
      They also specify function, whether movements of the elements on the page, or responses to mouse or keyboard input.


      CSS = "Cascading Style Sheets". The name 'cascading' refers to a behavior of the system in which multiple rules might apply to a given element, and which rule actually gets rendered depends on the cascading priority which evaluates where the rules are placed and exactly how their syntax is constructed (more later...).

    --------------------------------------------------------------------------------

  • CSS Rules:
    • Each rule contains a "selector", a "property", and a "value":
        The 'selector' specifies where (to which element) the rule applies, eg. body, h1, ul, etc.
          'to which element' includes not only the type of element, whether, <p> or <div> or whatever,
          but also the location of the element in the code (more later...).
        • see - Rule selectors

        The 'property' is the parameter of the element you're specifying, eg. color, position, etc.
        The 'value' is the specific setting of the property, eg. red, or 4px, etc.

      • An example of a rule:

          h1 { color: red; }

          In this example, "h1" is the selector, "color" is the property, and "red" is the value.
          The property and value are separated by a colon.
          The value is followed by a semicolon.
          The property and value are enclosed in curly braces.

      • As such, each CSS rule defines some format/style for some given element.

      ------------------------------------

    • CSS rule location:
      There are 3 options for where to put CSS rules:
      They can be Internal, In-line, or external.

      • Internal:
        This is the method used with the <style> tag in the head section.
        In this method, the <style> ... </style> block contains CSS rules to define the formatting for the elements of your webpage.

          <head>
                  <style>
                        body {background-color: pink;}
                        h1 {
                            color: red;
                            text-align: center; }
                  </style>
          </head>

      • In-line:
        This method uses the style attribute inside HTML elements.
        These would normally be placed in the <body> section of your html file.
        For example:

              <p style="color:red;">Text here is red.</p>

        or:

              <p style="color:red; border:1px solid black;">Text here is red, and it has a black border.</p>

      • External:
        This method uses an external file (a "stylesheet"), a text file with a .css extension.
        Your specific stylesheet is specified in your html file using the <link> tag in the head section.

          <head>
              <link rel="stylesheet" href="[put the url of your first css file here ...] ">
              <link rel="stylesheet" href="[put the url of your second css file here ...] ">
          </head>

          The url of the css file is specified in relation to the directory where your html file is located.

        -or-
        you can import a second css file directly into your first by placing this line in your first css file:
            @import "style2.css";

        To summarize: external CSS files are text files with a list of rules like those in the examples above.

      ------------------------------------

    • CSS Rule Syntax:
      • Add comments to CSS files:
        Include comment text between " /* ... */ " delimiters.
      • Multiple property:value pairs for a given selector can be specified in the same rule:

          h1 {
              color: red;
              border: 1px solid black;
              }

          or:

          h1 { color: red; border: 1px solid black; }

        • Or you can have multiple rules for the same selector:

            h1 { color: red; }
            h1 { border: 1px solid black; }

        ------------------------------------

      • Rule conflicts - CSS Cascade rules:
        If two rules specify different behavior for the same selector and property,
        then the rules of "CSS Cascade" are applied to determine which rule takes precedence.
          CSS Cascade rules are: order, specificity, and source.
        • Order is the first cascade principle applied:
          Later rules take precedence over earlier ones.
        • Specificity is the next cascade principle applied:
          More specific selectors take precedence over less specific selectors.
          Specificity is ranked, high-to-low: ID, class, element, and pseudo-class.
        • Source is the next cascade principle applied:
          Precedence is given to "more external" sources.
          "More external" is ranked, high-to-low: user-agent stylesheet, external stylesheet, internal style code, inline style code.

        This description is still a bit sketchy/ambiguous...

      --------------------------------------------------------------------------------

    • Use .css files in Drupal: - see link above
      --------------------------------------------------------------------------------
    • Reference Links:
      (link to:) w3.org - CSS Examples

    eof

Powered by Drupal