Learn

Browsers are based on browser engines—the core component responsible for rendering HTML, CSS, and JavaScript in the browser. For example, Chrome, Opera, and Edge use Blink as their browser engine, whereas Firefox uses Gecko and Safari uses Webkit. Each of these engines renders features such as margins, padding, colors, or text slightly differently. This is because different browsers have different default styles.

For example, the default text color of the <a> element in most browsers is #0000EE, but in Internet Explorer 11, the value is #0066cc. We can use tools such as browserdefaultstyles.com to compare default styles across browsers.

There are also tools that we can use, such as normalize.css and minireset.css, to eliminate differences between browser default styles and ensure that all elements are rendered the same way across browsers.

Instructions

1.

Take a look at the bulleted list in the website’s menu on the right. Are the bullets flush to the text?

Open Pleasant Cafe’s website in a different browser—if you are using Firefox, it is recommended to open it in Chrome. If you are using Chrome, it is recommended to open it in Firefox. Look at the bulleted list again. How is it different?

Click on the hint below to reveal the answer!

2.

Now, take a look at the header text in both browsers. How does the word “Pleasant” look?

If you open index.html, you’ll notice that the “Pleasant” text in the header is wrapped in <strong> tags. Visit browserdefaultstyles.com and look up the <strong> element. How is the default style of the element different between Chrome and Firefox?

Click on the hint below to reveal the answer!

3.

Let’s make sure the list and the <strong> element in our website render consistently across different browsers by explicitly setting their styles.

In style.css, inside the ul selector ruleset, set the list-style property to be none. Then, inside the strong selector ruleset, explicitly set font-weight to be bold.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?