Section 1

Preview this deck

Link example

Front

Star 0%
Star 0%
Star 0%
Star 0%
Star 0%

0.0

0 reviews

5
0
4
0
3
0
2
0
1
0

Active users

0

All-time users

0

Favorites

0

Last updated

6 years ago

Date created

Mar 1, 2020

Cards (13)

Section 1

(13 cards)

Link example

Front

<link href="https://www.codecademy.com/stylesheets/style.css" type="text/css" rel="stylesheet">

Back

Style Tag

Front

<style></style> Goes inside the head function in HTML

Back

Class Name

Front

To select HTML elements by their class, a period must be put before the class name. brand would be .brand

Back

Chain Selectors

Front

Having an html element with two or more selectors at once. Ex. h1.special { } You can also do this with nested elements

Back

Tag Name

Front

CSS can select HTML elements by using an elements tag name. A tag name is the word (or character) between HTML angle brackets. Ex. p { }

Back

Creating a CSS File

Front

Use the .css file extension, like so: style.css

Back

CSS id

Front

First, html needs an id attribute. Then you can can select html elements by their id attribute. To select this in css, put # before word Ex. #large-title

Back

Classes and IDs

Front

Classes are meant to be used many times, whereas an ID styles only one element

Back

Nested Elements example

Front

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

Back

Important (Specific ID)

Front

Can override any style no matter what it is. Should almost never be used.

Back

Multiple Selectors

Front

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

Back

Linking the CSS File

Front

Use <link> element. Must be placed within the <head> element of HTML Requires 3 attributes: href, type, rel href: like the anchor element, must be a path to the CSS file type: Describes type of document you are linking, in this case text/css rel: Describes relationship between HTML file and CSS file, in this case value should be: stylesheet

Back

Linking with a Relative Path

Front

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

Back