DEV Community: Babatunde Sulyman

How to build a Piano With CSS.

Babatunde Sulyman — Sat, 14 Oct 2023 17:29:39 +0000

The tech world is swarmed with many developers ranging from different stacks with the possibility of getting jobs from companies becomes extremely thin.

To get a job, the core requirement often asked by the recruiter is a portfolio which looks something like this: a blank portfolio meets rejection or is tossed to the bin or not attended to at all.

The first step to take as a developer is to have a standard portfolio that contains a list of outstanding projects to showcase your potential to the hirer(recruiter) when hiring.

There are many web development languages to build a project, like JavaScript, Python, etc., but we will be using CSS in this tutorial as it's the simplest to use.

What's CSS

CSS (cascading style sheets) is a language that allows you to customize your HTML document. HTML document constructs your website structure, and CSS styles the interior decoration of a website as you want. With CSS, your website has the following:

● An appealing design.
● Proper layout.
● Responsiveness (a web page that looks good on mobile and desktop devices.)

In this tutorial, you will learn how to build a piano with CSS in a few steps.

Prerequisites

For you to follow along with the article, you must have:

A basic understanding of HTML as there would be a revision on some HTML elements, If not, you can check this to revise your learning.
You also need a text editor and an image for the project. You can download the image through this link.

Table of Content

Choosing a text editor.
Choosing a text editor.
Linking CSS to HTML file.
The project.
Resources.
Conclusion.

Choosing a Text Editor

First, before you start writing the code, you need to have a working text editor, i.e. a code editor. If you have installed your text editor, launch it and click the workspace navigation bar. It should show something like this:

I’m using VS code, and this is my setup page

The best way to enjoy coding is to see what you are building live. For that, You will need to install an extension called “live server” on the VS code. A live server refreshes the web page when you make changes to your HTML file/CSS file.

To add a live server, follow these steps:

Tap the icon extension on the right side of the VS code.

Search for the live server and install it.
Go back to your html file and choose “open with live server” from the menu. Or press alt+l+alt+O.

Your webpage is ready to be seen in your browser.

How to Get Started

Create a folder

As the heading implies, you need to create a unique folder where your code files will sit. The two files are HTML and CSS files for this project. With this setting, the files are separated, and you can debug your code in peace.
You can use "Piano project," as the folder name.

Inside the folder, create the two files mentioned above. If you are uncertain, type index.html (for the first file) and style.css (for the second file).
Remember to check your spelling.

You are getting closer!
Your project setup should look similar to this if you are using VS code.

Linking CSS to an HTML file

Although you may embed your CSS codes inside an HTML file (either internal or inline CSS), that invites rough work. The goal is to have clean and readable documentation. To achieve that, we will be using external CSS which allows us to make multiple changes to our HTML elements (webpages).

The external CSS has to be linked for it to work.
To do that, copy the code below, then paste it within your <head> element in your html file.

Open the index.html file and add the following code:

 <link  rel="stylesheet"  href="style.css">

_ An external CSS nested in an HTML file_

The Project

You will set the piano structure with HTML and style it with CSS. Remember that our content should be in the body element.

The Piano’s structure is in a few steps:

Step 1: Create a container for the Piano keys

How do you create a container? You can use the <div> element as a container that serves as:
● A division from other common semantic elements.
● As a parent for its child elements.
● A container.

The div element is now serving as your Piano where its keys (children) will be.

To separate the div from other elements, give it an #ID selector with the name “piano.”
Write the code below:

<div id="piano"></div>

A few things to know:

The div has the Id attribute with the name Piano.
To create an Id, type the word Id, followed by the equal sign, and quotation marks.
The ID attribute accepts a unique name.

Step 2: Add an image
Go and embed the image link provided at the beginning of this tutorial to your html image tag.
Like this:

<img src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freecodecamp logo" class="logo">

To add an image, you must have:

An HTML image tag that starts with an opening tag; the greater than sign(<), has an SRC attribute; defines the path of the image, an Alt Attribute; the alternative name to the image when the page is loading or the browser can't fetch the image source and no closing tag.
Note:

● Img: stands for an image
● Src: is a source for the image
● Alt: means the Alternative name of the image

Step 3: The Piano’s keys

The Piano must-have keys, without the keys, there is no Piano. After the image element, add a div with a class of keys. Within the .keys element, nest seven div elements with the class name "Key”:


<div class="keys">
    <div class="key"></div>
    <div class="key"></div>
    <div class="key"></div>
    <div class="key"></div>
    <div class="key"></div>
    <div class="key"></div>
    <div class="key"></div>
