Learn Basic CSS by Building a Cafe Menu - Step 60

HTML-CSS
1

So I’m trying to dabble and experiment in seeing if there’s another way to accomplish the same goal of making ‘Est. 2020’ an italicized font by just using the ‘em’ element instead of using a class selector. I took it out of the ‘p’ element and changed it to ‘em’ then went to ‘text-align: center’ property took off ‘p’ in the list and put ‘em’. Although I know it won’t pass my code, I thought maybe it would show accurately on the preview. It did in fact italicize the text but it didn’t center it. Can someone help me understand why not please? Thank you!

2

Hello and welcome to our forum,kindly post your entire code here so that we can help.

5

code.PNG
code.PNG1706×865 281 KB

1 Like
6

code
code440×808 33.6 KB

7

Please post your actual code instead of images. Use the format button that looks like </> and paste your code between the lines

8

This is the index.html side:

<main>
        <h1>CAMPER CAFE</h1>
        <em>Est. 2020</em>
        <section>
          <h2>Coffee</h2>


h1, h2, em {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}

h1, h2 {
  font-family: Impact, serif;
}

.item p {
  display: inline-block;
}
9

the html code isn’t showing

10

I’ve edited your code 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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
11

IMG_4913
IMG_49131512×2016 1.27 MB

12

thank you for explaining that. my first time posting :sweat:

13

Please dont use another users topic for questions about your own topic

14

Im not at my computer right now, but in a few minutes I can run your code and address the question

15

So I am going to be honest, I was not able to style that. I did see some examples online that people did, but I am not sure how when the css does not work for that. However, it should be noted that you would probably never seen it done that way. If you see the em element used it is going to be used with a p element. For example,

<p> I am <em>using</em> the em element </p>

If its used, that is more than likely how you are going to see it used. Its not meant to represent text like the paragraph element, but it adds emphasis and that bring me to the next point

You do not want to use the em element to italicize text. I will add a link you can read through, but I will quote part of the article here

“Typically this element is displayed in italic type. However, it should not be used to apply italic styling”

" The <em> element is for words that have a stressed emphasis compared to surrounding text"

So while in some online example they may show that it can be done, it shouldnt be done and the element should not be used in the way you are trying to use it

16

Thank you so much. I didn’t know I could put the ‘em’ element inside the ‘p’ element or maybe I did and just forgot. I did it and it worked to italicize and center the text like I wanted it to so I’m happy lol but I’ll keep in mind what you explained about not using the element in that way. I’m learning a lot and I’m grateful for patient people like you who are willing to (redundantly) explain things to noobs like me.

17

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.