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
