[go: up one dir, main page]
Scribd
Upload
15 views4 pages

Week 1 CSS Practical Guided Session

The document outlines a practical guided session on CSS, covering three tasks: Inline CSS, Internal CSS, and External CSS, each with objectives, steps, and example code. It also includes multiple choice questions (MCQs) to test knowledge on CSS concepts and types. The session aims to teach how to apply CSS styles directly in HTML, within a <style> block, and through linked external stylesheets.

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 DOCX, PDF, TXT or read online on Scribd
15 views4 pages

Week 1 CSS Practical Guided Session

The document outlines a practical guided session on CSS, covering three tasks: Inline CSS, Internal CSS, and External CSS, each with objectives, steps, and example code. It also includes multiple choice questions (MCQs) to test knowledge on CSS concepts and types. The session aims to teach how to apply CSS styles directly in HTML, within a <style> block, and through linked external stylesheets.

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 DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Week 1 CSS Practical Guided Session &

MCQs
Practical Guided Session

🔹 Task 1: Inline CSS

Objective: Apply CSS styles directly to HTML elements.

Steps:

1.

Create an HTML file.

2.
3.

Add styles directly inside the HTML elements using the style attribute.

4.

Example Code:

html
CopyEdit
<!DOCTYPE html><html><head>
<title>Inline CSS Example</title></head><body>
<h1 style="color: blue; font-size: 30px;">This is a Heading</h1>
<p style="color: green;">This is a paragraph styled
inline.</p></body></html>

Observation:

CSS is written directly inside each HTML tag using style="...".

🔹 Task 2: Internal CSS

Objective: Use a <style> block within the <head> section of the HTML.
Steps:

1.

Create an HTML file.

2.
3.

Define CSS rules in a <style> block inside the <head>.

4.

Example Code:

html
CopyEdit
<!DOCTYPE html><html><head>
<title>Internal CSS Example</title>
<style>
h1 {
color: purple;
text-align: center;
}
p{
font-family: Arial;
font-size: 18px;
}
</style></head><body>
<h1>Welcome to Internal CSS</h1>
<p>This paragraph is styled using internal
CSS.</p></body></html>

Observation:

CSS styles are grouped together in the <style> tag, which is placed in the
<head> of the document.

🔹 Task 3: External CSS

Objective: Separate CSS from HTML using a linked .css file.

Steps:
1.

Create an HTML file (e.g., index.html).

2.
3.

Create a CSS file (e.g., style.css).

4.
5.

Link the CSS file in the HTML <head> using <link>.

6.

HTML (index.html):

html
CopyEdit
<!DOCTYPE html><html><head>
<title>External CSS Example</title>
<link rel="stylesheet" href="style.css"></head><body>
<h1>This is a heading</h1>
<p>This is a paragraph styled externally.</p></body></html>

CSS (style.css):

css
CopyEdit
h1 {
color: red;
font-weight: bold;
}p {
color: darkgreen;
font-size: 16px;
}

Observation:

Styles are stored in a separate file and can be reused across multiple HTML
documents.


✅ Multiple Choice Questions (MCQs)

1. What does CSS stand for?


A. Computer Style Sheets
B. Cascading Style Sheets
C. Creative Style System
D. Colorful Style Settings
✔️Correct Answer: B

2. Which of the following is NOT a type of CSS?


A. Inline CSS
B. Internal CSS
C. Intermediate CSS
D. External CSS
✔️Correct Answer: C

3. Which CSS type is written directly inside an HTML tag?


A. Internal CSS
B. External CSS
C. Inline CSS
D. Head CSS
✔️Correct Answer: C

4. Where is Internal CSS written in an HTML document?


A. Inside the <body> tag
B. Inside the <style> tag in <head>
C. In a separate file
D. Inside <script>
✔️Correct Answer: B

5. What is the correct way to link an external CSS file?


A. <style href="style.css">
B. <stylesheet>style.css</stylesheet>
C. <link rel="stylesheet" href="style.css">
D. <css link="style.css">
✔️Correct Answer: C

You might also like