DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Adding CSS To Your HTML
Bryan C Guner
Bryan C Guner

Posted on

Adding CSS To Your HTML

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

  • 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;
}
Enter fullscreen mode Exit fullscreen mode

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.

  • 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; }
Enter fullscreen mode Exit fullscreen mode

HTML

  Belka  Strelka     Laika  
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!