CSS Basics

View Github Repository Open presentation in a new window

cursor-education

See all presentation from cursor-education

CSS Basics

0 0

7CSS-Basics

On Github cursor-education / 7CSS-Basics

CSS Basics

CSS Selectors

                    selector {
                        rule: value;
                        rule: value;
                        rule: value;
                    }

Structure

<p id="main" class="text paragraph" 
    data-color="green">Dummy text</p>

#main {...}
.text {...}
p {...}

p.text {...}
.text.paragraph {...}

p[data-color="green"] { 
    color: green; 
}

Inline CSS

<p style="color: #D00; font-size: 22px;">Dummy text</p>

Dummy text

CSS in HEAD tag

<head>
    ...
    <style>
        .text {
            color: black;
            font-size: 22px;
            font-family: My awesome font, 
                          Verdana, Arial, 
                          sans-serif;
        }
    </style>
</head>
<body>
    <span class="text">Dummy text</span> Anyway
Dummy text Anyway

CSS in external file

<link rel="stylesheet" 
    href="http://cursor-education.github.io/.../css/style.css">


<link rel="stylesheet" href="css/style.css">

lets create 10 divs with class inner inside div with class outer, for first inner div add class first, for fifth add class fifth, attach file style.css

    <div class="outer">
        <div class="inner first"></div>
        ...
        <div class="inner fifth"></div>
        ...
        <div class="inner"></div>
    </div>

.inner {
    width: 40px;
    height: 40px;
    background: red;
    border: 3px solid black;
}
background-image: background-position: background-size: background-repeat: background-color: border-width: border-style: border-color: 
.outer {
    background: url('http://lorempixel.com/100/100/') no-repeat 0 0 grey;
}

.outer {
    background: url('http://lorempixel.com/100/100/') repeat-x 0 0 grey;
}

.outer {
    background: url('http://lorempixel.com/100/100/') repeat-x 100px 100px grey;
}

.outer {
    background: url('http://lorempixel.com/100/100/') 100px 100px grey;
}

Specificity

All

* {
    padding: 0px;
    margin: 0px;
}

Box model

* {
    box-sizing: border-box;
}

All in container

#container * {
    border: 1px solid black;
}

ID

#container {
    width: 960px;
    margin: auto;
}

All in container

#container * {
    border: 1px solid black;
}

Class

.error {
    color: red;
}

Tag

a { color: red; }
ul { margin-left: 0; }

Next

#container + p {
    border: 1px solid black;
}

Siblings after

#container ~ li {
    border: 1px solid black;
}

First level inner

#container > p {
    border: 1px solid black;
}

Imports

@import "style-1.css";
@import url("style-2.css");

W3 schoolsTutsplus

Color:

  • By hexadecimal values: #6609CF, #fc0
  • By name: white, silver, gray, black, red, orange, ...
  • RGB: rgb(255, 0, 0)
  • RGBA: rgba(0,255,0,0.3)
  • HSL: hsl(120,100%, 25%)
  • HSLA: hsla(120,100%, 50%, 0.3)

Dimensions. Relative units:

em, rem, ex, px, %

Dimensions. Absolute units:

in, cm, mm, pt, pc

Pseudoclasses

  • :active
  • :checked
  • :link
  • :focus
  • :hover
MDN

Pseudoelements

::after ::before ::first-line ::first-letter ::selection ::hover MDN

Positioning

.element {
    position: static;
    position: relative;
    position: absolute;
    position: fixed;
    position: sticky;
}

Floating

.element {
    float: left;
}

Floating

.element {
    float: right;
}

Reflow

.element {
    float: left;
}

Reflow

.element {
    float: left;
}

Clears

Clears

.footer {
    clear: both;
    float: none;
}