</div>

Note:
● The div .keys is the parent.
● The keys element holds seven div elements
● The seven div elements are your piano keys.

The class attribute, unlike the #Id, accepts more values (names). Before the next step, you need to separate the black key from the white key. Add “black--key” to the second, third, fifth, sixth, and seventh “key” elements you created.

Write this code:

<div class="key "></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>

Note:
● The class attribute takes many values.
● There must be a space between the first and second values.

Step 3: Copy and paste

To round off the Piano’s structure, copy and paste the seven .key elements twice into the .keys div.

The key elements must be 21.

<div class="key "></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>

<div class="key "></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>
            <div class="key black--key"></div>

Now, you have completed your piano structure. Open your CSS file and let's see the magic.

In your HTML file, you created id and class selectors for the div elements. It's time to use these selectors.

But do you know that:
Everything on the web page is a box model?

Why?
This tells the browsers to add default margin and padding values to an html element. Despite that, you can reset it to fit your Piano.

First, change the HTML (webpage) default box model with the border-box property and give it a value of box-sizing.

html{
    box-sizing: border-box;
}

The box-sizing property respects the size of an element. It also takes new width and height values to resize the element.
To learn more about the border box, click the link.

Next, write the code below,

*, ::before, ::after{
    box-sizing: inherit;
}

Note
The * is a universal selector that targets all the elements on the page.
The Before and After selectors are pseudo-elements that target an element.
The** Before** is for the first child of the selected element,
The After targets the last child of the selected element.
The *has the box-sizing property with a value of Inherit.
The * is inheriting the value of the HTML box-sizing value.

Style the Piano

Give your Piano a background and some properties to see what you have been doing.
Write the code below:

#piano{
    background-color: #00471b;
    width: 992px;
    height: 250px;
    margin: 80px auto;
    padding: 90px 20px 0 2opx;
    position: relative;
    border-radius: 10px;
}

Let's define the above code:

● Background -color: the background for the Piano.
● Width: The values for the Piano width.
● Height: the values for the Piano height.
● Margin: the values place the Piano in the center.
● Padding: The values create space inside the Piano. In other words, the space for the top, left, bottom, and right of the Piano.
● Border-radius: the four outer edges of the Piano

The Keys

You are to use the class selector with the value "keys". This will create a container for the black and white keys.
Copy the below code:

.keys{
    background-color: #040404;
    width: 949px;
    height: 180px;
    padding-left: 2px;
    overflow: hidden;
}

In the above snippet, the .keys element has:
● A padding-left property that shifts the key element to the left side inside the Piano
● Overflow: the value Hidden means the keys and their children will not move outside the Piano.

The key

This creates white keys for the piano

Take a look at the code:


.key{
    background-color:#ffffff;
    width:41px;
    height: 175px;
    position: relative;
    margin: 2px;

}

Note:
● Background color: the value creates a white color for the keys.
● Width: these values place the white keys within the keys’ container.
● Height: the value adjusts the white keys but not above the keys’ container.
● Margin: this spread and put space between each white key you have.
● Position: the "relative" value restricts the white keys to the .keys element i.e. the white keys are within the .keys element environment.

Remember the .keys element, which you created before, is the parent of the new white keys.

The position and shape of the white keys are not good-looking. These two properties will change the position and shape of the white keys.

Add the below code to it:

Float: left;
Border-radius: 0 0 3px 3px;

Check it out!
Note:
● Float: this specifies how an element should be floated. It’s used when an element has a box but isn’t positioned.
● Border-radius: defines the outer edge of an element.

The black keys
As you have seen the white keys, let’s create a selector for the black keys. To save you time, the Pseudo selectors you prepared will create the black keys.
See the code below:


