CSS Example code

[last updated: 2024-01-22]
Drupal home page
CSS
-----

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

• text effects:
  • font-family: Georgia, "Times New Roman", Times, serif ;
    font-family: Verdana, Ariel, sans-serif ;
          The first item in the list will be activated if it exists, else the next, and so on.
          If none exist, the default font family will be used

  • font-size: 200%;

  • line-height: must be larger than font-size else things squish.

  • font-weight: [parameters] ;
    This command allows adding bold/strong styling.
    font-weight parameter values can be: normal, bold, bolder, lighter, initial, inherit,
    or a number, in 100's, from 100 to 900. 400=normal, 700=bold.

  • font-style: italic or normal or others...

  • font-stretch: ([parameter]);
    If the font style you're using has expanded versions, then this command will allow you to switch between them,
    using parameters: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded, initial, inherit

  • text-shadow: [x y blur-radius color] ;
    No spaces between parameters.
    blur-radius and color are optional, but if you don't use a color, then the added shadow will be the same color as your font,
    meaning you're just increasing the size of your character in the specified direction.

    +x projects to the right, -x to the left, +y projects down, -y projects up.
    +x and +y used together will create a shadow in the down-right direction, etc.

    You can do multiple shadows in the same command, with parameter lists separated by commas.
    This allows you to do special effects with multiple colors, for example, or to create a border around your text with:
    text-shadow: -2px -2px black, 2px -2px black, 2px 2px black, -2px 2px black ;

    (However this description is incomplete, since doing an outline as above will leave gaps in the sides that must be filled with additional shadow commands...)

  • text-transform: lowercase; ... not sure how this works...

  • text-align: [ left, right, center, justify ]
    positions text horizontally

  • setting text vertical position:
    This is more complicated ...
    For now, this trick allows you to center text vertically:
    line-height: = container height ...

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

