Cacher is the code snippet organizer for pro developers

CSS: Cascading Style Sheets

• Used for styling and formatting your html page
• Sheets are cascading because the sheets can apply formatting when more than one style applies.
• Linking a CSS file to your html file: include a link tag:

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

CSS Syntax

selector {
  property: value;
}

/* Ex */
p {
  color: red;
}

• A selector can be any HTML element such as <p>, <img>, <table>
• A property can be font-size, font-color, font-family...
• A value corresponds to the property and can be red (for colors) or any type of fonts (for font family)
• Always end each statement with a semi-colon!!
• You can set many properties within a selector, just remember to separate them with the semicolon!
• You can provide a list of values incase browsers do not recognize the value you set (can lead to page not behaving properly)

p {
  font-family: Tahoma, Verdana, sans-serif;
}

Making colored blocks from divs

You'll need to set 3 properties:

1. background-color
2. height
3. width

div {
    background-color: red;
    height: 100px;
    width: 100px;
}

• Links are underlined by default! To remove the underline from a link:

a {
    text-decoration: none;
}

• You can set the size of an image using height and width properties:

img {
    height: 100px;
    width: 100px;
    border: 1px solid blue;
}

• Drawing your own buttons (using a div)

div {
    /* Creates a box*/
    height: 50px;
    width: 120px;
    border-color: grey;
    background-color: blue;
    
    /* Creates a rounder box*/
    border-radius: 5px;
    
    /* Positioning your button*/
    margin: auto; /* Tells the browser to add equal margins on the LEFT & RIGHT sides of the HTML element 
                    = object is centered*/
    text-align: center; /* Centers the text within the element*/ 
}

• Then, within the div, insert an link to make the div clickable and there is your button.
• Since it is possible to nest HTML elements within one another, you are able to select those nested:

<div> 
  <div> 
    <p>
    </p>
  </div>
</div>

div div p {
    
}

How to reach a child element:

• The outermost div is the parent, and the next div is a child of the 1st div

• The p element is a child of the inner div

• A shortcut to this approach is to use the '>' operator, which targets direct children without having to go through those other parent elements.

• Universal style: that will apply styles to all elements on the page:

* {

}

ul li p /* is more specific than */
p
 /* Meaning that when a p tag is nesed inside the ul li, that style will be applied to the element rather
    than a style for just p elements = override

    Classes and ID ARE MORE SPECIFIC than nested selectors!
    . = class (used to style mutiple elements that should be styled together)
    # = ID (used for when you want only 1 element to receive a certain style)
*/

<div id="hi" >
    <p class="hello"></p>
</div>

#hi {
    
}

.hello {
    
}

Descendent Selectors

• Denoed by the spacings between elements

#nav li {
} /* Will select all li element's that is nested under an element with an id of nav */

Child Selector (>)

• Selects the immediate child (and no others!)

#list > li {
  color: black;
}

Compound Selectors

• Given a comma separated list will apply the styles to all the elments listed!

h1, h2, #box {
 /* apply styles */
}

Pseudo_class Selectors

• Pseudo-class selectors: are a way of accessing HTML items that aren't part of the document tree (where would you find info about whether a link is being hovered over or whether a link is being clicked

Syntax:

selector:pseudo-class_selector {
    property: value;
}

/* For links, there are a few pseudo class selectors for links
    a:link (an unvisited link)
    a:visted (a visited link)
    a:hover (a link that is being hovered over)
*/

First Child Selector

• Applies to elements who are first child to their parent element

<div> 
    <p>1st child</p>
    <p>Not first child </p>
</div>

p:first-child {
    font-family: cursive;
}

/* nth-child selector*/
p:nth-child(2) { /*selects the 2nd child */
    color: green;
}

Attribute Selector

img[alt=""] {
  border =...
}

POSITIONING

• Elements populate the page in whats known as the box model: Each HTML element is like a tiny box or container that holds pictures or text you specify
• EACH HTML ELEMENT GETS ITS OWN BOX TO LIVE IN!
• BY DEFAULT, each element takes up the space all the way across the page (so no other elements can sit next to it unless you modify their position property)
• Position property can be changed by modifying the DISPLAY property!
• The four types of display property are defined below:

1. block: makes the element a block box, it won't let anything sit next to it. It will take up the full width.
2. inline-block: makes the element a block but allows other elements to sit next to it on the same line.
3. inline: males elements sit next to each other on the same line, but without formatting it like a block. Only takes up as much width as it needs (not the whole line)
4. none: makes the element and its content disappear from the page

How do each box behave?

MARGIN

• The space around an element. The larger the margin, the more space between our elements and the elements around it.

BORDER

• Is the edge of the element, the feature that is set when using the border property.

PADDING

• Is the spacing between the content and the border. Can be adjusted with CSS to move the border closer to or farther away from the content.

CONTENT

• Is the actual stuff in the box.
• For a <p> element, it is the text of the p element.