2. CSS
2.3 Syntax
Hello
Zen and the art of Coding
Please email hello@zenandtheartofcoding.info for a password

CSS Syntax

📚 Table of Contents
Selectors
Comments
  • logically this should probably be the first CSS chapter and maybe in other sections syntax will be first but sometimes I think it's better to just see code in action before you try to dissect it. I also think most people can tell what is happening when they see:
styles.css
body {
  background-color: gray;
}
h1 {
  color: blue;
}
p {
  color: red;
}
  • but let's dissect it now:
h1 {
  color: blue;
}
  • this little block of code is saying "color all h1 tags blue"
    • first you have to tell the computer what you want to style, in this case it's the h1 tags. in this example, the h1 is the selector
    • after you define your selector, open up some curly braces {}
    • inside of the curly braces you write your style declarations. style declarations follow the convention of properties and values. separate the property and the value with a colon (:) and end it with a semi-colon (;)
      • property: value;
    • the semi-colon ends a style declaration and is kind of important, especially if you are writing more than one style declaration inside of your declaration block. to add more style declarations just add them inside your braces:
h1 {
  color: blue;
  font-size: 36px;
}

Selectors

a little more of the selectors

rulesets (multiple selectors)

  • there are two big acronyms in coding: DRY Don't Repeat Yourself and KISS Keep It Simple Stupid (its an old navy thing, not the band with Gene Simmons 🤘😝).
  • if you are styling elements the same way, you can chain selectors together in the same declaration block to reduce code redundancy and write cleaner code, saving time and your eyeballs.
  • add multiple selectors by separating them with a comma (,)
  • instead of writing this:
h1 {
  font-family: Arial, sans-serif;
  color: navy;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: bold;
  text-shadow: 1px 1px 2px gray;
}
 
h2 {
  font-family: Arial, sans-serif;
  color: navy;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: bold;
  text-shadow: 1px 1px 2px gray;
}
 
h3 {
  font-family: Arial, sans-serif;
  color: navy;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: bold;
  text-shadow: 1px 1px 2px gray;
}
  • you can just write this:
h1,
h2,
h3 {
  font-family: Arial, sans-serif;
  color: navy;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: bold;
  text-shadow: 1px 1px 2px gray;
}

note on the formatting for these blocks of CSS, just like with the HTML, making it look pretty is optional. once again, the computer doesn't give a fuck how it looks when it runs the code. my code editor actual autoformats for a clean and professional look but as long as the commas, brackets and semi-colons are all there, you could write it all on one line if you want to be a psychopath about it.

id's

  • remember when I said that the only way you can get good at HTML, CSS (and JS) is to use them all together? this is one of those times.
  • an id is actually an HTML attribute that allows you to give a unique name to the HTML element so you can single it out.
  • give an HTML element an id like this:
<p id="somethingUnique">I am one of a kind</p>
  • you target HTML id's with CSS selectors by using a hash (#)
#somethingUnique {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

classes

  • ok, not gonna lie, id's and classes can get a little confusing but we can keep it simple (stupid)
  • a class is also an HTML attribute and I like to think of it as the plural version of an id
    • you can only have one id but you can share a class with many others
  • set a class on your HTML like this: (jacking W3 schools for this example)
<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>
 
<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>
 
<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>
  • target the HTML class with CSS with a period/dot (.):
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}

keep going w/ selectors

  • so, I have been writing and explaining all of this as if you have never seen this shit before.
  • technically everything on this page can be referred to as simple selectors (targeting by name, class & id).
  • IMO this is absolutely enough to get going to start making cool shit but it is also cool to know that there is way more
  • there are:
    • Combinator selectors (select elements based on a specific relationship between them)
    • Pseudo-class selectors (select elements based on a certain state)
    • Pseudo-elements selectors (select and style a part of an element)
    • Attribute selectors (select elements based on an attribute or attribute value)
  • read about them all here (opens in a new tab)

