CSS - herougo/SoftwareEngineerKnowledgeRepository GitHub Wiki

CSS

Source:

Color, Background, Font

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            h1 {
                color: red; <!-- alternative values #ff0000 or rgb(255,0,0)
                text-align: center; <!-- other values: left, justify, right -->
            }
            body {
                background-image: url("chandler.jpg");
                background-repeat: no-repeat;     <!-- counteracts default behaviour to repeat the image -->
                background-position: 500px 100px; <!-- 500 from left and 100 from top -->
            }
            p {
                font-family: Georgia, Verdana, Serif;  <!-- uses font which is supported trying from left to right -->
                font-style: italic;  <!-- italicizes the text -->
                font-size: 36px
                font-weight: bolder; <!-- thickness of the letters (other values include bold, lighter) -->
            }

            p {
                line-height: 1.5
            }
        </style>
    </head>
    <body>
        <h1>This is red</h1>
        <p>This is text</p>
    </body>
</html>

Omitted:

  • letter-spacing, word-spacing

Link States, Box Model, Table, Div, Span

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            a:link {
                color: blue;
            }
            a:hover {
                color: red;
            }
            a:active {
                color: orange;
            }
            a:visited {
                color: purple;
            }
            h1 {
                border-style: solid;
                border-width: 10px;
                border-color: orange;
                <!-- the above can be done with "border: 10px solid orange" -->
                border-bottom color: blue;
                padding: 25px;
                padding-top: 55px;
                margin: -5px;
            }
            table {
                border: 2px solid black;
            }
            tr { <!-- inherited by children th and td -->
                background-color: orange;
            }
            th {
                color: white;
            }
            td {
                border: 5px solid green;
            }
            span { <!-- span is for  -->
                font-size: 28px;
                color: lightgreen;
            }
            div {
                color: orange;
            }
            .redpara {
                color: red;
            }
        </style>
    </head>
    <body>
        <h1> with a border that is orange on all sides, except with blue on the bottom</h1>
        <p><a href="chandler.html">Click Me</a></p>
        <table>
            <tr>
                <th>1st Column Heading</th>
                <th>2nd Column Heading</th>
            </tr>
            <tr>
                <td>1st row (column 1) entry</td>
                <td>1st row (column 2) entry</td>
            </tr>
        </table>
        <div>
            <p><span>This text</span> is different than the rest (lightgreen with a size of 28px).</p>
            <p>This text is orange from the div.</p>
            <p class="redpara">This text is red from the class.</p>
        </div>
    </body>
</html>

CSS Box Model

Margin-Border-Padding Model

  • box-sizing: border-box makes the height and width include the padding and border

Selectors, Position

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            <!-- select everything
            * {
                color: blue;
            }
            -->
            div p {  <!-- descendant selector -->
                color: red;
            }
            body > p {  <!-- child selector -->
                color: blue;
            }
            .relpos {
                position: relative;
                top: 100px;
                left: 100px;
            }
            .abspos {
                position: absolute;
                top: 50px;
                left: 80px;
            }
            .fixpos {
                position: fixed;
                top: 0px;
                right: 0px;
            }
        </style>
    </head>
    <body>
        <div>
            <p>Red text</p>
        </div>
        <p>Blue text</p>
        <p class="relpos">100px left and 100px from the top "relative" to where it would have been without relpos</p>
        <p class="abspos">80px left and 50px from the top of the parent element</p>
        <h1 class="fixpos">Top-right text no matter how much you scroll</h1>
    </body>
</html>

Levels of Style Sheet Levels

  1. Inline (i.e. style="...")
  2. Document level (i.e. style tags)
  3. External Style Sheet (i.e. link tag with mystyle.css)
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="mystyle.css"> <!-- note there's no </link> -->
        <style type="text/css">
            h1 {
                color: orange;
            }
        </style>
    </head>
    <body>
        <h1>This is orange</h1>
        <h1 style="color:blue">This is blue</h1>
    </body>
