Skip to content

Instantly share code, notes, and snippets.

@DominicTremblay

DominicTremblay/notes_css.md

Last active January 29, 2018 23:02
Show Gist options
  • Save DominicTremblay/b8799fb548a91467f946bbfe60e4f109 to your computer and use it in GitHub Desktop.
Save DominicTremblay/b8799fb548a91467f946bbfe60e4f109 to your computer and use it in GitHub Desktop.
Download ZIP
w3d1 breakout
Raw
notes_css.md

CSS

How to add style rules to our page

  1. inline
  2. internal element
  3. external stylesheet

Selectors

Selectors target which elements on our page will be styled

  1. Target all elements of a specific tag:
  2. target elements based on its attributes
  • classes
  • ids
  • pseudo classes
  • attributes
  • combinators
  1. elements depending are they are placed relative to others in the document

Inheritance

Child element inherits some CSS properties from the parents in the document tree.

Cascading StyleSheets

A particular element in the HMTL might be the target of several style declarations resulting in conflicting rules that the browser needs to resolve.

The styles in cascaded style sheets are processed by the web browser in a certain order that we call the cascade:

Cascading Order:

I. Sort by weight and origin of the styles II. Sort by specificity - more specific selectors will override more general ones III. Sport by order specified

Order by weight and origin

  1. !important user styles
  2. !important author styles
  3. Author styles

i. inline style sheets ii. internal style sheets iii. external style sheets

  1. User styles
  2. browser default styles

II. Specificity

Each selector of a style declaration has a calculated specificty.

a= presence of an inline style b= calculate the number of ID attributes in the selector c= calculate the number of classes, pseudo-classes and other attributes in the selector d= calculate the number of element names in the selector

a1000, b100, c10, d1

* has a 0 specificity

III. Inheritance

IV.

!important

Will give the priority to this rule. Not to be abused

ex.:

p { color: red !important; }

#quote { color: blue; }

This will be red

References: css specificity CSS Selectors !important rule

Raw
selectors.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Selectors</title>
<style>
/* basic selectors */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.5em;
}
h1 {
color: darkslategray;
}
/* Attribute selectors */
h2.sub-titles {
color: darkcyan;
}
#attr-selectors {
list-style: none;
}
#attr-selectors li {
display: inline-block;
background-color: lightblue;
padding: 15px;
border-radius: 5px 5px 0 0;
}
li[data-item="active"] {
text-decoration: underline;
}
/* descendant selector */
ul li {
color:chocolate;
}
/* direct child */
ol > li {
color: green;
}
/* adjacent sibling */
.list-item + li {
font-weight: bold;
color:orange
}
/* attribute selector & :checked pseudo-class & adjacent sibling selector */
input[type="checkbox"]:checked + label {
background-color: red;
color: white;
}
</style>
</head>
<body>
<h1>Selectors</h1>
<h2 class="sub-titles">Basic Selectors</h2>
<h2 class="sub-titles">Attribute Selectors</h2>
<p>Based on the attributes of the element:</p>
<ul id="attr-selectors">
<li data-item="active">ID</li>
<li>Class</li>
<li>Other attributes</li>
</ul>
<h2 class="sub-titles">Relational Selectors and Combinators</h2>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3
<ul>
<li>item a</li>
<li>item b</li>
<li>item c</li>
</ul>
</li>
<li class="list-item">item 4 - list-item class</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ol>
<form action="">
<div>
<input id="canada" type="checkbox" value="Canada">
<label for="canada">Canada</label>
</div>
<div>
<input type="checkbox" value="US">
<label for="us">US</label>
</div>
<div>
<input type="checkbox" value="UK">
<label for="uk">UK</label>
</div>
</form>
</body>
</html>
Raw
specificity.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
// specificity 1,0,0 = 100
#page-header {
background-color: lightblue;
width: 100%;
}
// specificity 0,1,0 = 10
.menu-item {
background-color: white;
color:darkblue;
}
// specificity 0, 1, 1 = 11
.menu-item a {
text-decoration: none;
}
// specificity 0,1,2 = 12
header .menu-item a {
text-decoration: none;
}
// specificity 0,1,1 = 11
.navigation li {
}
// specificity 0,1,1 = 11
.menu li {
}
// specificity 0, 1, 2 = 12
.navigation nav li {
}
// specificity 0,2,1 = 21
.navigation .menu li {
}
</style>
</head>
<body>
<header id="page-header">
<nav class="navigation">
<ul class="menu">
<li class="menu-item"><a href="#">Menu 1</a></li>
<li class="menu-item"><a href="#">Menu 2</a></li>
<li class="menu-item"><a href="#">Menu 3</a></li>
<li class="menu-item"><a href="#">Menu 4</a></li>
</ul>
</nav>
</header>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment