Scribd
Upload
14 views11 pages

Week 1 CSS Slides Detailed

This document introduces CSS (Cascading Style Sheets) and its role in web development, covering its syntax, types (Inline, Internal, External), and selectors. It provides practical tasks for applying CSS styles to HTML elements and emphasizes best practices for maintaining large websites. The document also includes examples of CSS usage and comments for clarity.

Uploaded by

shittuabiola12
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
14 views11 pages

Week 1 CSS Slides Detailed

This document introduces CSS (Cascading Style Sheets) and its role in web development, covering its syntax, types (Inline, Internal, External), and selectors. It provides practical tasks for applying CSS styles to HTML elements and emphasizes best practices for maintaining large websites. The document also includes examples of CSS usage and comments for clarity.

Uploaded by

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

Week 1: Introduction to CSS

CSS basics for beginners


Lesson Objectives
• - Define CSS and its purpose in web
development
• - Identify and use different types of CSS
(Inline, Internal, External)
• - Understand CSS syntax (selectors, properties,
values)
• - Apply basic styles using element, class, and
ID selectors
What is CSS?
• CSS (Cascading Style Sheets) is used to style
HTML documents. It controls the look and feel
of web pages.
CSS Syntax
• selector { property: value; } e.g., p { color: red;
font-size: 16px; }
CSS Selectors
• - Element Selector: p { color: red; }
• - Class Selector: .note { font-size: 18px; }
• - ID Selector: #header { background-color:
yellow; }
• - Grouping Selector: h1, h2, p { font-family:
Arial; }
CSS Comments
• /* This is a comment in CSS */
Guided Practical Task
• - Create HTML file with <h1>, <p>, and
<button>
• - Apply Inline CSS to <h1>
• - Use Internal CSS in <style> for <p>
• - Link External CSS file for <button>
Inline CSS
• Styles are applied directly within the HTML
element using the 'style' attribute.
• Example: <p style='color: blue;'>This is blue
text.</p>
• Used for quick, small styling tasks.
• Not recommended for maintaining large
websites.
Inline CSS
• Styles are applied directly within the HTML
element using the 'style' attribute.
• Example: <p style='color: blue;'>This is blue
text.</p>
• Used for quick, small styling tasks.
• Not recommended for maintaining large
websites.
Internal CSS
• Styles are defined within a <style> tag inside
the <head> of an HTML document.
• Example:
• <head>
• <style>
• p { color: green; }
• </style>
• </head>
• Good for styling a single HTML page.
External CSS
• Styles are placed in a separate .css file and
linked to the HTML document.
• Example: <link rel='stylesheet'
href='styles.css'>
• style.css: h1 { color: red; }
• Best practice for large websites.
• Promotes reusability and separation of
content from design.

You might also like