CSS Tips and Tricks

CSS Selectors

.class1.class2	<div class="name1 name2">...</div>	Selects all elements with both name1 and name2 set within its class attribute
.class1 .class2	<div class="name1"><div class="name2">	Selects all elements with name2 that is a descendant of an element with name1
element,element	div, p	Selects all <div> elements and all <p> elements
element element	div p	Selects all <p> elements inside <div> elements

Background Images

.post-body {
  background-color: #336655;
  background-image: url("https://cdn12.picryl.com/photo/2016/12/31/cat-black-cat-black-animals-5ef19b-1024.jpg");
  background-repeat: no-repeat;
}

Use a CSS Class to Style an Element

<style>
  .blue-text {
    color: blue;
  }
</style>
<h2 class="blue-text">CatPhotoApp</h2>

Blockquotes CSS

• alt

blockquote {
 margin: 0;
 border-left: 3px solid #ccc;
}
blockquote p {
 padding: 15px;
 background: #eee;
 border-radius: 5px;
}
blockquote p::before {content: '\201C';}
blockquote p::after {content: '\201D';}

Table CSS

.post-body table {
  border-collapse: collapse;
}
.post-body table, th, td {
  border: 1px solid black;
}

Center

• CENTERING THINGS
  • P { text-align: center }
• To center an image, set left and right margin to auto and make it into a block element

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}