CSS Basics

Cascading Style Sheets (CSS) decorates your website with visual appeal and invites the user to connect with your website's personality. Tonight we'll apply CSS to the "LadyDev Bar & Grill" web page. If you follow our instructions your page will end up looking like the example below but feel free to add in some of your own creativity if you feel comfortable!

Before starting the worksheet, please take a moment to review the Setup instructions to ensure you have all the tools and workspace setup you need for tonight's work.

If you are using CodeSandbox, please skip to CodeSandbox instructions below.

This section will help guide you through the following steps:

Prepare the HTML file
Link the stylesheet
Resize images
Change title color
Cascade styles

Prepare the HTML file

First we need the HTML file. We'll create the file, download the images, and set up the development environment.

Open Visual Studio Code (VS Code) from your installed applications. In VS Code, select File Open Folder....
Navigate to and select the "CodingAndCocktails/session2" folder.
If you don't have a "CodingAndCocktails/session2" directory, take a moment to set up your workspace.
Create a file called index.html. In VS Code's EXPLORER pane, hover over SESSION2 to display action buttons. Click the New File icon.
Name the file index.html and press Enter to save it in your "CodingAndCocktails/session2" folder.

Copy and paste the following HTML code into your index.html file.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>LadyDev Bar &amp; Grill</title>
   <script src="https://use.fontawesome.com/81b69a015b.js"></script>
</head>
<body>
   <nav class="navbar">
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#about">About</a></li>
         <li><a href="#menu">Menu</a></li>
         <li><a href="#contact">Contact</a></li>
      </ul>
   </nav>
   <section id="about" class="hero">
      <div class="hero-text">
         <h1>LadyDev</h1>
         <h1>Bar &amp; Grill</h1>
         <h2>Making development more delicious every day!</h2>
         <p>Welcome to the LadyDev Bar &amp; Grill. We're glad you're here!</p>
         <p>Sit down, relax, and enjoy good drinks, good eats, and good friends.</p>
      </div>
   </section>
   <main class="grid-container">
      <section id="menu" class="drinks">
         <h2>Menu</h2>
         <ul>
            <li class="item">
               <a href="#"><img src="images/martini.jpg" alt=""></a>
               <h3 class="beverage">Martinis</h3>
               <p>Made with our own homemade gin and dry vermouth. Choose from The Classic, Lemondrop, or Chocolate.</p>
            </li>
            <li class="item">
               <a href="#"><img src="images/wine.jpg" alt=""></a>
               <h3 class="beverage">Wine</h3>
               <p>There are just too many to list. Ask your server for a recommendation.</p>
            </li>
            <li class="item">
               <a href="#"><img src="images/whiskey-cocktails.jpg" alt=""></a>
               <h3 class="beverage">Whiskey cocktails</h3>
               <p>Whiskey. Known as the water of life and a drink worthy of deep contemplation. Thank goodness it's not
                  just for men anymore.</p>
            </li>
            <li class="item">
               <a href="#"><img src="images/margarita.jpg" alt=""></a>
               <h3 class="beverage">Margaritas</h3>
               <p>Slushy frozen delicousness, in Peach, Strawberry, or Mango. Served with a rock-salted rim and lime.
               </p>
            </li>
            <li class="item">
               <a href="#"><img src="images/hot-cocktail.jpg" alt=""></a>
               <h3 class="beverage">Hot &amp; Creamy</h3>
               <p>Just what you need to kick off a night of coding. We offer concoctions with coffee, Kahlua, Bailey's,
                  and
                  more.</p>
            </li>
            <li class="item">
               <a href="#"><img src="images/beer.jpg" alt=""></a>
               <h3 class="beverage">Beer</h3>
               <p>We serve the finest microbrews from around the world. How about a Saison, IPA, or Stout?</p>
            </li>
            <li class="item">
               <a href="#"><img src="images/milk.jpg" alt=""></a>
               <h3 class="beverage">Non alcoholic</h3>
               <p>We have plenty of NA options available to quench your thirst, like lemonade, milk or soda.</p>
            </li>
         </ul>
      </section>
      <section class="small-plates">
         <h2>Small plates</h2>
         <ul class="food">
            <li>Grassfed beef sliders</li>
            <li>Spicy calamari</li>
            <li>Coconut shrimp</li>
            <li>Veggie spring rolls</li>
            <li>Deviled eggs</li>
            <li>Tuscan bean dip</li>
            <li>Chicken lettuce wraps</li>
         </ul>
      </section>
   </main>
   <footer id="contact">
      <p>&copy; 2020 LadyDev Bar &amp; Grill</p>
      <ul>
         <li><a href="http://facebook.com/ladydevbargrill"><i class="fa fa-facebook-official fa-lg"></i></a></li>
         <li><a href="http://twitter.com/ladydevbargrill"><i class="fa fa-twitter fa-lg"></i></a></li>
         <li><a href="http://instagram.com/ladydevbargrill"><i class="fa fa-instagram fa-lg"></i></a></li>
         <li><a href="mailto:ladydevbargrill@example.com"><i class="fa fa-envelope-open-o fa-lg"></i></a></li>
      </ul>
   </footer>
