Introduction to CSS Basics

Lecture Overview

• Lecture number: 4
• Topic: Web Programming
• Instructor: Dr. Mohamed Taha
• Institution: Benha University

Textbook Information

• Textbook title: Web Development & Design Foundations with HTML5
• Edition: Ninth
• Author: Terry Felke-Morris
• Publisher: Pearson

Learning Objectives (Part 1)

• Describe the evolution of style sheets from print media to the web.
• List advantages of using Cascading Style Sheets (CSS).
• Use color on web pages.
• Create style sheets that configure common color and text properties.
• Apply inline styles.

Learning Objectives (Part 2)

• Use embedded style sheets.
• Use external style sheets.
• Configure element, class, id, and contextual selectors.
• Utilize the "cascade" in CSS.
• Validate CSS.

Overview of Cascading Style Sheets (CSS)

• Possible with CSS: Visit http://www.csszengarden.com/
• Style Sheets: Used in desktop publishing for years, applying typographical styles and spacing to printed media.
• CSS: Provides functionality of style sheets for web developers; a flexible, cross-platform, standards-based language developed by the W3C.

CSS Advantages

• Greater typography and page layout control.
• Style is separate from structure.
• Styles can be stored in a separate document and associated with web pages.
• Potentially smaller documents.
• Easier site maintenance.

Types of Cascading Style Sheets

• Inline Styles
• Embedded Styles
• External Styles
• Imported Styles

Cascading Style Sheets (Details 1 of 2)

• Inline Styles: Applied directly within the HTML element using the style attribute. Affects only that specific element in the body section.
• Embedded Styles: Placed within the head section of the HTML document using the <style> tag; applies to the whole document.

Cascading Style Sheets (Details 2 of 2)

• External Styles: Created in separate .css files and linked to the HTML document using the <link> tag in the head section. Affects all pages linked to it.
• Imported Styles: Similar to External Styles; focus on the three other types.

CSS Syntax

• Style sheets are composed of "Rules."
• Each rule contains a Selector and a Declaration (property and value).
  • Example: body {color: blue;}

CSS Syntax Sample

• Configure a webpage to display blue text with a yellow background; use hexadecimal color values.

Common Formatting CSS Properties

• See Table 3.1 (slides 13-16) for a list of common CSS properties.

Table 3.1 CSS Properties (Details 1 of 4)

• Properties cover various aspects like background, foreground, font characteristics, spacing, and alignment, and more.
  • Covers various properties: background-color, color, font-family, font-size, font-style, etc.

Table 3.1 CSS Properties (Details 2 of 4)

• Properties for text formatting: font-weight, letter-spacing, line-height, margin etc.

Table 3.1 CSS Properties (Details 3 of 4)

• Properties for alignment and indentation: margin-left, margin-right, text-align, text-decoration, text-indent etc.

Table 3.1 CSS Properties (Details 4 of 4)

• Various properties related to text and element display (text-shadow, text-transform, white-space, width, word-spacing).

Using Color on Web Pages

• Computer monitors use red, green, and blue light intensities to display colors.
• RGB Color: Red, green, and blue values range from 0 to 255.
• Hexadecimal Numbers (base 16): Used to represent these color values.

Hexadecimal Color Values

• # indicates hexadecimal value
• Hex values range from 00 to FF
• Three hex value pairs describe an RGB color.

Web Color Palette

• Collection of 216 colors.
• Most similar on Mac and PC platforms
• Hex values (00, 33, 66, 99, CC, FF)
• Color chart: http://webdevfoundations.net/color

Making Color Choices

• Monochromatic: http://meyerweb.com/eric/tools/color-blend
• Choose image/photo
• Start with a favorite color.
• Websites for other choices: http://colorsontheweb.com/colorwizard.asp, https://color.adobe.com/create/color-wheel, http://paletton.com

Support Web Accessibility Verify Sufficient Contrast

• Choose colors for text and background with sufficient contrast for readability.
• Online tools for verifying contrast: http://webaim.org/resources/contrastchecker, http://snook.ca/technical/colour contrast/colour.html, http://juicystudio.com/services/luminositycontrastratio.php

