Skip to content

21.CSS.md

Latest commit

 

History

History
91 lines (52 loc) · 4 KB

21.CSS.md

File metadata and controls

91 lines (52 loc) · 4 KB

21. Styling the Web with CSS

[toc]

ℹ️ NOTE: Check out my CSS Guide (coming soon)

🎗️ TODO: 🏴 I owe you the missing parts of this chapter. While I know CSS like a boss, you probably don't. HTML and CSS are like peas and carrots. You want to know them both at the same time.

21.1. What is CSS?

HTML vs CSS

I saw this image on Twitter and though this describes the relationship between HTML and CSS with perfect simplicity.

21.1.1. Background

As discussed in the previous chapter, HTML lays out the structure of a document. With HTML attributes, programmers can add some specification to tags. Yet when programmers make pages with only HTML, the web page looks rather bland. When making a website, the structure of the page is important, as is how those elements appear.

While HTML creates the structures and content of the page, CSS adds the styles to make it beautiful!

==Cascading Style Sheet== (not sure why the author calls it "Cascading Styling Sheets", that is wrong!) ==(CSS) is a style sheet language that allows programmers to add styling to web documents. With CSS, programmers can change backgrounds and fonts, the sys of different elements, and many more things.

CSS works by applying stylesheet rules to different elements. A style rule could be "Make this lettering purple" (.purple{color: #808;}) or "Make this font Helvetica" (.hellsyeah{font-family: Helvetica;}). CSS is a cascading style sheet language because the style rules apply based on a specified preference. To the rules "cascade".

ℹ️ NOTE: This book covers style rules and the order of precedence in threater detal in Section 21.3.

21.1.2. Check Your Understanding ✅

❓ Question: What kind of language is CSS? Checke all that apply.

a. Markup Language b. Programming Language c. Style Sheet Langauge d. Coding Language

❗ Answer: c. (I guess b. or d. but defintely c.)

21.2. CSS Structure

21.2.1. Writing CSS

21.2.1.1. CSS Selectors

21.2.1.2. Declaration Blocks

21.2.1.3. CSS Examples

21.2.2. Linking CSS to HTML

21.2.2.1. Order of Precedence

Because there is an order of precedence to the location of CSS, it is important to be able to add ro change CSS in all three locations. Programmers use this to their advantage if they want to be very specific with overwritng some CSS for one element. ==Inline CSS is highest in precedence with internal CSS being next and then external CSS as lowest.==

21.2.3. Check Your Understanding ✅

❓ Question: What is the order of precidedence in CSS? a. Internal > External > Inline b. Inline > Internal > External c. Inline > External > Internal d. External > Internal > Inline

❗ Answer: b.

21.3. CSS Rules

21.3.1. Good CSS Properties to Know

21.3.2. CSS Example

21.3.3. Check Your Understanding ✅

❓ Question: Find a CSS property and give its name, definition, and default value. Please do not use one of the examples that were in this section.

❗ Answer:

21.4. Exercise: CSS 🏃

🎗️ TODO: Defintely add the exercise for this chappter.

🤓 Personal Experience: CSS is very important to know especially with DOM functions like querySelect() and querySelectAll() to select objects based on CSS, or tools like Emmit which can quickly generate HTML from CSS style syntax. This can also be useful if you use jq in the terminal to retrieve data from a JSON file.

🏁 One step closer to the end! (That sounds kind of morbid.) On to the next big thing: Git

#LaunchCode