.key.black--key::After{
    Content: "";
    Background-color: #1d1d22;

How did I do that?

The pseudo selector which is set to AFTER targets what follows the .key elements and gives it a new style.
The content should be empty when you don't.
The background of the element is different from the .key elements

Let's continue. Position the .black—key as absolute and give it a negative value for the left.


Position: absolute;
Left: -18px;

The above code takes the .black—keyfrom the .key elements to the left.

Note:

The position absolute moves an element from its normal flow and places it nearest to the parent. Who is the parent? The .key selector.
A position absolute must have a parent element, or else it overlaps other elements.

Include the width and height to make the black keys distinct from the white keys. Add the code below:


width: 32px;
height: 100px;
border-radius: 0 0 3px 3px;

The above increases the black keys height and width but the border radius is the same as the white keys.

The image of the Piano

Set the image like this:


.logo{
width: 200px;
position: absolute;
top: 23px;
}

The above sets the image with position absolute, making it a bit lower from the top. With these steps, you have built a Piano with CSS, and you will be able to use CSS for your next project.

The Piano Output

When you run this project you get this output.

Conclusion

CSS is a language that formats a webpage by giving it a dynamic style as you want. In this article, we covered some CSS properties and learned how to use them. In the end, we used CSS to build a Piano.

I hope you have gotten what you expected from this article. Please feel free to share your opinions by commenting below.

Resources

● Developer Mozilla
● FreeCodeCamp

CSS Variables: Understanding the Var() function and how to use it.

Babatunde Sulyman — Tue, 08 Aug 2023 19:13:52 +0000

Let's pretend you have one hundred lines of code in your CSS stylesheet. In the long run, you remember that the H1and p text color (black) is the same which distorts the color scheme of your project__ the texts are dimmed and unreadable.

You would need to scroll up to change either the H1 or P text-color value. Instead of skimming the lines to effect the change, you can use CSS Variables to change the values.

A variable is a unit/name that stores a value and could be reused throughout the CSS stylesheet.

Variables(also known as custom properties)are defined by a developer for ease, and to avoid repetition Of values and usage on elements.

How to declare a Variable

Variable accepts a unique name. It's important to give it a name you will remember.

Variable declarations must begin with:

Two dashes(--)
A custom property name,
A custom property value,

Example



--color-name:#1b1b22;

In the above code, the --color-name is the custom property name, while the #1b1b22 is the value.

What is a Var() function

A Var() function retrieves the value of the variable name and applies the value to whatever property you use it on. Var() function is declared with a parenthesis, followed by the custom property name.
Syntax



Background-color: var(--color-name);

The Var() function will collect the variable name’s value to style the Background-color for the given element.

In this case, the Var() is looking for a value to paint the element’s background.

Here is an example

Html



<h1>I accept variable to change  my color</h1>

CSS



/* variable name: the --color-name */
    text-align: center;
    --color-name:red;


    /* use the --color-name as the h1 text color*/
    color: var(--color-name);

Result

In the above code, the h1 text color value is red; the Var() retrieves the value from the --color-name __ the variable name __ property.

The Var() function arguments

The Var() function accepts two arguments. The first argument’s value is for the element you want to style, and the second argument stands for the fallback value.

Var() with no fallback value



background-color: var(--body-color);

The --body-color is the first argument’s value. No fallback value is supplied.

Var() with a fallback value



background-color: var(--body-color, orange);

The --body-color is the first argument value; Orange is the fallback value.

Note the following:

Fallback is used when the browser couldn’t load the first argument value, or the value is invalid
Fallback is optional.
Use the comma to separate the first and second arguments.
You can also use the Var()function as the fallback value argument. To do that, use a comma to separate the var() function declaration.

Here is an example



background-color: var(--color-name),  var(--color-name);

The background-color has a Var() function as the fallback value.

Type of variable scope

Local variable scope
Global variable scope

Local variable scope

The local scope variable is described in the element’s selector in the style sheet. All the above examples are locally scoped, and the variables could be used only for the nodes of the element.

For example:



aside{
    --style-color1:#1b1b22;
}

From the above code, the –-style-color1 is locally scoped to the document’s <aside> elements, which means the variable is limited to the <aside> elements.

The advantage of using a local scope variable is that it overrides the global variable.

This means if you have two custom properties with similar names but different values, the browser will ignore the global custom property name and use the locally scoped one.

Example



root{
--main-color:blue;
}



p{
    --main-color:brown;
    color: var(--main-color);
}

In the above code, the -–main-color with the value of brown will override the global variable in the root selector for the

element.

However, there is another way to style all your elements with one variable’s value.

Global variable scope

The global scope is distinct because you are to declare it in the:root selector at the top of your stylesheet.

The global variable in the: root selector is the apex level in CSS.

When your variables are there, you can style all the selected elements, and change the variables values. Any changes you made to a value will affect the element.

Follow the steps below to create a global variable at the top of your stylesheet.

Type a colon sign, or, simply put :
Write these four letters: root
Close it with the curly braces sign i.e {}

Here is an example



:root{

}

You have set the global variable scope that awaits the variable name plus its value to style your elements.

To round up this tutorial, Let’s create 4 boxes to practice global variable scope.

Open your html document to create the boxes, like this.
Html



<section>
       <div class="box1">box 3</div>
       <div class="box2">box 2</div>
       <div class="box3">Box 3</div>
       <div class="box4">Box 4</div>


   </section>

CSS
Create a container



section{
    display: flex;
    flex-direction:row;
    justify-content: space-between;
    background-color: black;
    margin: 2px;
    padding: 10px;
}

Next, the boxes for the container




.box1{
    width: 250px;
    height: 250px;
    border-radius: 10px;


}
.box2{

    width: 250px;
    height: 250px;
    border-radius:  10px;

}
.box3{

    width: 250px;
    height: 250px;
    border-radius: 10px;
}
.box4{

    width: 250px;
    height: 250px;
    border-radius: 10px;

}

When you preview the code with your live server, the browser is supposed to show the image below.

Result

Now, scroll to the top of your style sheet to set the global variable scope.



:root{
    /* insert  your custom property names and values
   */
}

Inside the:root selector, add these custom property names and values.



   --box-color1:#24242a;
   --box-color2:#454533;
   --box-color3:#fff444;
   --box-color4:#30204a;

Style each of the boxes' background-color with the above custom properties.

Like this:

Box 1




  background-color: var(--box-color1);

Box 2




  background-color: var(--box-color2);

Box 3



background-color: var(--box-color3);

Box 4



background-color: var(--box-color4);

Result

The browser should display the above image when you reload it. If you don’t get the same result, check the code again and preview it.
You may play with the box colors by changing the custom property names in the Var() declaration.

Important of CSS Variable:

CSS variable is case-sensitive i.e. --new-color is not the same as --New-color for the custom property name.
DRY: Instead of repeating a value, say, #1b1b22, use CSS Variables to save your time.
Variable value is easy to comprehend. For example, --window-color is clearer than #773fff.
DRY means “Don’t repeat yourself.”

Conclusion
In this tutorial, You have known what CSS variable means, the two types of variable scope, the var() function, and its arguments. I hope you learn something new today from this article. Feel free to drop your comment.

Also, you can connect with me on Twitter.
Here

Display Property in CSS: With Practical Examples

Babatunde Sulyman — Tue, 01 Aug 2023 13:51:42 +0000

The Layout of elements on the webpage assists the browser to position the elements at the right spot. Elements' layouts are interpreted by the display property. In HTML, elements on a webpage are boxes (rectangular) that are attributed to their default values by the browser. Each element has its special attachment in the Flow layout

With CSS display property, the behavior of elements is controlled and identified. What this means is: should the element start a new line, occupy the full space, how an element should be displayed, or have a default value given by the browser? Knowing how to use the CSS display property is important for element layout.

CSS Display property syntax:

Display: value;

When declaring a display property for an element, CSS syntax requires a value. In other words, the value attached to the display property fixes the output result. Furthermore, this locates the individual model application of the value.
For example

element-name{
    display: value;
}

The display property has no value for the element name.
Overview

Overview

A display property controls the behavior/layout of HTML elements on the webpage. It must have an element to control its layout.

The syntax of the display property needs an assigned value. The value interprets what happens to the element.

There are different CSS display property values, however, a few will be discussed in this tutorial and resources will be provided for the rest.

Values

None
Hidden
Inline
Block
Inline-block
Flex
Grid

None

A display property with a value of none indicates that the element should not be displayed on the webpage. But it’s more appropriate to use the visibility property if you want to hide the element.
Example

Html

<h1 class="none">im hidden</h1>

.none{
    display: none;
    background-color: aqua;
    color: red;
}

The h1 text will not appear on the web page as the display property value is NONE.

Hidden

A value hidden hides the element from the webpage. A value hidden is different from the value NONE for three reasons:

It doesn’t delete the space occupied on the page.
It stores and may be reused later.
It’s used with the visibility property.

Example

Html

<h2 id="hidden">im hidden</h2>

#hidden{
    Visibility: hidden;
}