</html>

CSS Variables

Source: https://www.youtube.com/watch?v=oZPR_78wCnY

The :root selector matches the document's root element.

:root {
  --div-background-color: red;
}

.left-section {
  --div-background-color: blue; /* overwrites left section's version of the variable */
}

.child {
  background-color: var(--div-background-color);
}
document.documentElement.style.setProperty('--div-background-color', '#333')

Display

Source: https://www.w3schools.com/cssref/pr_class_display.php

Values

  • inline: Displays an element as an inline element (like span). Any height and width properties will have no effect. This is default.
  • block: Displays an element as a block element (like p). It starts on a new line, and takes up the whole width
  • inline-block: Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values
  • none: The element is completely removed

BEM

Sources:

Stands for blocks, elements and modifiers

Examples

/* block */
.card {
  margin: 2em;
}

/* modifiers */
.card--light {
  background: #eee
}

.card--dark {
  background: #333;
  color: white;
}

/* other example names: --size-big, --shadow-yes*/

/* elements */
.card__image { /* image contained in the card */

}

.card__title {

}

Position (Again)

Sources:

.thing {
  position: static; /* default */
  top: 100px; /* does nothing because static is being used */
}
.thing-relative {
  position: relative; /* similar to static, but top etc work */
  top: 100px;
  /* adjusted away from its normal position
     other content is not adjusted to fit the gap left behind */
  z-index: 1;
  /* - determines overlap priority (higher means closer to the front)
     - only works when position is not static
  */
}
.thing-absolute {
  position: absolute;
  /* - positioned relative to the nearest positioned ancestor
       (i.e. ancestor with position relative else the document)
     - element are removed from the normal flow, and can overlap elements */
  
}
.thing-fixed {
  position: fixed;
  /* - positioned relative to the viewport, which means it always stays
       in the same place even if the page is scrolled
     - doesn't leave a gap in the page where it would normally have been located */
}
.thing-sticky {
  position: sticky;
  /* toggles between relative and fixed, depending on the scroll position.
     It is positioned relative until a given offset position is met in the
     viewport - then it "sticks" in place (like position:fixed). */
}

Inheritance

Source:

The following properties are inherited from parents by default.

  • color
  • font
  • text-align
  • direction
  • visibility
  • word-spacing

Media Queries

.hi {
  color: red;
}

/* all screen types (including print) and width <= 500px
@media all and (max-width: 500px) {
  .hi {
    color: blue;
  }
}
/* equivalent syntax */
@media (max-width: 500px) {
  .hi {
    color: blue;
  }
}

@media (max-width: 500px) and (orientation: landscape) {
  /* and */
}
@media (max-width: 500px), (orientation: landscape) {
  /* or */
}

Note that CSS reads from top to bottom, so blue overwrites red for widths <= 500px.

Margin Revisited

Source: https://www.w3schools.com/cssref/css_pr_margin-inline.php

  • margin-inline and margin-block: "horizontal" and "vertical" (wrt language direction) versions of margin (default 0).
  • margin-inline: auto centres content "horizontally".

picture Tag

picture contains 1 img tag and zero or more source tags.

<picture>
  <source srcset="/media/cc0-images/surfer-240-200.jpg" media="(orientation: portrait)" />
  <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" />
</picture>

source shows source image for particular situations and img provides fallback image.

main Tag

Sources:

The main HTML element represents the dominant content of the body of a document.

The content inside the main element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

Note: There must not be more than one main element in a document. The main element must NOT be a descendant of an article, aside, footer, header, or nav element.

article Tag

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article

The article HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

Flexbox

Source: https://www.youtube.com/playlist?list=PLC3y8-rFHvwg6rjbiMadCILrjh7QkvzoQ

  • Flexbox involves a container its items.
  • Axes are the main axis (left to right by default) and the cross axis.
    • main start to main end (length of main size), cross start to cross end (length of cross size)