</body>
</html>

Save the file by selecting File Save. You can also use the keyboard shortcut ctrl + s on Windows or cmd + s on Mac. Unsaved files in VS Code have a little dot on the tab.

You may run into an error saving index.html if your VS Code needs elevated permissions on Windows. Select Retry as Admin to finish saving.
Now we'll prepare the images. First we need a folder for the images. In VS Code, hover over SESSION2 and click on the New Folder icon. Name the folder "images".
In Chrome, open a new tab to download the contents of our GitHub repository containing the images.
Clicking on the link automatically downloads a zip file that contains multiple files. The worksheet will walk you through file organization.

GitHub is a tool we use to store code.
Unzip the file and move all the images inside the "images" folder to your new "images" folder in "CodingAndCocktails/session2/images".

Not sure how to extract the contents of the zip file?

Mac users: Double click on the downloaded file with the .zip extension
Windows users: Right click on the file with the .zip extension and choose "Extract All." Select the destination you would like to extract the files to.

When you're done, your "images" folder should contain:
```
 beer.jpg
 hero.jpg
 hot-cocktail.jpg
 margarita.jpg
 martini.jpg
 milk.jpg
 whiskey-cocktails.jpg
 wine.jpg
```
That's all we need from CSSCompilerPractice_master.zip. You can delete all the other files from the download.

Congratulate your neighbors for getting all the HTML setup done. Break the ice by asking your neighbor "What's the most embarrassing fashion trend you used to rock"?

Create and link the stylesheet to the HTML

We need a folder for the stylesheet we'll be creating tonight. In VS Code, create the "css" folder for the project and create the styles.css file inside the "css" folder.
Make sure you create the "css" folder inside the project folder, and not inside "images" folder.

Need a little help? Expand this section for guidance.
In VS Code, hover over SESSION2 and click on the New Folder icon. Name your folder "css". Right click on the "css" folder. Select New File to create your stylesheet file. Name the file styles.css.
In VS Code, open index.html. In the HTML <head> section (between the opening <head> and closing </head>), find the HTML tags for title and script. Place your cursor after the closing title tag, press Enter, and link your stylesheet by adding

<link rel="stylesheet" href="css/styles.css">.

The <head> section of your HTML should look like this:

index.html
```
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>LadyDev Bar &amp; Grill</title>
   <link rel="stylesheet" href="css/styles.css">
   <script src="https://use.fontawesome.com/81b69a015b.js"></script>
 </head>
```
Didn't have a chance to attend the HTML session or do you need a refresher? Grab a mentor and ask for an HTML overview.
Save your file.
Now we want to preview the index.html file in Chrome. Instead of saving and reloading the web page manually, we'll use the VS Code extension Live Server. This extension opens up the web page in your default web browser and reloads the page whenever you save files. In VS Code, start the live server by right clicking on index.html in the EXPLORER pane and select Open with Live Server. A browser tab will open.
If you don't have the Live Server package, take a moment to set up your workspace.

