Skip to content

Latest commit

 

History

History

2-CSS

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
CSS basic
CSS basic
 
 
CSS flexbox
CSS flexbox
 
 
CSS grid
CSS grid
 
 
README.md
README.md
 
 

README.md

CSS NOTES

CSS logo

CSS Basic

CSS Flexbox

CSS Grid

CSS Basic

Adding CSS to HTML (3 Methods & Precedence)

<!-- Inline CSS -->
  <h1 style="color: red;">Hello World</h1>

<!-- Internal CSS -->
<head>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>

<!-- External CSS -->
<head>
    <link rel="stylesheet" href="style.css">
</head>

Understanding CSS Syntax

selector {
    property: value;
}

CSS Selectors and Specificity

/* Element selector */
h1 {
    color: red;
}

/* Class selector */
.heading {
    color: blue;
}

/* Id selector */
#title {
    color: green;
}

/* Specificity example */
.heading#title {
    color: yellow;
}

Working with CSS Fonts

/* Font family */
body {
    font-family: Arial, sans-serif;
}

/* Font size */
h1 {
    font-size: 3rem;
}

/* Font weight */
h2 {
    font-weight: bold;
}

Using CSS Color Effectively

/* Hex code */
h1 {
    color: #ff0000;
}

/* RGB */
.heading {
    color: rgb(0, 255, 0);
}

/* HSL */
#title {
    color: hsl(240, 100%, 50%);
}

CSS Backgrounds and Gradients

/* Background color */
body {
    background-color: #fff;
}

/* Background image */
.container {
    background-image: url(bg.jpg);
}

/* Linear gradient */
.heading {
    background: linear-gradient(to bottom, #ff0000, #0000ff);
}

/* Radial gradient */
.title {
    background: radial-gradient(circle, #ff0000, #0000ff);
}

Creating CSS Borders and Shapes

/* Border */
.container {
    border: 1px solid black;
}

/* Border radius */
.box {
    border-radius: 10px;
}

/* Box shadow */
.heading {
    box-shadow: 5px 5px 10px #888888;
}

/* Triangle */
.triangle {
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-right: 50px solid transparent;
}

/* Circle */
.circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: red;
}

Understanding the CSS Box Model

/* Content box */
.container {
    width: 300px;
    height: 200px;
}

/* Padding box */
.container {
    padding: 10px;
}

/* Border box */
.container {
    border: 1px solid black;
}

/* Margin box */
.container {
    margin: 10px;
}

Formatting CSS Text

/* Text alignment */
h1 {
    text-align: center;
}

/* Text decoration */
a {
    text-decoration: none;
}

/* Text transformation */
.heading {
    text-transform: uppercase;
}

/* Letter spacing */
.title {
    letter-spacing: 2px;
}

/* Line height */
p {
    line-height: 1.5;
}

Creating CSS Links

/* unvisited link */
a:link {
    color: blue;
}

/* visited link */
a:visited {
    color: purple;
}

/* mouse over link */
a:hover {
    color: red;
}

/* selected link */
a:active {
    color: green;
}

Using CSS Display Property

/* block-level element */
div {
    display: block;
}

/* inline-level element */
span {
    display: inline;
}

/* inline-block element */
img {
    display: inline-block;
}

Positioning Elements with CSS

/* static positioning (default) */
div {
    position: static;
}

/* relative positioning */
div {
    position: relative;
    top: 10px;
    left: 20px;
}

/* absolute positioning */
div {
    position: absolute;
    top: 10px;
    left: 20px;
}

/* fixed positioning */
div {
    position: fixed;
    top: 10px;
    left: 20px;
}

/* sticky */
div {
    position: sticky;
}

CSS Media Queries

/* Small screens (mobile devices) */
@media only screen and (max-width: 767px) {
    /* Styles go here */
}

/* Medium screens (tablets) */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    /* Styles go here */
}

/* Large screens (desktops) */
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
    /* Styles go here */
}

/* Extra large screens (large desktops) */
@media only screen and (min-width: 1280px) {
    /* Styles go here */
}

CSS Flexbox

Display Property

/* Set the container to a flexbox */
.container {
    display: flex;
}

Flex Direction Property

/* Set the main axis direction */
.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

Flex Wrap Property

/* Allow items to wrap */
.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

Flex Flow Property

/* Combine flex-direction and flex-wrap */
.container {
    flex-flow: row wrap;
}

Justify Content Property

/* Align items along the main axis */
.container {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

Align Items Property

/* Align items along the cross axis */
.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

Align Content Property

/* Align wrapped lines along the cross axis */
.container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

Gap Property

/* Set the gap between flex items */
.container {
    gap: 10px;
}

Order Property

/* Change the order of flex items */
.item {
    order: 2;
}

Flex Grow Property

.item {
    flex-grow: 1;
}

Flex Shrink Property

/* Allow an item to shrink to fit available space */
.item {
    flex-shrink: 1;
}

Flex Basis Property

/* Set the initial main size of an item */
.item {
    flex-basis: auto | 0 | 50%;
}

Flex Property

.item {
     flex: 3 5 500px; /* shorthand for flex-grow flex shrink flex-basis */
}

Align Self Property

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

CSS Grid

Grid Template Columns

/* Defines the columns of the grid */
.container {
    gird-template-columns: 100px 100px 100px;
}

Grid Template Rows

/* Defines the rows of the grid */
.container {
    grid-template-rows: 100px 100px 100px;
}

Grid Template Areas

/* Defines the areas of the grid */
.container {
    grid-template-areas:
      "header header header"
      "content content sidebar"
      "footer footer footer"
}

Gap

/* Specifies the size of the gap between grid items */
.container {
    gap:10px;
}

Justify Items

/* Aligns items along the inline (row) axis */
.container {
    justify-items: center;
}

Align Items

/* Align items along the block (column) axis */
.container {
    align-items: center;
}

Justify Content

/* Aligns the grid along the inline (row) axis */
.container {
    justify-content: center;
}

Align Content

/* Aligns the grid along the block (column) axis */
.container {
    align-content: center;
}

Grid Column Start

/* Specifies the start position of a grid item along the inline (row) axis */
.item {
    grid-column-start: 1;
}

Grid Column End

/* Specifies the end position of a grid item along the inline (row) axis */
.item {
    grid-column-end: 3;
}

Grid Row Start

/* Specifies the start position of a grid item along the block (column) axis */
.item {
    grid-row-start: 1;
}

Grid Row End

/* Specifies the end position of a grid item along the block (column) axis */
.item {
    grid-row-end: 1;
}

Grid Area

/* Specifies both the start and end positions of a grid item */
.item {
    grid-area: 1 / 1 / 3 / 3; /* start-row / start-column / end-row / end-column */
}

Justify Self

/* Aligns a grid item along the inline (row) axis. */
  .item {
    justify-self: center;
  }

Align Self

/* Aligns a grid item along the block (column) axis. */
  .item {
    align-self: center;
  }