Flex container properties with possible values

  • display
    • flex, inline-flex (inline flex container that wraps around content)
  • flex-direction
    • row (default left to right), row-reverse, column, column-reverse
  • flex-wrap
    • nowrap (default), wrap (like text wrapping), wrap-reverse (pushes items above instead of below for wrap)
  • flex-flow: shorthand for (flex-direction) (flex-wrap)
  • justify-content: justify based on main axis
    • flex-start (items "float" at start), flex-end (items "float" at end), center
    • space-between (Item (space) Item (space) Item)
    • space-around ((space) Item (space) (space) Item (space) (space) Item (space))
    • space-evenly ((space) Item (space) Item (space) Item (space))
  • align-items: cross axis aligning of items
    • stretch (default), flex-start (justify start on cross axis), flex-end (justify end on cross axis), center, baseline (lines up bottoms of text regardless of padding)
  • align-content: cross axis aligning of multiple lines of items (NOTE: SIMILAR TO align-items)
    • flex-start, flex-end, center, stretch, space-between, space-around

Flex item properties

  • order: order of items (not advised to use)
    • default 0
  • flex-grow: remaining space is divided based on the grow values
    • default 0 (no growth)
    • all items having 1 -> items GROW evenly
    • 3 1 0 0 -> 1st child gets 0.75=(3/(3+1+0+0)) of the extra space in additional to its original space
  • flex-shrink: items shrink with smaller screen sizes (to a certain extent) relatively based shrink values
    • default 1
  • flex-basis: sets the initial size of a flex item (pixels, percentages, etc)
    • auto (default)
  • flex: shorthand for (flex-grow) (flex-shrink) (flex-basis)
  • align-self: like align-items but for individual items
    • auto (default, which means inherit from align-items of parent), flex-start, flex-end, center

Grid

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 4 equally-sized columns */
  grid-auto-rows: minmax(100px, auto); /* default row size to be min 
                                         of 150px and max of fitting the content */
  grid-template-rows: 150px; /* explicit row size for 1st row */
  gap: 10px;
}

.grid-container2 {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "sidebar content"
}
.grid-item-1 {
  grid-area: header;
}
.grid-item-2 {
  grid-area: sidebar;
}

.grid-container2-v2 {
  display: grid;
}
.grid-item-1-v2 {
  grid-column-start: 1;
  grid-column-end: 3;
  /* equivalent to grid-column: 1 / 3; */
  /* alternatively use grid-column: span 2; */
}
.grid-item-2-v2 {
  grid-row-start: 1;
  grid-row-end: 3;
  /* equivalent to grid-row: 1 / 3; */
  /* alternatively use grid-row: span 2; */
}

(Can use justify-content, align-content, etc with grid)

  • What does this mean??

Units

  • rem: relative to the HTML root font size
  • em: relative to the parent font size (e.g. 1em is the parent's font size)
  • px: pixels (self-explanatory)
  • fr: represents a fraction of the available space in the grid container
    • e.g. width: 800px, grid-template-columns: 300px 12.5% 1fr 1fr
      • 300px 100px 200px 200px
    • e.g. width: 800px, grid-template-columns: 1fr 3fr
      • 200px 600px
    • e.g. width: 1000px, grid-template-columns: 200px 0.25fr 0.25fr
      • 200px 150px 150px

Defaults

  • root font size: 16px

Zooming

aspect-ratio

Source:

Not working?

  1. Are height and width defined already on the element?

  2. Does the content cause it to expand and break the aspect ratio?

    • Solution: min-height: 0 (default is auto which lets the browser calculate the min-height which is the content I guess?)

  3. Is it “losing” to min-* and max-* properties?

Float Right

.float-right {
  Float: right;
}

Source

Advice

  • Use float for embedding images in text, but not for layout.
⚠️ **GitHub.com Fallback** ⚠️