• positioning:
  • General:
    • https://www.w3schools.com/css/css_positioning.asp
    • Positions can be specified in px (pixels), em (1 em = current font size), or vw (viewport width), or % (based on width of its container)
    • The normal position of an element:
      The normal x-axis position of an element is at the left edge of its container.
      The normal y-axis position of an element is directly below any (non-fixed, non-absolute) elements that have been placed in the container first.
      That is, the normal position of an element is determined by ignoring any fixed or absolute elements placed above it.
    • margin-...:
      • ???margin is applied to an element (or container), and is the space (outside it) between it and its container.
        true for static, relative ...
      • margin-left: 10%;
        margin-right: ...;
        margin-top: ...;
        margin-bottom: ...;
    • Position properties: top, bottom, left, right:
      • for elements with position: static, these properties do not apply, ie. they do nothing.
      • for elements with position: relative, these properties are in relation to the "normal" position of the element.
      • for elements with position: fixed, these properties are in relation to the viewport boundaries.

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

  • position an element in its container:
    Position can be designated as: static (default), relative, fixed, absolute, or sticky:
    • position: static;
      This is the default positioning mode for html elements. Position is determined by the "normal" flow of placement of elements on the page.
      Static position is not affected by position properties (top, bottom, left, or right).
      It Is affected by margin - see above.
    • margin as applied to a static element (or container), is the space (outside it) between it and its container.
      -------------------------------

    • position: relative;
      • An element with position: relative can be moved with position properties: top, bottom, left, and right.
        If moved with such position properties, the normal position of elements below are not affected.
      • A position: relative element can also be moved with margin properties.
        If moved with margin, however, the normal position of elements below are adjusted accordingly.
      • When moved with either method - position properties or margin, deltas are in relation to the "normal" position" of the element.

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

    • position: fixed;
      • The position of an element with fixed position is not affected by scrolling.
      • The position for a fixed element, when no position properties are specified, will be its "normal" position,
            ie. inside its container, in order/position in relation to any previously-defined elements in that container.
        To be more explicit:
        If a fixed element is defined with no top or bottom properties specified, then its y-axis position will be its "normal" position, that being directly below any previously-defined elements.
        If a fixed element is defined with no right or left properties specified, then its x-axis position will be its "normal" position, that being at the left edge of it's container.

        
        If any position property (top, bottom, right, or left - see below) is specified,
        then they will override the "normal" position.

      • Effect of a fixed element on "normal" placement flow:
        • As stated above, a fixed element, that is defined without any position properties, will be placed in the "normal" position as defined by its container and any elements placed above it.
        • However, its creation does not affect the "normal" flow and placement of elements defined below it.
          That is, it is "invisible" as far as determining the "normal" position of elements placed below it.
        • In other words, the "normal" position of an element will be the same,
          whether or not a fixed element is placed above it.

      • Position properties - always in relation to viewport boundaries, not the enclosing container:
        top: 10%; ... top edge of its viewport is 0%
        bottom: 20%; ... bottom edge of its viewport is 0%
        right: 20%; ... right edge of its viewport is 0%
        left: 20%; ... left edge of its viewport is 0%
        Be careful of contradictory specifications.
        eg. if you specify right and left position, then adding a specification for width is redundant/contradictory.
        I do not yet have a clear understanding of priorities in such cases.

        margin-... properties can be used instead -
        However: margin values will be in relation to the boundaries of the container,
        ie. Not the viewport boundaries...

        BUT: there is anomalous behavior I can't figure out using margin...
        Specifically, margin-left seems to work, with offset in relation to container, but margin-top makes the element disappear...

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

    • position: absolute;
      • If it's inside a container, with no position properties specified, it takes its "normal" position.
      • It does not scroll inside its container (unless it's just in the body),
        but it does scroll with the page (whether it's placed in a container or just the body).
        In other words, inside its container, it acts like it's fixed, ie. it does not scroll with other elements of the container.
      • margin properties work as usual, in reference to container boundaries.
        position properties work as usual, in ref to viewport.
      • Like a fixed position element, it is "invisible" to determining "normal" placement of any elements placed after it.

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

    • position: sticky;
      • desired behavior is for the sticky element to scroll as normal inside its container,
        until it gets to a container edge (or wherever defined with top or bottom)
        then it acts like it's fixed and stays in place and does not scroll further.
      • you can set both top and bottom properties, so the element will scroll up and down
        between the top and bottom offsets that have been defined.
      • If negative offsets are defined, the element will properly scroll to the defined positions,
        but any part of the element that goes outside its container will not be visible.

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

  • padding-left: 11em; (or -right, or -top, or -bottom)
    padding is applied to a container, and is the space between its edge and any elements placed inside it.

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

• transform:
  • transform: scale ([x, y]);
    This applies a scale/size multiplier to the x and y directions.
    In addition to the scale function, it will also do translate, rotate, skew,
    and matrix, which combines all the 2d operations into one command:
    matrix ( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() ) ;
    transform: matrix ( 1, -0.3, 0, 1, 0, 0 ) ;
    • See also: https://www.w3schools.com/css/css3_3dtransforms.asp
      for 3d transforms.

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

• color specification:
  • color: [color-name] ;
    The specifies color by name, eg. blue, green, etc. About 140 color names are defined.
    https://www.w3schools.com/tags/ref_colornames.asp
  • color: #d8da3d ; ... (this is: hex d8 = dec 216 for red, hex da = dec 218 for green, etc.)
    color: rgb (255, 20, 110) ;
    These specify color in RGB, hex or decimal. About 16 million colors are possible if you specify the RGB hex codes.
  • color: hsl ( 120, 100%, 50% ) ;
    This specifies color by hsl: hue (0-255), saturation (0-100%), lightness (0-100%).
  • color: hsla ( 120, 100%, 50%, 0.4) ;
    color: rgba ( 255, 20, 110, 0.4) ;
    rgba and hsla add a 4th parameter of opacity, a value from 0 to 1, with 0 being fully transparent.

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

• background gradients:
  • background-image: linear-gradient ( [direction, start-color, end-color] ) ;
    If direction is omitted, top-to-bottom is default.
    Linear gradient direction can be specified with: "to right", "to left",
    or corner-to-corner diagonal with: "to bottom right", "to bottom left", "to top right", or "to top left".
  • Other gradient directions can be defined by using an angle as a direction, with eg.:
    background-image: linear-gradient ( 30deg, [start-color, end-color] ) ;
  • Multiple colors can be used for creative effects:
    background-image: linear-gradient ( [color-1, color-2, color-3] ) ;

  • Not all browsers support gradient commands. It's good practice to define a backup (prior to your gradient command):
    background-color: [color] ;
  • See: https://www.w3schools.com/css/css3_gradients.asp

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

• using variables in a CSS file:
  • if for example you have a value that you use in multiple places in your css file,
    and you want to change it and all its instances, without having to actually change every place it's used,
    you can do this by defining a variable with the desired value,
    insert the variable in the css code everywhere you want to use it,
    then if you want to change it later, you change the single variable designation and all instances will be changed.
  • variable designation - in your css file:

        :root {
            --col1: #6495ed;
            --col2: #faf0e6;
        }

    This creates two variables ("custom property names"), "--col1" and "--col2"
    They must begin with two dashes: "--"

  • variable usage - in your css file:
    h1 { color: var(--col1); }

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

• Reference Links:
  (link to:) w3.org - style examples

.

.

.

eof