Use stylesheets continued Revision Notes

CSS (Cascading Style Sheets) is a language used to define the presentation of HTML content. It separates the visual design from the webpage's structure and content, allowing easier maintenance and consistent styling across multiple pages.

The presentation layer controlled by CSS includes colours, fonts, spacing, alignment, and table formatting. By using CSS, designers can change the look of a website without altering the HTML content itself.

CSS can be applied in three main ways: inline styles directly within HTML elements, internal stylesheets embedded in the HTML document's head section, and external stylesheets stored in separate.css files linked to the HTML. External stylesheets are preferred for larger sites because they promote consistency and reduce duplication.

• CSS controls the presentation layer, separate from content.
• Three methods to apply CSS: inline, internal, external.
• External stylesheets enable consistent styling across multiple pages.

CSS properties allow detailed control over webpage appearance. Background properties include background colour and background images, which can be set to cover an element or repeat.

Font properties control the font family (e.g., Arial, Times New Roman), size (e.g., 12px, 1.2em), colour, alignment (left, centre, right), and style attributes such as bold and italics.

Tables can be styled extensively: you can set the size of the table, background colours for the table, rows, headers, and data cells. Alignment can be horizontal (left, centre, right) or vertical (top, middle, bottom). Spacing between cells (cell spacing) and inside cells (cell padding) can be adjusted. Borders can be customised for colour, thickness, visibility, and can be collapsed to remove double borders between cells.

• Background: colour and images control element appearance.
• Fonts: family, size, colour, alignment, bold, italics.
• Tables: size, background colours, alignment, spacing, padding, borders (collapsed, colour, thickness, visibility).

A CSS class is a reusable style definition that can be applied to multiple HTML elements. Classes are defined in the stylesheet with a dot prefix (e.g.,.highlight) and can include any combination of background, font, and table properties.

Using classes promotes consistency and reduces repetition. For example, a class named.warning could set a red background and bold font, which can then be applied to any paragraph or table cell needing that style.

Classes differ from styles applied directly to elements because styles are specific to one element, while classes can be reused across many elements, making site-wide changes easier.

• Classes are reusable style definitions prefixed with a dot.
• Classes can include background, font, and table properties.
• Applying a class to elements ensures consistent styling and easier maintenance.

CSS follows a hierarchy to determine which styles apply when multiple styles target the same element. Inline styles have the highest priority, overriding internal and external styles.

When multiple external stylesheets are linked, the order of linking matters: styles in later stylesheets override earlier ones if they target the same properties.

Understanding this cascade is essential to avoid unexpected styling results. For example, an inline style setting font colour to blue will override an external stylesheet setting it to red for the same element.

• Inline styles override internal and external styles.
• Order of linked external stylesheets affects which styles apply.
• Understanding cascade prevents conflicting styles and unexpected results.

External stylesheets are saved as.css files and linked in the HTML document's head using the <link> tag with the href attribute pointing to the stylesheet file.

It is important to use relative file paths when linking stylesheets. Relative paths specify the location of the stylesheet file relative to the HTML file, ensuring the link works correctly regardless of the root directory or server setup.

For example, if the stylesheet is in a folder named 'styles' inside the website root, the href might be 'styles/style.css'. Using absolute paths (full URLs or root-based paths) can cause issues when moving files or deploying the site to different servers.

• External stylesheets are linked with the <link> tag in HTML head.
• Use relative file paths to reference stylesheets for portability.
• Example: href="styles/style.css" links to a stylesheet in a 'styles' folder.