Getting to Know CSS

What is CSS?

Cascading Style Sheets

  • Describes how HTML elements should be displayed or styled in the browser
  • A different programming language than HTML, with its own syntax
  • Can be inline as the style attribute of an element, inside the <style> tag in the head of the document, or in an external file connected with the <link> tag
  • External stylesheets using the <link> tag are most common, this is what CodePen is doing behind the scenes
<head>
<link rel="stylesheet" href="./styles.css" />
<style>
	body {
		background-color: black;
		}
</style>
</head>
<body>
	<h1 style="margin: 0;">Devmountain</h1>
</body>

The Cascade

  • all styles cascade from the top of a style sheet to the bottom, allowing different styles to be added or overwritten as the style sheet progresses
p {
  background: orange;
  font-size: 24px;
}

p {
  background: green;
}
button { 
  color: purple; 
  color: teal; 
}

Syntax

  • Selector - the item(s) that you want to change the styling of
  • Declaration - the actual style changes you want to apply, written as property-value pairs
body {
  background-color: black;
}

button {
  padding: 16px;
  color: blue;
}

article {
  border: 1px solid black;
  color: gray;
}

Units

  • There are lots of different CSS units that can be used to describe size and distance.
  • Some units use absolute values because they position elements in exact screen increments.
  • Some units use relative values because they depend on another value, such as the width of the element or screen.
  • px - pixels
  • vw - view width (width of the window)
  • vh - view height (height of the window)
  • % - percentage of parent 

The Box Model

The Box Model

  • All HTML elements can be represented by a box with 4 different parts.
  • Content - the information you want displayed inside the element.
  • Padding - space around the content, but inside the border
  • Border - the dividing line between padding and margin. Can have different line styles, thickness, color and more.
  • Margin - the space outside the border, which pushes against other HTML elements

Styling Elements

Font Styling

  • Works just like changing the font in a document editor
  • font-family changes the font itself, like Comic Sans or Times New Roman
  • font-size changes the font size
  • font-weight changes the boldness of the text
  • text-decoration can add underlines or strikethroughs
  • color changes the color of the text

Styling Backgrounds

  • You can change the background of any HTML element, including the body element to style the entire page.
  • background-color adds a color to the background of the element
body {
  background-color: pink;
}

Colors in CSS

  • there are built in colors in CSS, so it will recognize values like red like we've been seeing
  • you can also use rgb values, rgba, hsl, hsla, and hex colors
body {
  color: white;
  background-color: #333;
}

header {
  color: rgb(113, 10, 12);
  background-color: #ebebeb;
}

Combining Selectors

Selecting Multiple Elements

  • to select multiple elements, use a comma between the selectors
  • you can select as many elements as you want this way
h1, p, section {
  border: 3px solid green;
}

Selecting Descendants

  • use a space between selectors to select all descendants - anything nested inside, children, grandchildren, etc.
  • the first selector is the parent
div li {
  color: lightblue;
  background-color: black;
}

Selecting Children

  • the caret > allows us to select only direct children
  • this allows for more specific styling
  • the left element is the parent
section > p {
  padding: 20px;
}

Dev Tools

Dev Tools

  • dev tools are available in the major browsers to help devs see the inner workings of websites 
  • they aid greatly in debugging 
  • today we'll focus on the Elements tab
  • to open Chrome dev tools, right-click anywhere on a page and choose "Inspect"

Getting to Know CSS

By Devmountain

Getting to Know CSS

  • 1,516

More from Devmountain