Comments

personal commentary on comments 🫠

  • all programming languages have comments and the syntax is never really complicated. in fact, most code editors have a comment shortcut anyway. for example, in VS Code (legit industry standard at this point) you can highlight code or just put your cursor on a line and hit command + / (on Mac) and it will comment out your code. that works in any language which is pretty tight bc you don't have to remember syntax for every language. some languages also have different syntax for single and multiline comments.
  • I already snuck comments into both the HTML and CSS exercises so far so you can see them in action.
  • essentially comments are for hiding code from the computer, typically used to explain code to other people who didn't write it (or to remind yourself wtf it is doing)
  • the thing about comments that you won't really read anywhere is that you can use them for all kinds of things. they are great for organizing sections of code on huge files.
  • personally, I am a big fan of experimenting with code. thats really how you see how shit works. copy and paste some code, change it, break it, put it back together and then change it the way you like/want/need it. engineering baby!
  • comments are awesome for experimenting bc you can comment out the original code and keep it while you go ape shit. if you go too far off the rails, you can always just delete or comment out your experimentation and put the original code back.
    • note: on a professional level, it is totally bad practice to have a ton of commented out code all over your projects. unless something is a real work in progress, so try to delete your experimentations/original code and clean your shit up before you move on.

CSS comments

  • the syntax to comment out CSS code on one line or multiple lines is the same.
  • start your comment with /* and end it with */.
  • check it out, let's use the CSS from the end of the last exercise and add a bunch of comments
styles.css
/* 👇 ORIGINAL STYLES */
/* 
body {
  background-color: dimgray;
}
 
h1 {
  color: springgreen;
}
 
p {
  color: pink;
} 
*/
 
/* 👀 see how the same syntax is used for single and multi-line comments */
 
/* 👇 NEW STYLES */
body {
  /* Sets a colorful gradient as the background of the body element */
  background: linear-gradient(
    270deg,
    violet,
    indigo,
    blue,
    green,
    yellow,
    orange,
    red,
    violet,
    indigo,
    blue,
    green,
    yellow,
    orange,
    red
  );
  /* Specifies the size of the gradient background */
  background-size: 200% 200%;
  /* Adds an animation to gradually move the gradient background */
  animation: moveGradient 15s ease infinite;
}
 
h1 {
  /* Sets the color of header 1 text to spring green */
  color: springgreen;
  /* Adds a black shadow to the text of header 1 */
  text-shadow: 2px 2px 4px #000000;
  /* Smooth transition effect for transformations */
  transition: transform 0.3s ease;
  /* Animation to continuously rotate the header 1 text */
  animation: rotate 5s linear infinite;
}
 
p {
  /* Sets the color of paragraph text to light blue */
  color: lightblue;
  /* Skews the paragraph text horizontally */
  transform: skewX(10deg);
  /* Transition effect for color and font size changes */
  transition: color 0.5s ease-in-out, font-size 0.3s ease;
  /* Adds a white glow around the paragraph text */
  text-shadow: 0 0 8px white;
  /* Pulsing animation for paragraph text */
  animation: pulse 2s infinite;
  /* Centers the paragraph text and sets max width */
  text-align: center;
  margin: 0 auto;
  max-width: 80%;
}
 
p:hover {
  /* Transforms the paragraph text when hovered: skew and 180-degree rotation */
  transform: skewX(10deg) rotate(180deg);
}
 
/* ANIMATIONS */
@keyframes rotate {
  /* Defines the rotation animation from 0 to 360 degrees */
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
@keyframes pulse {
  /* Keyframes for pulsing font size from 30px to 36px and back */
  0% {
    font-size: 30px;
  }
  50% {
    font-size: 36px;
  }
  100% {
    font-size: 30px;
  }
}
 
@keyframes moveGradient {
  /* Keyframes to move the background gradient */
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
2.2 Exercise2.4 Colors