In this course, we will be learning Web Design and Development Using CSS. CSS (“Cascading Style Sheets”) determines how the elements in our XHTML documents are displayed and formatted.
By using CSS, we separate the content of a web page from the presentation (format and styling) of that content.
CSS enables us to make all pages of our website look similar and consistent. The power of CSS is that it allows us to make site-wide formatting changes by making edits to a single file.
Three Ways to Use CSS
We can add CSS code in any combination of three different ways:
- Inline Style – CSS code is placed directly into an XHTML element within the <body> section of a web page.
- Internal Style Sheet – CSS code is placed into a separate, dedicated area within the <head> section of a web page.
- External Style Sheet – CSS code is placed into a separate computer file and then linked to a web page.
Internal vs. External Style Sheets
Internal Style Sheets:
are appropriate for very small sites, especially those that have just a single page.
might also make sense when each page of a site needs to have a completely different look.
External Style Sheets:
are better for multi-page websites that need to have a uniform look and feel to all pages.
make for faster-loading sites (less redundant code). allow designers to make site-wide changes quickly and easily.
External style sheets create the furthest separation between content and presentation. For this reason – and the others listed above – we’ll consider external style sheets to be the best option when creating a new site.
CSS Text Properties
Property Some Possible Values
- text-align: center, left, right, justify
- text-decoration: underline, line-through, blink
- color: blue, green, yellow, red, white, etc.
- font-family: Arial, Verdana, “Times New Roman”
- font-size: large, 120%, 20px (pixels)
- font-weight: bold, normal
- font-style: italic, normal
The actual list of available properties and values is quite long, but the ones listed above are the most common for formatting text via CSS.
How Browsers Process CSS
A web browser will process all CSS code it encounters, even if it is from all three methods.
For example, an external style sheet could define the font of a heading, an internal style sheet could specify the font size of the heading, and an inline style could italicize the heading. All three would be applied.
Sometimes a browser will receive conflicting instructions from the CSS code. For example, what if each of the above CSS sources specified a different color for the heading text?
Browsers need a consistent way of settling these formatting conflicts in a consistent fashion. That is where the “cascade” of cascading style sheets comes into effect.
What Does "Cascading" Mean?
We use the term “cascading” because there is an established order of priority to resolve formatting conflicts:
- Inline style (highest priority)
- Internal style sheet (second priority)
- External style sheet (third priority)
- Web browser default (only if not defined elsewhere)
For each XHTML element, the browser will see which styles are defined inline and from internal and external style sheets. For any conflicts detected, it will use this priority system to determine which format to display on the page.
In the prior example, the heading text would display in the color specified by the inline style, which outranks all the others.
If multiple, conflicting styles are defined in the same style sheet, only the final one will be applied. Be careful, as this is another common mistake committed by beginners.
What is the Box Model?
The box model is a tool we use to understand how our content will be displayed on a web page.
Each XHTML element appearing on our page takes up a “box” or “container” of space.
Each box size is affected not only by content but also by padding, borders, and margins.
By knowing how to calculate the dimensions of each box, we can accurately predict how elements will lay out on the screen.
As we build a new page, we can arrange these boxes on the screen, creating a balanced layout with white space around the content.
The importance of the box model concept cannot be overemphasized. It would be difficult and frustrating to create a website without understanding this concept.
Introducing the "div" Element
The <div> (“division”) element groups other elements on the screen.
By setting the width and height attributes via CSS, we can reserve a precise amount of space on our page for specific content.
The actual content is nested and contained within the opening <div> and closing </div> tags.
When we apply CSS styling directly to the <div> element, all the elements contained within that <div> will inherit that style.
By using multiple <div> elements as building blocks, we can design an entire web page layout.