Summary

Playing around with plain old CSS - selectors, pseudo classes, attributes, variables and more.

Very basic examples shown.

Half way down the page you can view the results.

I will do a more indepth separate post about CSS Grid and CSS Flexbox.

CSS Selectors

.para-center {
  text-align: center;
}

.para-right {
  text-align: right;
}

.para-justify {
  text-align: justify;
  max-width: 50%;
}

#para-blue {
  text-align: left;
  color: blue;
}

Colours

h4.tomato {
  background-color: tomato;
  padding: 1em;
}

h4.seagreen {
  background-color: mediumseagreen;
  padding: 1em;
}

.dodgerblue {
  color: dodgerblue;
}

Border

.tomato-border {
  border: 2px solid tomato;
  padding: 1em;
}

p.dotted {
  border-style: dotted;
  border-width: 2px;
  border-color: darkgoldenrod;
  border-radius: 6px;
  padding: 1em;
}

Background

.red-background {
  background-color: red;
  color: white;
  padding: 1em;
  opacity: 0.5;
}

Margin

.big-margin {
  margin: 50px;
  background-color: bisque;
}

Padding

.big-padding {
  padding: 50px;
  background-color: crimson;
}

Text Transformation / Spacing / Shadow

p.transform {
  text-transform: capitalize;
  text-indent: 50px;
  text-decoration: underline coral;
  letter-spacing: 5px;
  line-height: 1.8;
  word-spacing: 10px;
  text-shadow: 2px 2px 3px coral;
}

Fonts

.p1 {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-weight: bold;
  font-size: 1.5em;
}

.p3 {
  font-family: 'Lucida Console', 'Courier New', monospace;
  font-variant: small-caps;
  font-size: 3vw;
}

Links

a:link {
  color: red;
  background-color: yellow;
  padding: 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:visited {
  color: green;
  background-color: cyan;
}

a:hover {
  color: hotpink;
  text-decoration: underline;
  background-color: lightgreen;
  cursor: pointer;
}

a:active {
  color: blue;
  text-decoration: underline;
  background-color: hotpink;
}

a.one:link,
a.one:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a.one:hover,
a.one:active {
  background-color: green;
  color: white;
  cursor: help;
}

Lists

ul {
  list-style: none;
  background-color: peachpuff;
  padding: 20px;
}
ul li::before {
  content: '\2022';
  color: red;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

ol.d {
  list-style-type: lower-alpha;
  list-style-position: inside;
  background-color: blanchedalmond;
}

ol.d li {
  background-color: goldenrod;
  padding: 5px;
  margin-left: 35px;
}

Display

.nav {
  background-color: yellow;
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 0;
}

.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}

Pseudo-classes

div.divhover:hover {
  background-color: yellowgreen;
}

p i:first-child {
  color: blue;
}

p:first-child b {
  color: rgb(214, 201, 11);
}

Pseudo-elements

blockquote::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
blockquote::first-letter {
  color: black;
  font-size: xx-large;
}

Attribute Selector

a[target] {
  background-color: fuchsia;
}

a[target='_blank'] {
  background-color: yellow;
}

[title~='mysite'] {
  border: 5px solid rgb(71, 12, 233);
}

input[type='text'] {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
  padding: 15px;
  border: 1px solid rebeccapurple;
}

input[type='button'] {
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 8px;
}

input[type='text']:focus {
  border: 3px solid #555;
}

input[type='button']:hover {
  background-color: #024d05;
  color: white;
}

Columns

.newspaper {
  column-count: 3;
  column-gap: 40px;
  column-rule-style: solid;
  column-width: 1px;
  column-rule-color: lightblue;
  column-width: 100%;
}

Variables

:root {
  --blue: #1e90ff;
  --white: #ffffff;
  --red: red;
}

.bluecontainer {
  background-color: var(--blue);
  color: var(--white);
}

Media Query

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 20px;
    padding: 20px;
    border: 8px solid black;
    background: yellow;
  }
}
@media screen and (max-width: 600px) and (min-width: 300px) {
  div.example {
    font-size: 20px;
    padding: 20px;
    border: 8px solid black;
    background: pink;
  }
}

Units

Absolute

p.cm {
  font-size: 1.5cm;
}
p.mm {
  font-size: 10mm;
}
p.px {
  font-size: 16px;
}

Relative

p.em {
  font-size: 1em;
}
p.rem {
  font-size: 2rem;
}
p.vw {
  font-size: 5vw;
}
p.percent {
  font-size: 150%;
}

Gradient / Transition

#grad {
  background-image: linear-gradient(red, yellow);
  height: 200px;
  width: 100px;
  transition: width 2s;
  transition-timing-function: ease-in-out;
}
#grad:hover {
  width: 400px;
  cursor: pointer;
}

Grid

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196f3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.grid-container-name {
  display: grid;
  grid-template-areas:
    'header header header header header'
    'menu main main main right'
    'menu footer footer footer footer';
  grid-gap: 10px;
  background-color: #2196f3;
  padding: 10px;
}

.grid-container-name > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-area: header;
}
.item2 {
  grid-area: menu;
}
.item3 {
  grid-area: main;
}
.item4 {
  grid-area: right;
}
.item5 {
  grid-area: footer;
}

Flexbox

.flex-container {
  display: flex;
  background-color: DodgerBlue;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
  width: 100px;
  text-align: center;
  line-height: 70px;
}

Results

CSS Selectors

Center - Lorem ipsum dolor sit amet consectetur adipisicing elit.

Right - Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Colours

H4 Heading - Background Colour

H4 Heading - Background Colour

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Border

Heading With Border

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Background

Margin

Padding

Transformation / Spacing / Shadow

lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus, repellendus.

Fonts

lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus, repellendus.

lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus, repellendus.

Links

This is a link

This is a link

Lists

• Coffee
• Tea
• Coca Cola

1. Coffee
2. Tea
3. Coca Cola

Display

1. Home
2. About Us
3. Our Clients
4. Contact Us

Pseudo-classes

I am a strong person. I am a strong person.

Pseudo-classes

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure ut explicabo culpa incidunt hic similique sapiente excepturi ducimus doloremque molestiae beatae architecto rerum eos minus magnam omnis, modi ipsam amet?

Attribute Selector

ragrog.com.au

ragrog.com.au

Columns

Variables

Media Query

CSS Units - Absolute

Paragraph - Centimeters

Paragraph - Millimeters

Paragraph - Pixels

CSS Units - Relative

Paragraph - em

Paragraph - rem

Paragraph - vw

Paragraph - %

Gradient / Transition

Grid

Flexbox