This is my first post posting HTML inside of this box, so I apologize if it is not done correctly; there is no option that shows how to do it correctly so bear with me (:
I am on the Create a custom CSS Variable in the Responsive Web Design, but I have a question… how does doing div class=“penguin” tell the system to automatically create the shape of a penguin? Where in this code does it START? I would like to know because it really does not break it down at all; one just SEES a penguin, but one does not SEE where the penguin began (:
shows you how the PENGUIN should look.
The other things like right-hand or left-feet shows you how the RIGHT HAND or the LEFT FEET of the PENGUIN should look.
Hi @mcmichaeltyler93!
Because I am not entirely sure how to answer the question I will put it like I think about it.
Everything that is placed between and are just styling elements as you might have understood. No actual “operation” as such is being done here. In the simplest terms it is similar to telling a painter to get a particular color a room, but not really saying what room should have that color. In reality we are actually sending the painter very specific instructions: For the item I am calling “item1” I want these shapes and these colors and this size and once you get here I will point where I want item1 to be.
That part where the painter is doing the work is covered by the code following after, the code that looks like this:
In this small section I have inserted, we can see that our penguin has a section we call “penguin-bottom”. That section actually consists of several even smaller parts “right-hand”, “left-hand”, “right-feet” and “left-feet”. Basically we are telling the painter, that we want here I want the item I called"right-hand" to be etc. for each part.
Does this explanation make it clearer for you? Or is there still something that feels strange about it? Let me know.
(in my own experience I have solved a lot of questions I had by simply trying to explain it to someone else, as it forces you to really think the problem/question through before you can put it to words).
Hope it helps , if it did you can mark it as “solved”.
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
I’m just going to explain some basic concepts and I hope it helps you understand better what is going on.
Writing <div class ="penguin"></div> it just means that we added a div into our HTML, and we gave it and identifier a class name, so we can style it by referring to the class name “penguin” (or whatever name we choose).
An empty div is an abstract empty square. (look up CSS Box Model for more information) and with the help with CSS and its properties (like background-color) I can change how that div is displayed.
So let’s say I want to create a face with two big eyes. I will have to declare two div inside a bigger div. And gave them a class name to be able to style them. And as explained, the naming of the classes is arbitrary.
.eyes{
background-color : white; // this for the color of the box
border-radius :100%; // this will round the four borders of the box to the max which will make the box look like a circle
height:100px; // this for the height of the box
width:100px; // this for the width of the box
margin-top : 20px; adding distance space from the top outside of this div
}
.face{
background-color : black; // this for color of the box
border-radius :100%;
height:300px;
width:300px;
display: flex; // this and the three next properities are for placing divs inside the this div next to each other
flex-direction: row;
justify-content : center;
}
The same ideas were used to create the penguin with more complexity. I advise to just start changing the variables of the properties and see what happens to understand better the behavior of each property.
So typing .penguin means that CSS has a penguin automatically programmed to come out as a penguin? So if I wanted to make a skyscraper, I would just type .skyscraper and a shape of a skyscraper would come out?
No, this is not true. The penguin is not “automatically programmed”, we have to tell the program how to build it.
In the code we say that the div-element (that we call “penguin”) should consist of two big parts (“penguin-top” and “bottom”) and then we describe what smaller pieces are included in “top” and “bottom” respectively.
Me and belghiti.brahim both gave an explanation of how the code acts, if you want to read those. If one of them helps, you can mark one as “solution”.
, if it did you can mark it as “solved”.
