cse 309 html and css _part2_summer2024
Presentation
•
Computers
•
University
•
Practice Problem
•
Medium
Dr. Rahman
Used 5+ times
FREE Resource
61 Slides • 22 Questions
1
2
There are three main ways to incorporate CSS into HTML documents:
Inline CSS
Internal CSS
External CSS
3
Internal CSS
Internal CSS styles are defined within the <style> tag located in the <head> section of your HTML document.
Styles are applied to elements throughout the HTML document based on selectors.
Maintains code separation from HTML content for better organization.
Limited reusability across multiple HTML pages.
4
Internal CSS
Example:
<head>
<style>
p {
color: blue;
font-size: 14px;
}
</style>
</head>
5
Not reusable across multiple HTML files
Can make the HTML file larger
Disadvantages
Styles are centralized within the HTML file
Easier to maintain compared to inline CSS
Advantages
Internal CSS
6
Inline CSS
Inline CSS applies styles directly to HTML elements using the style attribute.
Offers granular control over individual elements.
Ideal for quick style adjustments or unique element formatting.
Increases HTML file size and reduces code readability for extensive styling.
Example:
<p style="color: blue; font-size: 14px;">This is a paragraph.</p>
7
Harder to maintain
Not reusable
Disadvantages
Quick to apply styles directly within HTML
Useful for small changes or testing
Advantages:
Inline CSS
8
External CSS
External CSS styles reside in a separate CSS file linked to your HTML document using the <link> tag in the <head> section.
Promotes code reusability – a single CSS file can style multiple HTML pages.
Enables easier maintenance and centralized style management.
Requires additional setup for linking the CSS file.
9
External CSS
p {
color: blue;
font-size: 14px;
}
CSS
<head>
<link rel="stylesheet"
href="styles.css">
</head>
HTML
10
External CSS
Requires an extra HTTP request to load the CSS file
Disadvantages
Reusable across multiple HTML files
Keeps HTML files cleaner and smaller
Easier to maintain and update styles
Advantages
11
Multiple Choice
If you have Inline CSS, Internal CSS, and External CSS all applying styles to the same HTML element, which of the following is the correct order of precedence from highest to lowest?
a) External CSS > Internal CSS > Inline CSS
b) Inline CSS > Internal CSS > External CSS
c) Internal CSS > External CSS > Inline CSS
d) External CSS > Inline CSS > Internal CSS
12
Multiple Choice
What is an advantage of using External CSS?
a) It requires less maintenance compared to other types of CSS.
b) It does not require any additional HTTP requests.
c) It keeps HTML files larger and more complex.
d) It allows styles to be reused across multiple HTML files.
13
Multiple Choice
Which of the following is an advantage of using Inline CSS?
a) It keeps the HTML file cleaner.
b) It is reusable across multiple HTML files.
c) It allows for quick style application directly within the HTML.
d) It requires an extra HTTP request.
14
Multiple Choice
Which type of CSS would you use to apply a consistent style across multiple HTML documents?
a) Inline CSS
b) Internal CSS
c) External CSS
d) Embedded CSS
15
Multiple Choice
Which of the following is a feature of External CSS?
a) Styles are applied directly to HTML elements using the style attribute.
b) Styles are defined within a <style> tag in the <head> section of the HTML document.
c) Styles are stored in a separate .css file and linked to the HTML document.
d) Styles can only be used for a single HTML file.
16
Multiple Choice
Which type of CSS is defined within a <style> tag in the <head> section of the HTML document?
a) Inline CSS
b) Internal CSS
c) External CSS
d) CSS Framework
17
Multiple Choice
What is a disadvantage of Inline CSS?
a) It is easy to maintain.
b) It allows for quick style application.
c) It is not reusable.
d) It keeps HTML files cleaner.
18
Multiple Choice
What is a disadvantage of Internal CSS?
a) Styles are centralized within the HTML file.
b) It is not reusable across multiple HTML files.
c) It makes the HTML file cleaner.
d) It is easier to maintain compared to Inline CSS.
19
20
21
22
23
24
25
26
27
Multiple Choice
Html contains _____ types of block elements
2
3
4
5
28
29
30
31
32
33
34
Multiple Choice
block level element flows from
up to down
left to right
down to up
right to left
35
36
37
38
Multiple Select
select the correct answers
block level/block elements can have height and width.
the width of block elements are the full width of viewport by default
block level elements flows from right to left
block level elements can have inline elements as child
39
Multiple Select
Block level elements can have which of the following properties?
a) Height and width
b) Background color
c) Padding and margin
d) None of the above
40
Multiple Choice
Which of the following is true about block elements?
a) They always start on a new line
b) They do not support width and height properties
c) They are used only for text formatting
d) They cannot contain other block elements
41
Multiple Choice
Which of the following HTML elements are block elements?
a) <div>
b) <span>
c) <img>
d) <a>
42
43
44
45
46
47
Multiple Select
Select the correct answers
Inline elements-
cannot have height and width
can have block level element as child
do not have margin and padding
flows from top to bottom
48
Multiple Choice
Inline elements are typically used for:
a) Structuring page layout
b) Text formatting
c) Creating navigation menus
d) Embedding videos
49
Multiple Choice
An example of an inline element is:
a) <div>
b) <h1>
c) <span>
d) <p>
50
51
52
53
54
Multiple Select
select the right answers
inline-block elements
can have height and width
flows from left to right
flows from top to bottom
can have block element as child
55
Multiple Choice
An example of an inline-block element is:
a) <ul>
b) <h2>
c) <span>
d) <img>
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
Introduction to HTML Forms
Benefit of HTML Forms:
HTML forms are used to collect user input.
They can contain various types of input elements such as text fields, checkboxes, radio buttons, and submit buttons.
Forms are essential for user interaction on websites.
77
Basic Structure of an HTML Form
<form action="/submit_form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<input type="submit" value="Submit">
</form>
action: URL where the form data will be sent.
method: HTTP method (GET or POST).
78
Common Input Types
Types of input elements:
Text input: <input type="text">
Email input: <input type="email">
Number input: <input type="number">
Radio buttons: <input type="radio">
Checkboxes: <input type="checkbox">
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
79
Form Validation
HTML5 introduces built-in validation attributes:
required
pattern
minlength maxlength
<input type="text" id="username" name="username" required minlength="5" maxlength="15"><br><br>
required: Ensures the field must be filled out.
pattern: Specifies a regex pattern for validation.
minlength and maxlength: Limits the number of characters.
80
Multiple Choice
What is the primary purpose of an HTML form?
A) To display images
B) To create hyperlinks
C) To collect user input
D) To format text
81
Multiple Choice
Which attribute in the <form> element specifies the URL where the form data will be sent?
A) method
B) action
C) enctype
D) target
82
Multiple Choice
What does the required attribute do in an HTML input element?
A) Limits the number of characters that can be entered
B) Specifies a URL to validate the input
C) Ensures the input field must be filled out before submitting the form
D) Sets a default value for the input field
83
Show answer
Auto Play
Slide 1 / 83
SLIDE
Similar Resources on Wayground
81 questions
EMTECH Q3W1
Presentation
•
12th Grade
78 questions
Nervous system
Presentation
•
12th Grade
77 questions
Revision Class - Memory
Presentation
•
12th Grade
73 questions
Lesson 6- Business sustainability
Presentation
•
University
75 questions
Les soins de santé en Belgique
Presentation
•
12th Grade
72 questions
Geometry Angle Review Evening
Presentation
•
KG - University
70 questions
CSIT 9 (OS)
Presentation
•
University
77 questions
e-commerce_les01_inleiding_met_opdracht
Presentation
•
University
Popular Resources on Wayground
20 questions
"What is the question asking??" Grades 3-5
Quiz
•
1st - 5th Grade
20 questions
“What is the question asking??” Grades 6-8
Quiz
•
6th - 8th Grade
10 questions
Fire Safety Quiz
Quiz
•
12th Grade
20 questions
Equivalent Fractions
Quiz
•
3rd Grade
34 questions
STAAR Review 6th - 8th grade Reading Part 1
Quiz
•
6th - 8th Grade
20 questions
“What is the question asking??” English I-II
Quiz
•
9th - 12th Grade
20 questions
Main Idea and Details
Quiz
•
5th Grade
47 questions
8th Grade Reading STAAR Ultimate Review!
Quiz
•
8th Grade
Discover more resources for Computers
15 questions
LGBTQ Trivia
Quiz
•
University
36 questions
8th Grade US History STAAR Review
Quiz
•
KG - University
25 questions
5th Grade Science STAAR Review
Quiz
•
KG - University
16 questions
Parallel, Perpendicular, and Intersecting Lines
Quiz
•
KG - Professional Dev...
20 questions
5_Review_TEACHER
Quiz
•
University
10 questions
Applications of Quadratic Functions
Quiz
•
10th Grade - University
10 questions
Add & Subtract Mixed Numbers with Like Denominators
Quiz
•
KG - University
20 questions
Block Buster Movies
Quiz
•
10th Grade - Professi...