Using just HTML, Alejandra was able to build a website that contains all of the content that she wants. But it doesn’t look very impressive—Alejandra knows that a basic black and white website won’t give her business the credibility she needs to find new customers.
That’s where CSS comes in! CSS is the language that provides style to the content of an HTML page. This includes colors, fonts, positioning, layout, and more!
Why do we need a separate language for content and presentation? This is an example of the computer science principle separation of concerns. Large codebases are kept maintainable when each section has clearly differentiated problems that it is trying to solve.
Since the styling rules are described separately from the content itself, if Alejandra adds more paragraphs, images, or other forms of content, she can expect them to be styled the same way as her existing content. This will save Alejandra time in the long run, especially as her website gets more and more complex.
After you’ve reviewed the diagram to compare the uses of HTML and CSS, continue to the next exercise.