DEV Community

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

Posted on

3 1

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

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More