CSS Basics

Cascading Style Sheets (CSS) is a stylesheet language used to describe how the HTML should look. HTML is easy, you have elements, tags, and attributes. You can go to the W3Schools or MDN websites and look up exactly what they do. CSS..... not that easy.

Learning CSS will be a journey, and one we won't learn on this lesson. You will learn it through practice. This is one area I think the LLMs will help with. Here are some basic CSS principals with links to read more about it.

First, open this website in the web inspector. You should see a sources tab. In that tab you should find styles.css. Open this file while you read this.

CSS syntax is in the format

 
  selector { 
    property: value; 
  }
    

The selector can be an element, id, class, or some combination of the items. These are called selectors. In HTML, most elements can have the attribute "class" or "id" to help you "select" that class in CSS. Here is an HTML element with a class and id.

 
  <div class="some-class" id="some-id">
    

 
  .some-class, #some-id, h1 { 
    max-width: 600px;
  }
  

Think of id as a unique identifier for an element, while class is a way to group elements with similar styles. In CSS, you can apply "styles" to elements on a website by using "selectors" to tell the browser where you want to apply these styles. In CSS, selectors can be element types such as an H1, classes which are specified with a "." or specific elements which are specified with a "#". Examples of selectors are "h1", ".some-class", or "#some-id".

If you separate the selectors with commas, it will apply to all of them. For example "h1, p, .active, #id1" will apply to h1 and p elements, as well as elements with the class "active", and the one element with the id of "id1".

You can also specify embedded selectors to get more specicific. "nav.navbar ul li p.article" would apply only to "p" paragraph elements with the class "article" that full under a list item element `li` that fall under an unordered list element `ul` that fall under a "nav" element with the class "navbar". That's a VERY specific selector. Note the lack of commas, which would mean any of these things.

The text inside of the curly braces {} is just a set of "properties" with values to style the elements that are matched to the selector. Look at this page and see why it looks the way it does! The HTML for the navbar is the SAME code as the first page. But it looks much nicer. Colors are specified in multiple formats. In my example, you will see hexidecimal values here which is in the format #FFF or #FFFFFF, but you could write "white".

• Reading - Read all the links under "CSS Styling Basics". This is a lot of reading. It will save you hours later.
• Specificity - The same element may have multiple conflicting styles. You may specificy a default font size for the body element, then a more specific one for the H1 elements, then an even more specific one for the class "navbar". Which one applies? Specificity is your answer. In the web inspector you can select an element and see all of the styles that apply to it, and which ones are actually being applied.
• Properties - Here is a list of all the properties!

Practice learning CSS and debugging. Open up this website and look at the CSS file. I have commented it to explain what you are seeing on this website. You should now have a website with a .html file and a .css file that is formatting your website. If so, move on to the Javascript Basics lesson by using the navbar at the top.