Skip to main content
Engineering LibreTexts

4: CSS and Styling a Web Page

  • Page ID
    27558
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    Learning Objectives

    1. The purpose of CSS
    2. How to include CSS into an HTML file
    3. What the page header and footer are used for
    4. CSS syntax
    5. The 4 types of CSS selectors
    6. The difference between formatting and semantic tags
    7. How to define a header section of a web page
    8. How to combine CSS tags to reference specific sections of a document
    9. How to include a separate CSS file
    10. How to style a simple form

    When creating a style for a web page, having a consistent look and feel to the application is important. The pages should look similar in format, and the behavior of buttons and menu options should work the same way across an application and suite of applications. Cascading Style Sheets (CSS) is the language used to style web pages, to make the pages look consistent and professional.

    The form as it has been presented so far just contains the form elements, with no styling to make it look more presentable. This is in keeping with an age-old programmer prejudice that if something works, who cares what it looks like. But application development is about more than making the page look nice. It is about how to design a User Interface/User eXperience (UI/UX) that makes it easier and more pleasant for the user. A good thing for programmers to remember is a system that is works but does not have users is as useless as a system that does not work.

    Because of their implicit bias to simply make a system work, it usually does not fall to the programmer to do the UI/UX. But they must interface with UI/UX designers and need to respect what they do. That is why a basic understanding of CSS is important.

    Like JavaScript, CSS is a language that is implemented inside of a web page. CSS uses the HTML <style>...<style> tags to contain the CSS attributes. The CSS attributes are mapped to HTML tags, ids, class names, or attributes to define how to style those elements.

    This section will cover how to style the form developed in Chapter 2, and thus will present information about CSS as it is needed. At the end of the chapter some extra examples will be given to cover some useful ways to apply CSS for specific formatting.


    This page titled 4: CSS and Styling a Web Page is shared under a CC BY license and was authored, remixed, and/or curated by Charles W. Kann III.

    • Was this article helpful?