Cascading Style Sheets (CSS):

HTML provides content and structure of a web page. CSS controls styling and layout of a web page. CSS can be imported to HTML from a separate file, defined in <style> tags within the HTML document, or declared using the style attribute within a HTML element.

inline css style

<!-- inline CSS style: -->
<p style="background-color: deeppink; font-size: 24px;">Paragraph text.</p>

internal css style

<!-- internal or embedded CSS style: -->

<style>
p {
    background-color: deeppink; 
    font-size: 24px;
}
</style>

<p>Paragraph text.</p>

or put html and css file into same folder location:

separate / external css style - html file

<!-- importing CSS style from separate file example: -->

<link rel="stylesheet" href="separate_file_css_example.css">
<p>Paragraph text.</p>

separate_file_css_example.css

/* importing CSS style from separate file example */
p {
    background-color: deeppink; 
    font-size: 24px;
}

exercises:

1. get all 3 examples working above
2. which method of defining CSS you prefer. why?
3. what are some of the benefits of each can you think of?
4. if i wanted 1 CSS definition to style my entire website which has multiple HTML pages, all linked and set out the same way, which of the above methods would work best for me? why?
5. if i had a single webpage that required multiple lines of CSS, which of the above methods would work best for me? why?
6. if i had one p element in the footer of 1 page that i needed to adjust only the font color of, only once, which of the above methods would work best for me? why?