Intro to Web Development
Copy doc
Make it pretty
Use CSS to style your web page

CSS

Cascading Style Sheets (CSS)
is a language that defines the styles on a web page. Among other things, it can be used to specify the colors, fonts, and layouts for a web page.

Here are two websites with the same HTML; however, one of them has its styling removed. As you can tell, one of them is much more aesthetically pleasing.

Screen Shot 2020-01-24 at 12.17.44.png

Screen Recording 2020-01-26 at 09.55.gif

Structure of a CSS Rule

Here is an example of a
CSS rule
that makes all
<h1>
elements have a font size of 32px and blue color.
h1
{
font-size:
32px;
color:
blue;
}
There are three parts to every CSS rule:
The
selector
specifies which HTML elements should have the style applied.
The
property
and
value
together specify which style to apply. You can have as many property-value pairs in each CSS rule.

⭐️ Step 0: Inspect the CSS used in your webpage

The
<link>
tag

In the left sidebar of your repl project, you should see a list of files. We will be writing our CSS in the
style.css
file. If you look at the
index.html
file, you'll see this line of code in the
<head>
element.

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

The
<link>
element links the style.css file to the HTML file so that our CSS is applied to index.html.
The
ref
attribute indicates the relationship between the linked file and the HTML file.
The
type
attribute indicates the type of the linked file.

⭐️ Step 1: Define some CSS for your HTML tags

⭐️ Step 2: Define some CSS rules using class selectors

⭐️ Step 3: Define some CSS rules using ID selectors

🍦Challenge A: Use more specific selectors

🍦Challenge B: Use Flexbox or Grid layout for your web page

🍦Challenge C: Use Bootstrap on your web page

CSS Tasks
6
Task
Status
1
Inspect the CSS used in your webpage
Not Started
2
Define some CSS for your HTML tags
Not Started
3
Define some CSS rules using class selectors
Not Started
4
Define some CSS rules using ID selectors
Not Started
5
🍦Challenge: Use more specific selectors
Not Started
6
🍦Challenge: Use Flexbox or Grid layout for your web page
Not Started
7
🍦Challenge: Use Bootstrap on your web page
Not Started
No results from filter

Next Section ➡️


Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.