Adding CSS To Your HTML

For beginners … very picture heavy since CSS is such a visual discipline!


Adding CSS To Your HTML

For beginners … very picture heavy since CSS is such a visual discipline

### Getting CSS Into Your HTML
<!-- example.html -->
<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"
    />
    <link rel="stylesheet" href="/styles/site.css" />
  </head>
  <body></body>
</html>
  • To connect your CSS sheet to your HTML page, use the link tag like so.
  • Many developers use External pre-written CSS stylesheets for consistent design.
  • You can connect multiple stylesheets.

CSS Selectors

  • CSS Selector : Applies styles to a specific DOM element(s), there are various types:
  • Type Selectors : Matches by node name.
- `Class Selectors` : Matches by class name.
- `ID Selectors` : Matches by ID name.
- `Universal Selectors` : Selects all HTML elements on a page.
- `Attribute Selectors` : Matches elements based on the prescence or value of a given attribute. (i.e. a\[title\] will match all a elements with a title attribute)
/* Type selector */
div {
  background-color: #000000;
}

/* Class selector */
.active {
  color: #ffffff;
}

/* ID selector */
#list-1 {
  border: 1px solid gray;
}

/* Universal selector */
* {
  padding: 10px;
}

/* Attribute selector */
a[title] {
  font-size: 2em;
}

Class Selectors

  • Used to select all elements of a certain class denoted with a .[class name]
  • You can assign multiple classes to a DOM element by separating them with a space.

Compound Class Selectors

- To get around accidentally selecting elements with multiple classes beyond what we want to grab we can chain dots. - TO use a compound class selector just append the classes together when referencing them in the CSS.
<div class="box yellow"></div>
<div class="box orange"></div>
<div class="circle orange"></div>
  • i.e. .box.yellow will select only the first element.
  • KEEP IN MIND that if you do include a space it will make the selector into a descendant selector.
h1#heading,
h2.subheading {
  font-style: italic;
}
  • When we want to target all h1 tags with the id of heading.

CSS Combinators

  • CSS Combinators are used to combine other selectors into more complex or targeted selectors — they are very powerful!
  • Be careful not to use too many of them as they will make your CSS far too complex.

Descendant Selectors

- Separated by a space. - Selects all descendants of a parent container.

Direct Child Selectors

- Indicated with a `>`. - Different from descendants because it only affects the direct children of an element.

CSS

.menu > .is-active { background-color: #ffe0b2; }

HTML

<body> <div class="menu"> <div class="is-active">Belka</div> <div> <div class="is-active">Strelka</div> </div> </div> </body> <div class="is-active"> Laika </div> </body>
  • Belka would be the only element selected.

Adjacent Sibling Selectors

- Uses the `+` symbol. - Used for elements that directly follow one another and who both have the same parent.
h1 + h2 { font-style: italic;   }

//HTML:

<h1>Big header</h1> <h2>This one is styled because it is directly adjacent to the H1</h2> <h2>This one is NOT styled because there is no H1 right before it</h2>

h1 + h2 { font-style: italic;   }

<h1>Big header</h1> <h2>This one is styled because it is directly adjacent to the H1</h2> <h2>This one is NOT styled because there is no H1 right before it</h2>

Pseudo-Classes

courtesy of Pseudo-classes — CSS: Cascading Style Sheets | MDN (mozilla.org)
courtesy of Pseudo-classes — CSS: Cascading Style Sheets | MDN (mozilla.org)
- `Pseudo-Class` : Specifies a special state of the seleted element(s) and does not refer to any elements or attributes contained in the DOM. - Format is a `Selector:Pseudo-Class Name` or `A:B`
a:hover {
font-family: "Roboto Condensed", sans-serif;
color: #4fc3f7;
text-decoration: none;
border-bottom: 2px solid #4fc3f7;
}

Some common pseudo-classes that are frequently used are:

  • active : 'push down', when elements are activated.
  • checked : applies to things like radio buttons or checkbox inputs.
- `disabled` : any disabled element.
- `first-child` : first element in a group of children/siblings. - `focus` : elements that have current focus. - `hover` : elements that have cursor hovering over it.
- `invalid` : any form elements in an invalid state from client-side form validation. - `last-child` : last element in a group of children/siblings. - `not(selector)` : elements that do not match the provided selector. - `required` : form elements that are required.
- `valid` : form elements in a valid state. - `visited` : anchor tags of which the user has already visited the URL that the href points to.

Pseudo-Selectors

  • Used to create pseudo-elements as children of the elements to which the property applies.
  • ::after
  • ::before
<style>
  p::before {
    background-color: lightblue;
    border-right: 4px solid violet;
    content: ":-) ";
    margin-right: 4px;
    padding-left: 4px;
  }
</style>
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<p>This is the third paragraph</p>
  • Will add some blue smiley faces before the p tag elements.

CSS Rules

  • CSS Rule : Collection of single or compound selectors, a curly brace, zero or more properties
  • CSS Rule Specificity : Sometimes CSS rules will contain multiple elements and may have overlapping properties rules for those same elements - there is an algorithm in CSS that calculates which rule takes precedence.
  • The Four Number Calculation: listed in increasing order of importance.
  • Who has the most IDs? If no one, continue.
  • Who has the most classes? If no one, continue.
  • Who has the most tags? If no one, continue.
  • Last Read in the browser wins.
  • Coming back to our example where all the CSS Rules have tied, the last step 4 wins out so our element will have a purple border.

CSS: Type, Properties, and Imports

Typography

  • font-family : change the font.
- Remember that not all computers have the same fonts on them. - You can import web fonts via an api by using - `@import url('https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&display=swap');` and pasting it st the top of your CSS file. - And then reference it in your font-family. - `font-size` : Changes the size of your font. - Keep in mind the two kind of units CSS uses: - `Absolute` : `Pixels`, Points, Inches, Centimeters. - `Relative` : Em, Rem. - Em: Calculating the size relative to the previous div (bubbles down) - Rem: Calculates relative to the parent element always. - `font-style` : Used to set a font to italics. - `font-weight` : Used to make a font bold. - `text-align` : Used to align your text to the left, center, or right. - `text-decoration` : Use to put lines above, through, or under text. Lines can be solid, dashed, or wavy! - `text-transform` : Used to set text to all lowercase, uppercase, or capitalize all words.

Background-Images

  • You can use the background-image property to set a background image for an element.

CSS: Colors, Borders, and Shadows

Colors

  • You can set colors in CSS in three popular ways: by name, by hexadecimal RGB value, and by their decimal RGB value.
  • rgba() is used to make an rbg value more transparent, the a is used to specify the alpha channel.
  • Color : Property used to change the color of text.
  • Background-Color : Property to change the backgrounf color of an element.

Borders

  • Borders take three values: The width of the border, the style (i.e. solid, dotted, dashed), color of the border.

Shadows

  • There are two kinds of shadows in CSS: box shadows and text shadows.
  • Box refers to HTML elements.
  • Text refers to text.
  • Shadows take values such as, the horizontal & vertical offsets of the shadow, the blur radius of the shadow, the spread radius, and of course the colors.

My Blog

Web-Dev-Hub

my resource sharing and blog site ... centered mostly on web development and just a bit of audio production / generally…bgoonz-blog.netlify.app

Grid Cheat Sheet