`CSS` Learning

Selectors

/* Element Selector */
html {
}

/* Class Selector */
.gray {
}

/* ID Selector */
#unique {
}

/* Pseudo-class Selector */
a:hover {
}

/* Pseudo-element Selector */
ul ::marker {
}

/* Combinator Selector: selects direct children of <article> */
article > p {
}

Font Settings

Common ones are as follows: others starting with font are omitted

px

body {
    font-size: 22px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 300;
}

em rem

h1 {
    border: 2px dashed red;
    width: 50%;
    /* rem base the root element
and em base the itself fontsize */
    font-size: 3rem;
    padding: 0.5em;
}

How to use external fonts

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
    padding: 25%;
    font-size: 2rem;
}

/* input, button {
    font: inherit;
} */

p {
 /*    text-transform: capitalize;
    text-align: right; */
    /* text-indent: 2em; */

    /* line-height: 1.5; */
    /* letter-spacing: 0.1em; */
    /* word-spacing: 0.1em; */
    /* font-weight: 900; */
    /* font-style: italic; */
    /* font-family: 'Courier New', Courier, monospace; */
    font-family: 'Roboto', sans-serif;
}

Box Settings

box-sizing: content-box;: This is the default. In this model, the width and height of an element apply only to the content area, excluding border, padding, and margin. This is the traditional box model.
box-sizing: border-box;: In this model, the width and height of an element include the content, border, and padding, but not the margin.

h1 {
    box-sizing: border-box;
    border: 2px dashed red;
}

.container {
  border: 10px double red;
  font-size: 1.5rem;
  /*  margin-top: 1.5em;
    margin-right: 2em;
    margin-bottom: 2em;
    margin-left: 2em; */

  /* margin: 1.5em 2em 2em; */
  /* define the top right bottom left margin */
  /* margin: 1em 2em 3em 4em; */
  margin: 1.5em;
  padding: 1.5em;
  /* 
    border-top: 5px solid red;
    border-right: 10px dotted green; */
  outline: 5px solid purple;
  outline-offset: -20px;
}

Draw a Circle

<div class="circle"></div>

.circle {
  margin: 3rem auto;
  background-color: gold;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  outline: 2px solid red;
  outline-offset: 0.25rem;
  border-radius: 50%;
}

Set Color

/*  you can change the hover or focus color by changing the hue or transparent, or opacity */
a:hover, a:focus {
    /* color: hsl(189, 44%, 49%) */
    color: hsl(207, 44%, 49%, 0.8)
    /* opacity: 0.8; */
}

List Operations

ol {
  list-style-type: lower-alpha;
  padding: 0;
}

ul {
  list-style-type: square;
  list-style-position: inside;
  /* list-style-image: url('../images/checkmark.png'); */
  /* list-style: square url('../images/checkmark.png') inside; */

  text-align: center;
  color: #00f;
  line-height: 1.6;
}

ul li:nth-child(even) {
  color: red;
}

ul ::marker {
  color: red;
  font-family: fantasy;
  font-size: 1em;
  content: "ONLY $5 >> "
}

Link Styling

li a {
  display: block;
}

li a,
li a:visited {
  text-decoration: none;
  color: #333;
}

li a:hover,
li a:focus {
  background-color: #333;
  color: whitesmoke;
  cursor: pointer;
}

li:last-child a {
  border-radius: 0 0 2rem 2rem;
}

Typography Styling

.left {
  float: left;
  margin-right: 1rem;
}

.right {
  float: right;
  margin-left: 1rem;
}

.clear {
  clear: both;
}

section {
  background-color: bisque;
  border: 1px solid #333;
  padding: 1rem;
  /*  fix element overflow section block */
  /*  fix element overflow section block */
  /* overflow: auto; */
  display: flow-root;
}

.columns {
  /*  column-count: 4;
  column-width: 250px; */
  columns: 4 250px;
  column-rule:  3px solid #000;
  column-gap: 3rem;
}

.columns p {
  margin-top: 0;
}

.columns h2 {
  margin-top: 0;
  background-color: #333;
  color: white;
  padding: 1rem;
  break-inside: avoid;
  /* break-before: column; */
}

.columns .quote {
  margin-top: 2rem;
  font-size: 3rem;
  text-align: center;
  color: #333;
  column-span: all;
}

.nowrap {
  white-space: nowrap;
}

Using Position

.absolute {
  background-color: #00f;
  position: absolute;
  top: 0;
  left: 0;
  /* adjust the element layer 1 to set the top of others */
  z-index: 1;
}