If the tab opens in another browser, copy the URL and paste it into a new tab in Chrome. The reload will automatically happen in Chrome.

If you get an access warning, click "Allow" to let Live Server serve the application.

If you are borrowing a laptop and get an access warning, please contact a member of the Coding & Cocktails leadership team for access.
Take a look at your app in Google Chrome and notice the current styling. The page doesn't look good yet but we've got our initial setup for our project done. Now let's get to the fun part - styling!

Resize images using relative and absolute sizes

Images are a big part of any website and what most people see first because your eyes are drawn to visuals. Let’s learn about absolute and relative sizing and apply it to the images in the menu.

In VS Code, open index.html. Inside the body HTML tag, notice we have a variety of different HTML tags, including img for images. In the next step, we'll apply a style to the img element. Take a moment to review the syntax for CSS rules, then review the index.html HTML elements and class attributes.
The syntax for a CSS rule looks like this:
```
selector {
    property: value;
}
```
Take a moment to review index.html.

In the HTML, notice we have a nav element for navigation, a section about the establishment with hero text, inside a main element there's 2 sections-- one for drinks menu and one for small plates menu, and lastly a footer for contact information. Inside the various nav, section, or footer nodes, there's elements for headers (h1 - h6), paragraphs (p), unordered lists (ul), images (img), and anchors (a).

Some elements have a class declared, such as the about section has class="hero". We will apply CSS rules to both HTML elements and by class.

Feel free to ask questions or talk through the layout of the HTML with your mentor.
Open styles.css and add the following code

styles.css
```
 img {
     width: 25%;
 }
```
Save your file and view your app in Chrome. The width of all the images resized to 25% of the view.

VS Code can help you out! IDEs can help auto-complete code for you, including CSS properties. When you start typing a property, VS Code will suggest properties matching the name.
Now let's try absolute sizes. Change your style to use width: 120px;. Save your file and view your app in Chrome. The width of all the images resized to 120 pixels.

You can inspect elements in Chrome DevTools. Right click on an image and select Inspect. If you aren't familiar with Chrome DevTools or want a refresher, feel free to grab a mentor. Mentors love talking about debugging.
Specify the height of your images by adding height: 120px;. Save your file and view your app in Chrome. The height of the images resized to 120 pixels as well.

The images look distorted. This is because when you set height or width of an image, the image automatically scales and maintains aspect ratio but when you specify both height and width, the image resizes to the specified height and width and stretches to accommodate.

Change the color of the title

Color helps differentiate sections within a website and helps convey importance. In this section we'll change the color of the headers.

Pick out a color palette to use from http://colorhunt.co. Click on the color palette you like to get a bigger view of the colors. Make note of the hex color values displayed when you hover over each color in your chosen palette.
Ensure your colors are a11y friendly by using the WebAIM Color Contrast Checker. You can input your selected foreground and background colors to find contrasting colors that improve legibility.

Google's Color Tool makes this a little easier by pre-defining color palettes with accessible contrast.
We'll start applying colors to the main h1 header first. In styles.css in VS Code, declare a style for h1 tag above the selector for img. Use the color property and substitute the hex color you selected for the title like this

styles.css
```
 h1 {
     color: #637056;
 }
```
Save your file and view in Chrome. Do you see the color of your header change?
Repeat to create styles targeting h2 right after your h1 style and apply the same color.

Notice the color applies to all h2 elements, including the "Menu" and "Small plates" text. This is an example of how styles cascade.

We might need to override the style for a specific element later, but we want to build a strong foundation to build upon.
Save your file and view your page in Chrome.
Save your styles.css file and view your app often so you can see the changes as we go along. The worksheet will call out specific places to save and view the web page to illustrate a concept, but feel free to save and view your page as often as you want. It helps to see the changes as your write your CSS.

