Web Programming Lecture 3: CSS

Created by

@MatureOklahomaCity

Study Notes

Web Programming Lecture 3: CSS

CSS stands for Cascaded Style Sheets
HTML was not designed to contain formatting tags; it focused on content definition
HTML 3.2 introduced formatting tags like <font> and color attributes, complicating large website development
CSS separates content and style, streamlining maintenance and modification, improving scalability for webpages.
The current version of CSS is CSS4 (2017)

Three Levels of CSS

Inline: Style attributes defined within HTML tags. (Not recommended). E.g., <p style="font-family:courier">
Document-level: Style rules defined within a <style> tag in the <head> section of an HTML document. Applies to the entire document. E.g., h2 {font-family: 'Times New Roman';}
External: Separate CSS files (.css) linked to HTML documents using the <link> tag in the <head>. Reusable across multiple pages.

CSS Cascade Hierarchy

Styles are applied in a hierarchical manner, with closer style definitions overriding more general ones.
Inline styles have the highest precedence.
External styles have the lowest precedence.
Styles in the HTML <head> element are between these two.
Styles in a linked external CSS file are at the bottom of hierarchy.

Inline CSS Specification

Inline styles use the style attribute of HTML elements.
Example: <p style="color:red; font-style:italic; font-weight:bold; font-family:Arial;">

CSS Properties

Various CSS properties manage different aspects of a webpage's appearance.
- Background properties (e.g., background-color, background-image)
- Font properties (e.g., font-family, font-size)
- List properties (e.g., list-style-image)
- Text properties (e.g., color, text-align)

Document Style Specification

Style sheets are a set of rules for style properties.
Style rules are typically defined within <style> tags in the HTML document's <head> section

1-Simple Selector

CSS rules have a selector and declarations.
A simple selector targets a tag name.
Example: h1 {color:blue; font-size:12px;} affects all h1 tags.

2-Tag Class Selector

Classes allow different styling for repeated tags such as paragraph tags.
Classes are defined within a style rule using selector.classname {} eg: p.big{ color:red; }

3- Generic Class Selectors

Generic classes can style multiple tags similarly. The class is prefixed with ., a period, eg h1.big , .big {font-size: 20pt;}

4- id Selectors

Id selectors target specific elements using a unique id.
Defined within a style rule using #idsname eg #specialh1{ font-weight:bold; }

5- Selectors with Pseudo-classes

Pseudo-classes define styles based on specific states (e.g., when the mouse hovers over a link). E.g., a:hover { color:blue;}

6- Contextual Selectors

Styles can target elements within a hierarchy. E.g., p em {color:red;} styles elements inside
tags.

7- Universal Selectors

The * selector applies styles to all elements.

Useful for applying styles consistently throughout a document.

External Style Sheets

External .css files are linked to HTML documents to provide better organization and reusability.

<div> Tag

Defines logical divisions on a webpage to better structure content, allowing for separate styling blocks

<span> Tag

A 'inline' version of div, used to group inline elements, useful for targeting text or images for styles.

CSS Validation

Validating CSS code ensures proper formatting and avoids potential errors when applying styles. Tools exist for verifying validity.

Conflict Resolution

Conflicts arise when multiple rules target the same element with different styles.

Rules are prioritized according to precedence, specificity, and importance, preventing unexpected outcomes.