.relative {
  background-color: #f00;
  position: relative;
  top: 300px;
  left: 100px;
}

.fixed {
  background-color: green;
  position: fixed;
  top: 100px;
}

footer {
  background-color: #000;
  position: sticky;
  bottom: 0;
  font-size: 3rem;
}

Using flex

.container {
  max-width: 800px;
  min-height: 400px;
  margin-inline: auto;
  border: 1px solid #000;
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
  align-content: space-evenly;
} 

.box {
  /* min-width: 100px; */
  height: 100px;
  background-color: #000;
  color: #fff;
  font-size: 2rem;
  padding: 0.5rem;

  display: flex;
  justify-content: center; 
  align-items: center;

  flex: 1 1 150px;
}

.box:nth-child(2) {
  flex: 2 2 150px;
  order: 1;
}

Using `grid`

<body>
    <header class="header el"><h1>Header</h1></header>
    <main class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </main>
    <aside class="sidebar el"><h2>Sidebar</h2></aside>
    <footer class="footer el"><h2>Footer</h2></footer>
</body>

body {
  font-family: "Roboto", sans-serif;
  min-height: 100vh;

  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: 50px auto 50px;
  grid-template-areas: 
    "hd hd hd hd hd hd hd hd hd" 
    "mn mn mn mn mn mn mn sb sb"
    "ft ft ft ft ft ft ft ft ft";
    column-gap: 0.5rem;
}

.header {
  grid-area: hd;
}

.sidebar {
  grid-area: sb;
  background-color: #00f;
  grid-area: sb;
}

.footer {
  grid-area: ft;
}

.container {
  grid-area: mn;
  min-height: 400px;
  display: grid;
  grid-template-columns: repeat(2, 1fr 2fr);
  grid-auto-rows: minmax(150px, auto);
  gap: 1rem;
}

.el {
  background-color: rebeccapurple;
  color: #fff;
  display: grid;
  place-content: center;
}

.box {
  background-color: #000;
  color: #fff;
  font-size: 2rem;
  padding: 0.5rem;
}

.box:first-child {
  background-color: #00f;
  grid-column: 1 / 4;
  grid-row: 1 / 3;

  display: grid;
  place-content: center;
}

.box:nth-child(2) {
  background-color: purple;
/*   grid-column: 1 / 5;
  grid-row: 3 / 4; */
  grid-area: 3 / 1 / 4 / 5;
}

Using `URL`

<body>
    <!-- <div class="container">
        <section class="hero">
            <figure class="profile-pic-figure">
                <img src="img/profile-800x800.png" alt="Profile Picture" title="My Profile Picture" width="800" height="800">
                <figcaption class="offscreen">Jane Doe</figcaption>
            </figure>
            <h1 class="h1">
                <span class="nowrap">Hello 👋</span> 
                <span class="nowrap">I'm Jane</span>
            </h1>
        </section>
    </div> -->
    <!-- <section class="example">
       
            <img src="img/pat1.png" alt="Pattern 1" width="200" height="200">
        
    </section> -->
    <section>
        <p class="clip">Jane</p>
    </section>
</body>

