CSS

Cascading StyleSheets (CSS) is where a lot of the styling happens. It's a programmer's least favorite part of web development, but amazing for web designers.

Properties

Different properties exist with different values. Properties and values allow you to style different parts of a page.

Selectors

Selectors are what allow you to target specific elements and style them. For example, you can target all paragraph elements and change their text color by doing this in your CSS:

p {
  color: white; /* property color is for changing the text-color */
}

Classes

Classes are one type of selectors that allow you to apply css to all elements with the class. For example, say you wanted to change a lot of elements' text color to white. We could actually create a CSS class called white and give all those elements the white class. Here's index.html

 <html>
   <head>
     <link href="styles.css" rel="stylesheet">
   </head>
   <body>
     <div class="white">This should be white!</div>
     <h1> This should not be white! </h1>
     <h1 class="white"> This should also be white! </h1>
   </body>
 </html>

And styles.css

 .white {
    color: white;
 }

Pay close attention to the period that precedes the word "white" when making your class. Notice how only the elements with the class white applied have white text? That's because the selector targets elements with the white class.

Note About Styles

There are hundreds of CSS properties that have their own sets of unique values that can be used for them. It would be almost impossible for us to list out every single one of them and what they do and how to use them. If you're unsure what properties to use and how to use them, Google them! There are plenty of resources out there that will show you how to use properties.

results matching ""

    No results matching ""