WP CDT6 Summary

Department of CSE, KITSW
U18OE403D–WEB PROGRAMMING
4CSE AY:2022-23
CDT6- LECTURE SUMMARY
CDT6 1. CSS Types: Inline and Internal Style Sheets

Topics Covered 2. Style classes and Multiple styles
The CDT6provides knowledge ondifferent types of CSS and use them
Motivation
appropriately while designing web pages. It also gives knowledge on creating
(Why you (students) multiple styles.
should learn these
topics? )
Lecture Learning Outcomes (LLOs):After completion of this lecture, you should be able to…
LLO1
On topic 1
Knowledge on different types of CSSand ability to choose the right one while designing
web pages.
LLO2
On topic 2
Ability to create CSS having multiple styles and class
CDT6– Lecture Summary – Key Takeaways

CSS Types:
CSS can be added to HTML documents in 3 ways:
 Inline - by using the style attribute inside HTML elements

 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the <h1> element to blue, and the text color
of the <p> element to red:
Example
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within

a <style> element.
The following example sets the text color of ALL the <h1> elements (on that page) to
blue, and the text color of ALL the <p> elements to red. In addition, the page will be
displayed with a "powderblue" background color:
<!DOCTYPE html>
<html>
<head>
Prepared by: SHAIK MUNAWAR, Dept of CSE, KITSW Page 1 of 3
4CSE AY:2022-23
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Class to Style an element
CSS syntax contains a selector, and a class is exactly that. It is needed to stylize HTML
elements – including changing colors, fonts, or the size of a text. If you want to use a
class, use a full stop (.) followed by the class name in a style block. Next, use a bracket
called a declaration block that contains the property to stylize the element, such as text
color or text size.Let’s take an example, here’s how it looks if you want to change the
text color to green:
<style>
.green-text {
color: #008000;
}
</style>
CSS Classes will help you stylize HTML elements quickly. Moreover, you can avoid
repeating the same code for each HTML element that uses the same styling. Hence, the
amount of CSS code to use is reduced – which makes it more readable and easier to
debug.
 <style> – the style tag specifies the style information of an HTML element. You
can put multiple style tags within an HTML document.
 .classname – it refers to the attributes that will be added to the element. For
instance, the class name is green-text and font-36 since the element will have a
green color, and 36 pixels sized fonts. Also, don’t forget to put a dot (.) before the
class name as it won’t work otherwise.
 {property} – it contains attributes that will be added to the elements, such as a

green color and 36 pixels font size.
After creating the classes, you can apply them to HTML elements:
<p class="green-text font-36">This is an example of a sentence with bigger font

size</p>
<p class="green-text">This is an example of a sentence with regular font size</p>

4CSE AY:2022-23
Multiple Classes
HTML elements can belong to more than one class.
To define multiple classes, separate the class names with a space, e.g. <div class="city
main">. The element will be styled according to all the classes specified.
In the following example, the first <h2> element belongs to both the city class and also to
the main class, and will get the CSS styles from both of the classes:
Example
<h2 class="city main">London</h2>

<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
CDT6 - LECTURE LEVEL PRACTICE PROBLEMS (LLPs) to test the LLOs

To test whether you achieved the learning outcomes of this lecture, you should be able to solve the following LLPs, in
the class itself, after completion of the lecture. Minimum one question / problem (LLP) is designed to test each expected
LLO.
 LLP1(on LLO1):Create a HTML form that uses Inline, Internal and External CSS.
 LLP2(on LLO2): Design a HTML page with multiple styles using HTML class attribute

WP CDT6 Summary

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WP CDT6 Summary

Uploaded by

Copyright:

Available Formats

Department of CSE, KITSW

CDT6 1. CSS Types: Inline and Internal Style Sheets

CDT6– Lecture Summary – Key Takeaways

 Inline - by using the style attribute inside HTML elements

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

<p style="color:red;">A red paragraph.</p>

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within

CSS Class to Style an element

 {property} – it contains attributes that will be added to the elements, such as a

<p class="green-text font-36">This is an example of a sentence with bigger font

<p class="green-text">This is an example of a sentence with regular font size</p>

HTML elements can belong to more than one class.

<h2 class="city main">London</h2>

CDT6 - LECTURE LEVEL PRACTICE PROBLEMS (LLPs) to test the LLOs

Prepared by: SHAIK MUNAWAR, Dept of CSE, KITSW Page 3 of 3

You might also like