KODE WITH KLOSSY

Welcome to Intro to CSS!

 
KEY POINT

Let's write down the learning goals and technical vocabulary for today's lesson!

🎯 LEARNING GOALS

Understand the purpose and role of CSS in a webpage

Understand and use the syntax of a CSS rule

Experiment with some of the common properties for aesthetic

📗 TECHNICAL VOCABULARY

CSS

Declaration

HTML Element

Property

Rule

Value

 

CSS Basics, Syntax, and Text

What is CSS?


CSS stands for Cascading Style Sheets. It is a language that allows us to add styles to HTML documents on the web. It’s incredibly powerful! Take a few minutes to check out the CSS Zen Garden at http://www.csszengarden.com/. You’ll notice that all of the sites here are created with the exact same HTML document; they were just styled differently with CSS. You’ll learn that there is so much that CSS can do, and there are so many specific ways we can give directions, in code, to style our webpages. Throughout our first 2 CSS lessons, we’ll talk about most of the commonly-used things that CSS can do. By the middle of the week, you’ll have most of the CSS tools you’ll need to build a beautiful site!




Syntax


In CSS, we write a set of rules for how our document should look. The browser evaluates those rules and styles the page accordingly. A CSS rule is defined as follows: In the example above, the browser will set the color of any text element inside the element. We can define multiple sets of properties and values in a given rule. In the previous section, we said that “there is so much that CSS can do.” Each little thing it does comes from a property. One example is color - that property can help us change the color of some text. There are many, many properties that we could use. There are some that you will use frequently and quickly memorize. However, you do not need to remember the entire list; there are resources like which you can reference anytime you are coding such as https://htmldog.com/references/css/properties/.




Text


While we may take it for granted, the decisions that a developer makes for a webpage’s text has a huge influence on the experience a user has! Here are some things to notice about any piece of text:

  • Font
  • Size
  • Weight
  • Color
Using CSS, we can control all of that! If you visit TikTok on a laptop, you’ll see a menu on the left-hand side (image below). Each link that a user can click on has the following CSS rules applied to it. All of these lines of code are there solely to control the look and feel of those small links! Let’s breakdown the code above, using our vocabulary: - The entire code snippet is referred to as a CSS rule - The selector is p - that’s the element which will be changed with this rule - Each line inside the curly braces is a declaration - font-family, font-size, font-weight, and color are the four properties that are being assigned values in this rule. - ' sofiapro-medium', 16px, 500, and #000000 are the four values assigned to their respective properties - The colons : and semi-colons ; are necessary!





👩‍💻 Try-It: Style Text

We'll be working in repl.it projects again, but today we will use both the HTML and CSS files. Use this repl.it project as a starter. Then, follow these steps:

  1. Start by writing some HTML so we have some elements to style. Write an  h1 element and make sure to include some content between the tags!
     

  2. Now, write a CSS rule for the  h1. Inside the rule, write a declaration to change the size and color of your h1. Find a list of colors to use here.
     

  3. Repeat these steps with an h2, then a p, then another p. Also check out the background-color property!

Takeaways from this exploration


  • Any element can have a border
  • We can define how thick the border is, as well as the style and color
  • When we apply the rule, a border is added to all four sides of an element. (If you ever want to apply a border to just one side - google around for border-bottom, border-top, etc.)
  • If we don’t define a border, no border will show up!





 

🔳 Borders & Buttons

Border is one of the most helpful CSS properties to use while you are in the process of building a page. We will get into formatting in the next lesson, but the border property really helps you see what space a given element is taking up on the page.

Explore: Borders

For this activity, you'll be working in the same repl.it project that you started with text and colors.
Add the declaration: border: 1px solid red; to each rule in your CSS file. This value looks a little different from most of those we've seen; there are 3 pieces of information.

1px refers to the thickness of the line on the border

Solid refers to the border style, in this case a solid line

Red is the color that you would like the border to be (it could be changed to any valid color name or hex code!)

What change did you see on your page when you added this border declaration? Tinker with the 3 pieces of information - change 1px to 5px, change the color, etc! Check out all the possible border styles as well!

Takeaways from this exploration


  • Any element can have a border
  • We can define how thick the border is, as well as the style and color
  • When we apply the rule, a border is added to all four sides of an element. (If you ever want to apply a border to just one side - google around for border-bottom, border-top, etc.)
  • If we don’t define a border, no border will show up!





👩‍💻 Try-It: Buttons

Create a new repl.it project for this activity.

  1. In the HTML file, write a button element with the content "Try Pro Free for 7 Days".
     

  2. In the CSS file, write the rules necessary to re-create the button pictured below! Use any color you want.

Untitled (1).png

Click here for a Spicy Challenge


When the button is hovered over, it should look like the image below. Implement the CSS code necessary to re-create that hover state.




Click here for an Extra Spicy Challenge


There is a slight shadow behind the bottom and right side of the button - do some research online to explore how that might be achieved with CSS. Does this button look familiar? It's from the Codecademy website!





Putting It All Together 👉

In just a workshop learning about CSS at Kode With Klossy, you’ve already learned so much!

Take a minute to write down your key takeaways from this lesson.

Things that seem the newest to you

Things that seem most interesting to you

Questions that are still on your mind