CSS

Cascading Style Sheets (CSS)

Two ways to apply:

inline CSS within html element

<h2 style="color: red;">CatPhotoApp</h2>

or create a style block

<style>
  h2 {
    color: red;
  }
</style>

where h2 is CSS selector.

CSS class selector declaration using dot is as below

<style>
  .blue-text {
    color: blue;
  }
</style>

which applies to all elements with blue-text class

<h2 class="blue-text">CatPhotoApp</h2>

font-size

h1 {
font-size: 30px;
}

font-family

h2 {
font-family: sans-serif;
}

non-standard, custom web fonts

https://fonts.google.com/

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

font-family: FAMILY_NAME, GENERIC_NAME;
font-family: Lobster, sans-serif;

Family names are case-sensitive and need to be wrapped in quotes if there is a space in the name, e.e., "Opens Sans" but quotes not to be used for the Lobster font.

The GENERIC_NAME is optional, and is a fallback font in case the other specified font is not available

image size

<style>
  .larger-image {
    width: 500px;
  }
</style>

border

<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
    border-radius: 10px;
  }
</style>

Make Circular Images with border-radius

{
  border-radius: 50%;
}