Cascade background color changes

The ability to cascade styles makes CSS powerful. In this section we will apply background colors to demonstrate how to cascade styles.

Select a background color for the entire page and add it to the top of styles.css by using the HTML body selector and background-color property.

styles.css
```
 body {
     background-color: #fefaec;
 }
```
The body is the parent element for the website so setting a style here applies to every element within unless it's overridden. Organize your CSS by setting "global" styles that apply to all elements at the top of the file and target styles for specific elements after global styles. Declare styles for specific elements in vertical order as it appears in the HTML to make it easy to find later.
Select a background color for the "Small plates" menu.
Note the HTML element for "Small plates" in the index.html.

You can search for and find "Small plates" in the index.html in VS Code. In the toolbar, select Edit Find in Files or click on the magnifying glass on the left toolbar (where you installed Extensions). You can also use a keyboard shortcut.

Since "Small plates" section is further down the file, we'll add the style at the bottom of the styles.css. "Small plates" is in a section element, let's create a style for the section selector and set the background-color.
Uh oh! We set the background color for all section elements, including the drink menu and about sections. That's not what we wanted so let's fix it. The HTML element for "Small plates" also has a class attribute name small-plates. Change the selector from section to .small-plates.

When we apply CSS rules to class attributes, prepend a . prepended to the selector.

This is an example of overriding a global style. The background color for the entire page is one color, but we defined a different color part of the view.

Using the element's class to allow us to target only the elements with the class name, in this case just the "Small plates" section, instead of all elements of the same type.
To help make the navigation and footer area pop, select a background color to use. Look at the index.html file to identify the selectors for the navigation and footer sections. Since these are global styles, declare the styles near the top of styles.css file.

Need a little help? Expand this section for guidance.
The colors may be different depending on your color choice. Declare a style for nav after the style for body and add background-color: #cb6f10;. Declare a style for footer and add background-color: #cb6f10;.

Nice work!

Celebrate with a toast with your neighbors. Take a screenshot and share on Slack so we can all admire your color selection.

Checkpoint

Compare your styles.css against the answer key for your work so far. It might look a little different depending on the color palette you chose.

Expand this section to compare your work.

You can also compare your styles.css file with our answer key if the image is too difficult to read.

References and helpful links

Mozilla Developer Network CSS reference documentation

Cloud IDE instructions

CodeSandbox instructions

You will use CodeSandbox tonight as your Integrated Development Environment. Any time the worksheet references Visual Studio Code, use CodeSandbox instead.

Follow the instructions below to get your environment going.

Navigate to CodeSandbox.
Click the Create Sandbox button at the top right of the screen.
In the New Sandbox page, click the Sign in with GitHub button at the top right of the screen.
Use your GitHub credentials to sign in.
In the New Sandbox page, select Import tab and paste the following URL into the input box labeled GitHub Repository URL...: https://github.com/KansasCityWomeninTechnology/CSSCompilerPractice/tree/codesandbox
Click Open Sandbox to create your project.
Once the project loads, CodeSandbox displays 3 panes. On the far left you will see your project files. In the middle you'll see your code in the index.html tab. On the right you will see your application. CodeSandbox automatically displays your application and updates after you save your file, just like Visual Studio Code's Live Server extension.
Before you start following the worksheet, click the Fork button in the toolbar. You'll see it at the top right of your screen. This makes your own copy of the project so you can save your changes.
You created your HTML file and are ready to go! Jump over to Create and link the stylesheet section.

CSS Basics

CSS Basics

Prepare the HTML file

Create and link the stylesheet to the HTML

Resize images using relative and absolute sizes

Change the color of the title

Cascade background color changes

Nice work!

Checkpoint

References and helpful links

Cloud IDE instructions

CodeSandbox instructions

results matching ""

No results matching ""