Codecademy - CSS 1: Setup and Selectors

Here is all the stuff to remember from Codecademy's CSS lesson 1.

-You can add CSS to HTML elements in the HTML document using inline styles. This is a way of quickly formatting that particular element

<p style="color: red; font-size: 20px;">I'm learning to code!</p>

-You can add style tags nested inside the head tags and put css in there.
-However it seems better to put this in a separate style.css file and link to it in the head tags.

<link href="style.css" type="text/css" rel="stylesheet">

-Href gives the address of the style sheet. Type describes the type of document that it is and rel describes the relationship between the html doc and the css stylesheet

-CSS selects HTML elements by using their same tag name. Anything you give a
style to with that tag name will receive the styling unless you decide otherwise.

-As in HTML you can give HTML elements class names, you can also select the element for CSS use with its class name. Eg:

HTML
<p class="brand">Sole Shoe Company</p>

CSS
.brand {

}

-You can give an HTML element more than one class for assigning multiple CSS rules. This is useful incase you have, for example, two H1 tags but one needs to be bold and blue and the other needs to be bold and green. Eg:

CSS
.green {
  color: green;
}

.bold {
  font-weight: bold;
}

HTML
<h1 class="green bold"> ... </h1>

• HTML elements can have multiple classes but they can also have ID attributes. You can then assign CSS rules to the ID using a hashtag. IDs override class and style tags so they should be used sparingly and only on items that will stay the same. Eg:

HTML
<h1 id="large-title"> ... </h1>

CSS
#large-title {

}

-Specificity is the order by which the browser decides which CSS styles will be displayed. IDs are the most specific selector in CSS, followed by classes, and finally, tags. Best practice is to style elements using the least specific method. If two IDs are used for the same styling element (e.g. colour) then the one lowest down in the stylesheet would take precedence.

-Chaining can be used in CSS to apply rules to specific elements. For example, if you gave p tags and h1 tags the class 'special' but wanted to style h1 special tags a particular font you can select them as below. This is called chaining selectors.

h1.special{
}

-CSS also supports selecting elements that are nested within other HTML elements. E.g. for the unordered list below, the li tags are nested within the ul tag that has the main-list class. In CSS, these can be selected by putting the class first and then the li tag. Eg below. You can target more deeply nested elements like this but it can become messy. If descendant selectors start to become more than three levels deep it might be better just to give them their own class.

HTML
<ul class='main-list'>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
</ul>

CSS
.main-list li {

}

-You can override all specific CSS selectors with !important as below. However this should very rarely be used. It is better to just reorganise your CSS rather than use this. In the example below, all p tags would be blue despite the more specific .main p tag styling them as red.

p {
  color: blue !important;
}


.main p {
  color: red;
}

-Multiple selectors can be used to save repeating style attributes. Eg. example one is less efficient than example two. Note that they are separated with a comma.

Example 1:

h1 {
  font-family: Georgia;
}

.menu {
  font-family: Georgia;
}

Example 2:

h1, 
.menu {
  font-family: Georgia;
}

Extra attributes to remember:

-Use CSS to transform text from lowercase to uppercase:

text-transform: uppercase;