KEMBAR78
Week 5 Lectures 9 10 CSS | PDF | Hypertext | Web Design
Scribd
Upload
10 views2 pages

Week 5 Lectures 9 10 CSS

The document provides an introduction to CSS and CSS3, explaining that CSS is a stylesheet language used to control the presentation of HTML or XML documents. It covers the types of CSS, syntax, selectors, and the cascading concept, as well as advanced features in CSS3 like animations, transitions, and responsive design. Key topics include the box model, positioning elements, and layout techniques such as Flexbox and Grid.

Uploaded by

ahmed.hussain
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views2 pages

Week 5 Lectures 9 10 CSS

The document provides an introduction to CSS and CSS3, explaining that CSS is a stylesheet language used to control the presentation of HTML or XML documents. It covers the types of CSS, syntax, selectors, and the cascading concept, as well as advanced features in CSS3 like animations, transitions, and responsive design. Key topics include the box model, positioning elements, and layout techniques such as Flexbox and Grid.

Uploaded by

ahmed.hussain
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Week 5: Introduction to CSS and CSS3

Lecture 9: Basics of CSS


1. What is CSS?
CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe the
presentation of a document written in HTML or XML. CSS controls the layout, colors, fonts,
and overall visual appearance of web pages.

2. Why Use CSS?


- Separates content (HTML) from presentation (CSS)
- Enhances the look and feel of web pages
- Enables consistent design across multiple pages
- Reduces duplication by centralizing styles

3. Types of CSS
- Inline CSS: Applied directly within HTML elements using the style attribute.
- Internal CSS: Defined in the <style> section within the <head> tag of an HTML document.
- External CSS: Written in separate .css files and linked to HTML using the <link> tag.

4. Syntax of CSS
selector {
property: value;
}

5. Selectors in CSS
- Element selector: targets HTML tags
- Class selector: uses a . before the class name
- ID selector: uses # before the ID name
- Universal selector (*): applies to all elements
- Group selector: combines multiple selectors

6. The 'Cascading' Concept


When multiple styles apply to the same element, CSS follows this order of priority:
- Inline CSS
- Internal CSS
- External CSS
Specificity and the order of rules also influence how styles are applied.

Lecture 10: CSS3 and Advanced Concepts


1. Introduction to CSS3
CSS3 is the latest version of CSS that introduces new features, modules, and enhanced
capabilities:
- Animations
- Transitions
- Gradients
- Flexbox and Grid
- Media Queries (for responsive design)

2. Colors and Backgrounds


- Color formats: name, hex (#ff0000), RGB, RGBA, HSL, HSLA
- Background properties: background-color, background-image, background-size

3. Fonts and Text Styling


font-family, font-size, font-weight, line-height, text-align, text-transform

4. Box Model
Every HTML element is a rectangular box: Content → Padding → Border → Margin

5. Positioning Elements
- static, relative, absolute, fixed, sticky

6. Display and Visibility


- display: block, inline, inline-block, none, flex, grid
- visibility: visible, hidden

7. Responsive Web Design – Media Queries


Media queries allow different styles for different devices or screen sizes.

8. CSS3 Transitions and Animations


- Transition: smooth change from one style to another
- Animation: define keyframes

9. Flexbox Overview
- Makes layout easier in one dimension

10. Grid Layout Introduction


- Allows 2D layout design using grid-template-columns, rows, etc.

You might also like