Web developer bootcamp - CSS

Web developer bootcamp - Cascading Style Sheets

The general rule

selector {
    property: value;
    anotherProperty: value;
}

 example:

/*Make All h1's purple and 56px font*/
h1 {
    color: purple;
    font-size: 56px;
}
/*Give All img's a 3px red border*/
img {
    border-color: red;
    border-width: 3px;
}

 

Write our CSS in a separate CSS file

Using the <link> tag

<link rel="stylesheet" type="text/css" href="app.css">

Or use style tag (for debug purpose)

<style type="text/css">
    li {
        color: red;
    }
</style>

Color in CSS

Hexadecimal

# + String of 6 hexadecimal numbers(from 0-F)

# red red green green blue blue

RGB

3 channels: Red, Green, and Blue. Each ranges from 0 - 255

rgb(0,0,0)

RGBA

Just like RGB, but with an alpha(transparency) channel. Ranges from 0.0 - 1.0

rgba(0,0,0,0.0)

 

Use 'color' to set text color and 'background' for background color

 

Background color, image

body {
    background: #95a5a6;
}

body {
    background: url(http://3dprint.com/wp-content/uploads/2014/11/-Rainbow_Ocean__by_Thelma1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

div{
    background: #3498db;
}

Border

border-color: purple;
border-width: 5px;
border-style: solid;

/* OR */

border: 5px solid purple;

CSS Selectors

Element Selector

Select all instances of a given element

ID Selector

Selects an element with a given ID. Only one per page!

<div>
    <p>You say yes</p>
    <p>I say no</p>
</div>

<div>
    <p>You say goodbye</p>
    <p id="special">I say hello </p>
</div>

div{
    background: purple;
}

#special {
    color: yellow;
}

Class Selector

Selects all elements with a given class

<div>
    <p class="highlight">You say yes</p>
    <p>I say no</p>
</div>
<div>
    <p class="highlight">You say goodbye</p>
    <p>I say hello </p>
</div>

div{
    background: purple;
}

.highlight {
    background: yellow;
}

Advanced Selectors

/*Star*/
/*select everything in the page*/
* {
    border: 1px solid lightgrey;
}

/*Descendent Selector*/
/* Example: select every .class or element like ul or other inside li */
li .class {

}
li a {

}

/*Adjacent Selector*/
/* select adjacent elements*/
h4 + ul {
    border: 2px solid red;
}

/*Attribute Selector*/
/* select based on any attribute */
a[href=""] {

}
input[type=""] {

}

/*nth of type*/
/* select nth of element */
ul:nth-of-type(3){

}

/* select every other element*/
ul:nth-of-type(even){

}

A CSS pseudo-class is a keyword added to the end of a selector, preceded by a colon ( : ), which is used to specify that you want to style the selected element but only when it is in a certain state.

 

Inheritence and Specificity

Inherit - select the parent element, the child element is also selected.

specificity - if multiple styles targeting one element, whichever style closest to the element(more specific) will be applied.

the specificity is calculated in a specific way

in magnitude

id selector >> class, attributes, pseudo-class selector >> type selectors

li < li a << .hello, input[type="text"], a:hover << #hello

 

Texts and fonts

/*font-family*/
p {
    font-family: Arial;
}

/*font-size*/
body {
    font-size: 10px;
}
/* relative size compared to the element closest to it*/
h1 {
    font-size: 5.0em;
}

/* relative size compared to the root element/ html element*/
h1 {
    font-size: 5.0rem;
}

/* font-weight: thickness */
p {
    font-weight: bold;
}

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

/* line-align */
h1 {
    line-align: right;
}

/*text-decoration*/
p {
    text-decoration: line-through;
}

 

The Box Model

• "In a document, each element is represented as a rectangular box.
• In CSS, each of these rectangular boxes is described using the standard box model.
• Each box has four edges: the margin edge, border edge, padding edge, and content edge."

p {
/* 1.Content - Width and Height*/
width: 200px;
/*percentage of the parent element*/
height: 50%;

/* 2.Border*/
border: 2px solid blue;
border-top: 2px solid black;

/* 3.Padding: inside the border*/
padding: 10px;
padding-left: 40px;

/* 4.Margin: space outside the border, between elements*/
margin: 100px;
margin-top: 50px;
/* top bottom right left */
margin: 20px 40px 50px 100px;
/* top&bottom, right&left */
margin: 20px auto;
}