CSS Secrets for Beginners

with Kathryn Presner • @zoonini

http://zooninidev.com/css-secrets/

Use ←left & right→ arrow keys to navigate

Before We Start

What is CSS?

Do I need to write down the secrets?

Secret 1

CSS editor baked in

Secret 2

Custom CSS > editor formatting


/* Change the text color in posts and pages */
.entry-content {
  color: #b8661a;
}

Secret 3

Get to know your browser inspector

Secret 4

Play hide and seek


/* Hide the tagline and remove its space */
.site-description {
  display: none;
}
	

/* Hide the tagline but preserve its space */
.site-description {
  visibility: hidden;
}

Secret 5

::before and ::after



/* Add maple leaf before page and post titles */
.entry-title::before {
  content: url("http://localhost:8888/css-secrets/wp-content/uploads/2017/10/mapleleaf.png");
}
	

/* Add copyright line after default footer */
.site-info::after {
  content: "Copyright 2018 KP's Maple House";
  display: block;
}

Secret 6

WordPress classes


.home
.single-post
.blog
.category
.tag
.postid-10
.page-id-15
.menu-item-20
	

<body class="home blog logged-in">
	

/* On homepage - add maple leaf before page and post titles */
.home .entry-title::before {
  content: url("http://localhost:8888/css-secrets/wp-content/uploads/2017/10/mapleleaf.png");
}

Secret 7

Target multiple elements 


/* Change size of site title */
.site-title {
  font-size: 40px;
}
/* Change size of post and page titles */
.entry-title {
  font-size: 40px;
}
	

/* Change size of site title, post, and page titles */
.site-title,
.entry-title  {
  font-size: 40px;
}

Secret 8

Changing Fonts


/* Change font of top contact information strip */
.contact-info-wrapper  {
  font-family: "Roboto Condensed", Arial, sans-serif;
}

Secret 9

Media queries


@media all and (max-width: 767px) {
  .home .hero-area {
    display: none;
  }
}

Secret 10

CSS no-go zones

CSS can't do everything!

  • Override image cropping
  • Auto-advance slides
  • Add contact-form recipients
  • Add links
  • Remove title attribute (aka tooltip)

Instead:

Child theme or plugin!

More

CSS

Resources

Credits

The presentation:
zooninidev.com/css-secrets/

Built with: reveal.js

Demo theme: Radcliffe 2

Maple leaf: Hopkins - Noun Project

Twitter: @zoonini

Web: https://kpresner.com