It seems strange to be mashing two languages together in a single document. Is this common practice?


#1

Question

It seems strange to be mashing two languages together in a single document. Is this common practice?

Answer

One the web it is not unusual to see two languages mashed together in this way especially if we are looking at older sites. For example, some sites similarly couple the PHP and HTML languages.

While this type of tight coupling may not be all that uncommon, it is not a great habit to get into. As developers we should strive to “separate our concerns”. In the case of CSS, this means that we will usually want to keep our CSS out of our HTML document. In other words, it is best practice to use .css files rather than defining our styles inline or within the <style> tag. For a deeper dive into when inline styles might be advisable, take a look at this article.

In the next exercise you will learn how to create separate stylesheets!


FAQ: Learn CSS Selectors Visual Rules - CSS Setup Selectors - Style Tag
#2

The lesson says that if we define our styles within a tag for paragraph, it will effect all he paragraphs in the document. What if we want one of the paragraphs to be different? do we have to use inline style and manually change each on of the paragraphs?


#3

@reyhaneh.e

Literally just started CSS on codecademy a couple days ago but…

You could give your

elements different Class to tell them apart.

Example:

In the HTML:

<p class="example1">Example text</p>

<p class="example2">More example text</p>

In the CSS:

.example1 {
     color: red;
}

This should turn your paragraph element that has the class “example1” to red.


#4

OK it is great that “best practice” is to use .css files rather than defining styles inline… Question: Why do you not point out the new “tab” for style. css file that appears at the top of the code space next to index.html? I was so focused on the “code” that I missed this on the first go around and did not see it till several clicks later in this exercise… assuming the user is a beginner, as I am, why does the text not not mention this new interface item…and what its function is?