CSS, or Cascading Style Sheets
CSS, or Cascading Style Sheets, is used to style HTML pages. It contains various constructs that allow you to change things such as fonts, sizes, colors, and layouts.
To follow along with the below-mentioned prompts, you’re recommended to create a product.css file, or you can just wait until the Assignment section later in this chapter; it is up to you.
First CSS
To leverage our AI assistant, we can place a CSS-type comment in a CSS file just like we do with code, for example:
.product {
/* apply padding and margin */
padding: 10px;
margin: 10px;
}
As was mentioned in the previous chapter, comment styles are different depending on the type of file. HTML comments look like so: <!-- -->. CSS comments use /**/ and JavaScript understands both CSS-type comments and //. In this chapter, you will be using /**/ as you’re dealing with CSS.
In GitHub Copilot, you can keep pressing the Return key, followed by the Tab key, to generate and accept new suggestions without needing to type a new prompt. Your AI assistant can provide suggestions based on the first typed prompt and what code exists in your file.
How this affects our CSS file above is that once we type our first CSS comment, we can keep pressing Return and Tab and the AI assistant will generate CSS properties that usually go together with padding and margin. The following output is the result of using this technique of pressing the Return and Tab keys and relying on the open file’s context.
This is how it looks for product.css:
.product {
/* apply padding and margin */
padding: 10px;
margin: 10px;
/* apply border */
border: 1px solid #ccc;
/* apply border radius */
border-radius: 5px;
/* apply background color */
background-color: #fff;
/* apply box shadow */
box-shadow: 0 0 5px #ccc;
/* apply display */
display: inline-block;
/* apply width */
width: 200px;
/* apply text align */
text-align: center;
/* apply text decoration */
text-decoration: none;
/* apply color */
color: #333;
}
Now that product.css is created with the above content, we can include said CSS file in an HTML file. Switch to said HTML file (if you’re typing along, create an index.html file), then add the following prompt at the end of the new file:
[Prompt]
Page that includes product.css.
[End of prompt]
[Prompt response]
<!-- page that includes product.css -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Product</title>
<link rel="stylesheet" href="product.css">
</head>
<body>
<div class="product">
some text
<div class="product__image">
<img src="https://via.placeholder.com/200x200" alt="Product Image">
</div>
<div class="product__info">
<h2 class="product__name">Product Name</h2>
<p class="product__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
<p class="product__price">$9.99</p>
<button class="product__buy">Buy</button>
</div>
</div>
</html>
[End of response]
Observe how it not only correctly adds a link tag to include product.css but it also generates HTML that might fit a product.
The following is the output:
Figure 5.1: Product CSS showing a product image, title, and description
CSS by name
So far, we’ve added a comment to generate suggestions. But there’s another way we can generate suggestions for our CSS file rather than placing a comment for Copilot to react to. The “other” way consists of creating an empty CSS class, .product, and placing the cursor inside of it. Then use the Return key and the Tab key and see what Copilot generates until you’re happy.
Here’s how you start off your CSS file:
.product {
}
Now place the cursor inside of the curly brackets, {}, and use the Return and Tab keys for each new line you want suggestions for.
Here’s what the end result could look like:
[Prompt response]
.product {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
margin: 0 auto;
padding: 0 0 50px 0;
background-color: #f5f5f5;
}
[End of response]