The h2 text is not visible yet it is there and may be reused later.

Inline

A value INLINE displays an element not on a new line i.e. the element takes the available space and doesn’t encroach on other elements lines.
Example

Html

<span>
       I AM INLINE

   </span>

span{
background-color:red;
display: inline;
color: black;
}

Result

The display property value of the text (I am inline) is inline.

Note

The text doesn’t create a new line, instead, it transcends after the first paragraph.
The text occupies the given space.
Span is an inline element.

Block

The value BLOCK is the opposite of INLINE. Element with the display property value of BLOCK takes the whole space, and start on a new line. If there are block-level elements, the value will stack them after each other.

Example

Html

<p id="item1">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
         Assumenda voluptatem veritatis asperiores Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum perspiciatis quae, iure quia nesciunt, et aperiam temporibus nisi, cum iste dolorum doloribus tenetur sequi dolor dicta praesentium adipisci distinctio laboriosam nihil ratione. Eligendi totam deserunt unde dignissimos. Nam, modi expedita?
    </p>
    <p id="item2"> Lorem ipsum dolor sit amet consectetur, 
        adipisicing elit. Necessitatibus exercitationem 
        ex distinctio eum porro soluta eligendi tempore n
        emo harum sed nihil esse commodi sunt totam tenetur asperiores facere de
        bitis mollitia accusantium amet, eos cupiditate corporis dolore laudantium. H
        arum, amet consectetur?</p>
        <p id="item3"> Lorem ipsum dolor sit amet consectetur, 
            adipisicing elit. Necessitatibus exercitationem 
            ex distinctio eum porro soluta eligendi tempore n
            emo harum sed nihil esse commodi sunt totam tenetur asperiores facere de
            bitis mollitia accusantium amet, eos cupiditate corporis dolore laudantium. H
            arum, amet consectetur?</p>