body {
  font-family: "Nunito", sans-serif;
  min-height: 100vh;
  background-color: aliceblue;
  /* background-image: url("../img/bubbles.png"), linear-gradient(to left, steelblue, #fff);
  background-repeat: repeat-y, no-repeat;
  background-position: right center; */
  
  background: repeat-y right center url("../img/bubbles.png"), no-repeat linear-gradient(to left, steelblue, #fff);
  background-size: 20%, auto;
}

.container {
  background-color: rgb(251, 210, 156);
  background-image: url('../img/map-2176x1451.png');
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
}

.hero {
  border-bottom: 2px solid #000;
  padding: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;

  background-color: hsla(0, 0%, 100%, 0.35);

}

.h1 {
  font-size: 500%;
  color: aliceblue;
  text-shadow: 2px 2px 5px #000;
  /* background-color: hsla(0, 0%, 0%, 0.403);
  padding: 0.25rem;
  border-radius: 10px; */
}

.profile-pic-figure {
  width: 35%;
}

.profile-pic-figure img {
  width: 100%;
  height: auto;
  min-width: 100px;
  border: 5px double gray;
  border-radius: 50%;
}

.example {
  margin-top: 1rem;
  padding-left: 20px;
  border: 1px solid red;
}

.example img {
  width: 25%;
  height: auto;
}

.clip {
  font-weight: 800;
  font-size: 18rem;
  text-align: center;
  background-image: url("../img/scenic-2200x1331.png");
  background-size: 100%;
  text-transform: uppercase;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Using `Media`

<body>
    <header>
      <h1>Our Staff</h1>
      <nav>
        <a href="#profile1">Joe</a>
        <a href="#profile2">Matt</a>
        <a href="#profile3">Jane</a>
      </nav>
    </header>

    <main>
      <article id="profile1" class="card">
        <figure>
          <img
            src="img/profile1-500x500.png"
            alt="Joe Coder"
            width="500"
            height="500"
          />
          <figcaption>Joe Coder</figcaption>
        </figure>
        <p><q>I code stuff.</q></p>
      </article>
      <article id="profile2" class="card">
        <figure>
          <img
            src="img/profile2-500x500.png"
            alt="Matt Designer"
            width="500"
            height="500"
          />
          <figcaption>Matt Designer</figcaption>
        </figure>
        <p><q>I design stuff.</q></p>
      </article>
      <article id="profile3" class="card">
        <figure>
          <img
            src="img/profile3-500x500.png"
            alt="Jane Dev Rel"
            width="500"
            height="500"
          />
          <figcaption>Jane <span class="nowrap">Dev Rel</span></figcaption>
        </figure>
        <p><q>I teach stuff.</q></p>
      </article>
    </main>

    <footer>
      <p>&copy; Acme Co.</p>
    </footer>
  </body>

@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");

/* || RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* || UTILITY CLASSES */
.nowrap {
  white-space: nowrap;
}

/* || GENERAL STYLES */
html {
  scroll-behavior: smooth;
}

body {
  font: 1.5rem "Nunito", sans-serif;
  min-height: 100vh;
  background-color: #475569;
  background-image: radial-gradient(whitesmoke, #475569);
  display: flex;
  flex-direction: column;
}

header,
footer {
  position: sticky;
  background-color: #1e293b;
  color: whitesmoke;
  text-align: center;
}

header {
  top: 0;
}

nav {
  background-color: #fff;
  padding: 0.5rem;
  border-bottom: 2px solid #000;
  font-weight: bolder;
  display: flex;
  justify-content: space-evenly;
}

nav a:link,
nav a:visited {
  color: #000;
}

nav a:hover,
nav a:focus {
  color: hsla(0, 0%, 20%, 0.6);
}

main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem;
}

footer {
  bottom: 0;
}

/* || PROFILE CARD */
.card {
  scroll-margin-top: 8rem;
  width: min(100%, 350px);
  background-color: #cbd5e1;
  border: 2px solid #000;
  border-radius: 15px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card figure {
  display: flex;
  flex-flow: column nowrap;
}

.card img {
  border: 5px double #333;
  border-radius: 50%;
}

.card figcaption {
  font-weight: bolder;
  font-size: 2rem;
  margin: 1rem;
  text-align: center;
}

/* || SMALL */
@media screen and (min-width: 576px) {
  main {
    justify-content: center;
    flex-flow: row wrap;
    padding: 1rem;
  }
  .card {
    width: min(100%, 400px);
  }
  .card:last-child {
    order: -1;
  }
}

/* || MEDIUM */
@media screen and (min-width: 768px) {
  nav {
    display: none;
  }
  .card {
    width: min(100%, 325px);
  }
  .card figure {
    flex-flow: column-reverse;
  }
  .card p {
    margin-top: 1rem;
  }
}

/* || LARGE */
@media screen and (min-width: 992px) {
  .card {
    width: min(100%, 400px);
  }
  .card:nth-child(2) {
    order: -1;
  }
}

/* || XL  */
@media screen and (min-width: 1200px) {
  .card {
    width: min(calc(33% - 1rem), 500px);
  }
}

/* || MOBILE DEVICE LANDSCAPE  */
@media screen and (max-height: 425px) and (min-aspect-ratio: 7/4) {
  h1 {
    font-size: 1.5rem;
  }

  nav {
    display: none;
  }

  main {
    flex-flow: row nowrap;
    justify-content: space-evenly;
    align-items: stretch;
  }

  .card {
    width: min(calc(33% - 0.25rem), 200px);
  }

Selectors​

Font Settings​

Box Settings​

Set Color​

List Operations​

Link Styling​

Typography Styling​

Using Position​

Using grid​

Using URL​

Using Media​

Selectors

Font Settings

Box Settings

Set Color

List Operations

Link Styling

Typography Styling

Using Position

Using `grid`

Using `URL`

Using `Media`