Configuring Color with Inline CSS (1 of 2)

• Inline CSS: Configured in the body of the web page, within the style attribute of HTML tags. Affects only targeted elements.
• The Style Attribute: Value is one or more property-value pairs (example: color:#ff0000).

Configuring Color with Inline CSS (2 of 2)

• Example: Display a red heading with a gray background.
  • Separate style rule declarations with a semicolon (;).

CSS Embedded (Internal) Styles

• Configured in the head section of a web page.
• Use the <style> HTML element.
• Applies to the entire web page document.
• Style declarations are between opening and closing <style> tags.

CSS Embedded Styles (Example)

• Body selector sets global style rules; overridden for headings (h1, h2).

Checkpoint 3.1 Questions

• List three reasons to use CSS on a webpage.
• Designing with non-default colors warrants styling for both text and background.
• Advantage of using embedded styles instead of inline styles.

Configuring Text with CSS

• CSS properties for text configuration: font-weight, font-style, font-size, font-family.

The Font-Size Property

• Accessibility recommendation: use em or percentage for font sizes (easy to enlarge in browsers).
• Units: em, px, pt.

The Font-Family Property

• Not all fonts are installed on every computer; provide alternative fonts, including generic names.
• Use a generic font-family value like sans-serif for fallback.

Embedded Styles Example

• Example code demonstrating embedded styles, including <style> tag usage and application to body, headings (h1 and h2), paragraphs (p), and unordered lists (ul).

More CSS Text Properties (1 of 2)

• line-height: Controls line height.
• text-align: Sets text alignment.
• text-indent: Sets first-line indentation.
• text-decoration: Controls underline, overline, and line-through styles.

More CSS Text Properties (2 of 2)

• text-transform: Capitalization control.
• letter-spacing: Space between characters.
• word-spacing: Space between words.
• text-shadow: Creates a drop shadow for text.

CSS Selectors

• CSS style rules can be configured for HTML elements, classes, IDs, and descendants.

Using CSS with "HTML element selector"

• Example: Styling an <h1> element with red text, using the style attribute within the element.

Using CSS with "Class"

• Apply a CSS rule to elements with a specified class using a . (dot) before the class name.
• The class rule does not apply to a particular HTML element but to elements that contain the class.

Using CSS with "Id"

• Apply a CSS rule to a specific element with a unique id using a # (hash) before the id.
• Configure a rule for the id with specified properties for appearance.

CSS Descendant Selector

• Selects elements based on their parentage (ancestor-descendant relationship).
• Example for targeting paragraph (<p>) elements inside an element with id="content".

Span Element

• Purpose: Formatting a specific area within a line; inline display.

Span Element Example

• Embedded CSS using .companyname class for specific formatting.
• HTML Example of a <span> element used with a custom class for styling.

External Style Sheets (1 of 2)

• Style rules are in separate .css files linked and separated from HTML files.
• The .css file contains only styling rules, no HTML tags.

External Style Sheets (2 of 2)

• Multiple web pages can use the same external style sheet.

Link Element

• <link> tag in the head section of your HTML to link an external style sheet (.css file) to the page.

Using an External Style Sheet

• Example external color.css file with rules to apply background color (and color).

Checkpoint 3.2 Questions

• Describe reasons for using embedded styles.
• Discuss reasons for external styling, where they are placed, and how to signal their use.
• Write code to associate a webpage with an external style sheet.

Centering Page Content with CSS

• #container style to center page content using margin:auto and specific width.

The "Cascade"

• Hierarchy of style application: Browser defaults, external, embedded, and inline styles.

W3C CSS Validation

• Validate CSS using http://jigsaw.w3.org/css-validator/

Summary

• This chapter introduced Cascading Style Sheets (CSS) for color and text styling.
• Inline, embedded, and external styles were configured.
• Application of CSS rules to HTML elements, classes, and IDs.
• Webpage submission for W3C CSS validation.

Questions

• (See presentation)

Thank You

Test your knowledge on basic CSS principles and properties. This quiz covers essential topics such as margin adjustments, text alignment, and the benefits of CSS compared to inline styles. Perfect for beginners looking to strengthen their understanding of web design.