#item1{
background-color: red;
display: block;
color: black;

}
#item2{
    background color:purple;
    display: block;
    color: orange-red;

    }
    #item3{
        background-color: blue;
        display: block;
        color: pink;

        }

Result

The three paragraphs__ item1, item2, item3_ have a value of BLOCK.

Note

The paragraphs start on a new line.
The first item, the second item, and the third item take their spaces.
P is a BLOCK-LEVEL element.

Differences between inline and block elements

• Inline elements: The element's width and height are not respected by the browser except if specified, still no effect.

block elements: the browser gives the block elements default width and height.

Inline elements: The elements can’t contain block element.
block elements: The elements can contain inline and some elements.
Inline elements: The elements have no top and bottom margin.
block elements:The elements have top and bottom margin
Inline elements: Inline elements begin not on a new line
on the other hand, Block elements begin on a new line
Inline elements: Examples:
<a> <link><button><ul><span>.

Block elements: Examples:
<div><p><section><form><fieldset><h1-h6> <header>

Assuming you have inline block-level elements on the webpage, the layout will look this like:

The block elements stack above each other but the inline element, which is BUTTON, stays where we put it and don’t take the whole space.

Inline-block

Display an element that performs as an inline element. The key points to know are:

That the element will have a width and height
The top and bottom margins are seen.
The padding works with the inline-block
The element sits next to other elements like inline elements
All these don’t work with the value in the line.

Example

Html

<a href="button">button</a>
<a href="button">button</a>
<a href="button">button</a>

a{
display: inline-block;
width: 100px;
height: 20px;
background-color: black;
color: white;
text-align: center;
text-decoration: none;
padding: 0;
margin: 20px;

}

Result:

Figure 1 links element with a display property value of inline-block:

The three links elements are inline but we turn them to inline-block.

Flex

A value flex displays an element as a block-level flex-box model. Flex-box position an element plus the content one-dimensionally_ on a row axis.
Example

Html

<div class="container">
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
    </div>

.container{
    display: flex;
    background: light slate gray;
    width:300px;
    height: 300px;

}
div{
    background: red;
    width:50%;
    height: 10%;
    margin: 2px;
    padding: 10px;
}

Result:

The value flex lays the items on a row axis.
Read to know more about Flex-box

Grid

A value grid displays an element as a block-level grid container. Grid repositions an element two-dimensionally_ on a column and row axis.
Example

Html

<div class="container">
    <div> grid item 1</div>
    <div>grid item 2</div>
    <div>grid item 3</div>
    <div> grid item 4</div>
    <div>grid item 5</div>
    <div>grid item 6</div>

    </div>

.container{
    display: grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows: auto auto auto;

    background: lightslategray;

    margin: 10px;
    padding: 45px;

}
div{
    background-color: dark cyan;
    color: white;
    margin: 5px;
    padding: 10px;
    border-radius: 4px;

}

Result:

The value grid allows us to create three columns and three rows.

Read to know more about CSS grid grid

Conclusion
Display property controls the behavior of elements on a webpage. In this article, we covered some display properties and learned how to use them.

I hope you have gotten what you expect from this article. Please feel free to share your opinions by commenting below.

Resources
Display properties
Display properties