This video explains key web technologies concepts: CSS (Cascading Stylesheets) adds design to HTML pages through three types—inline (single element), internal (single page), and external (multiple pages); filters (blur, brightness, contrast, grayscale, shadow) enhance multimedia appearance; transitions (fade, slide, zoom, replace) create smooth visual changes; and DHTML (Dynamic Hypertext Markup Language) combines HTML, CSS, JavaScript, and DOM to create interactive, dynamic web pages that update content and style without page reloads, improving user experience and performance.
Deep Dive
Prerequisite Knowledge
- No data available.
Where to go next
- No data available.
Deep Dive
WEB TECHNOLOGIES UNIT-2 | Degree 4th sem BCOM Computers web technologies unit-2 full explanation💯✅Added:
Hello dear students, welcome back to our YouTube channel Learn with Sahira. In this video, we are going to see the complete and easy explanation of unit number two from the subject web technologies which is for degree fourth semester BCOM computer application students. After watching this one single video, I can confidently say that you will become perfect in unit number two.
So definitely watch the video till the very end and if you're new to our YouTube channel Learn with Sahara, subscribe it for more exam preparation videos. Students, one important thing I have personally prepared damn sure important question and answers notes for all subjects and languages of degree fourth semester. These notes are easy, simple, clear to understand and 100% exam oriented. If you want these notes for quick exam preparation, you can message me on my Instagram. My Instagram ID is learnah. Link is available in this video description. Just message me want notes along with your group and semester. I will be giving you the access to all the notes. But remember there is a small payment. Yes, these are paid notes, but believe me, you are going to see excellent results with these notes. Only the students who want the notes should text me. And if you want to watch all explanation videos of this subject, do visit our YouTube channel's playlist, semester for web technologies. You will be finding all the videos there. Students, that playlist, the link is also available in this video description. Do check it out.
Without getting late, let us get started. Question number one is, what is CSS? Explain the various types of cascading stylesheets. Students, please understand that the CSS stands for cascading stylesheets. When we create a web page using HTML, we only get the basic structure. Okay? We can add headings, paragraphs, images, but everything looks very simple and plain.
So to improve the look of that page, we will be using CSS. CSS is used to add design to the web page. It will help us to change things like color, font, spacing, and layout. For example, students, if you open a website, you don't just see black text on a white background, right? You will be seeing colored buttons, styled text, proper spacing, and attractive layout. So, all this is done using CSS. So, we can say HTML builds the structure and CSS makes it look good. We are having three different main types of cascading stylesheets. Let us see one by one.
First type is inline CSS. Students, inline CSS is used when we want to apply style to a single element. Okay? Single element style apply. We will be using inline CSS. In this method, the style is written directly inside the HTML tag.
For example, if there is a paragraph and you want only that paragraph to be read.
So you can write the style inside that tag itself. So this method is very direct students. It affects only that one element where you write it. But uh if we use it again and again for many elements the code becomes long and messy. So it is mainly used for small changes changes use. It is not for full website design. Okay. Then we have internal CSS. This is our second type.
Internal CSS is used when we want to style the whole web page at once. In this method we write all the styles inside style tag. Okay. And that pack is placed inside the head section of the HTML tag head section store. So once we write the style there, it will be applying to all matching elements in that page.
Okay. For example, if you write a rule for paragraphs, then all paragraphs in that page will follow that style. Okay.
So compared to inline CSS, this is more organized. But the limitation is it works only for one web page. Okay. If you have multiple pages, you have to repeat the same same style again again and again. Then we have external CSS students. It is mostly commonly used type. We can say in this method all the styles are written in a separate file.
Okay, separate file which has a dot CSS extension dot CSS extension file. Then this file is connected to the HTML page using a link tag. Okay.
link tag connect once connected the same CSS file can be used for multiple web pages okay so if you want to change the design you don't need to edit every page you just need to change that CSS file and all pages will update automatically so this keeps the HTML clean and makes the design easy to manage we can say students if you look all together like all three types together inline works on one element internal works on one page external internal works on multiple pages. Okay. So this is what it is about CSS. We can say that CSS is used to design web pages and different types uh help apply styles in simple, flexible and efficient ways. Students if you want in detail explanation answers notes you have to message me on my Instagram. This notes from where I'm explaining you these are short notes which are prepared by me in order to provide you free explanation on YouTube. But paid notes are supplied. If you just give a reading in my notes, you will be getting perfect with the complete subject. If you want those notes, you have to message me on my Instagram. Question number two is explain in detail about filters and transitions. Students, filters and transitions are used to improve how elements look and behave on a web page.
Okay. When we design a website, it should not look dull or static website. We want it to look attractive, right? And also to respond smoothly when user interacts with it. So filters are used to change the appearance of the elements. Transitions are used to create smooth changes. Let us talk about filters first. A filter is used to change the look of an element. Students like it can be image or text. Image texture elements look appearance. We will be using filters. Instead of editing the image in another software, we can directly apply effects using CSS.
For example, we can make an image brighter, darker, blurred, black and white. So, basically filters help in improving the visual quality. We are having different types. First, it is blur. Blood is used to make an image look soft. Okay. When we apply blur, the image becomes less clear. Details are reduced and it gives us a smooth effect.
You already know about blur effect.
Okay. Brightness. Students, brightness controls the light level of an element.
Okay. If we increase brightness, the element becomes lighter. If we decrease it, it becomes darker. Then we have contrast. When you edit your photo, you will be having these options, right?
That that is it. Nothing fancy here.
Okay? We have contrast. Contrast will control the difference between light and dark parts. Okay? When contrast is high, the image looks sharp and clear. When contrast is low, the image looks dull.
Then we have grayscale filter. Students, this removes all colors and converts the image into black and white. black and white is shadow filter students. It adds a shadow behind the element. Okay.
Because of this the element looks like it is lifted or it is separated from the background. So basically it will give slight 3D effect and it will make the content stand out. Already you know about the filters image filters photo editing.
Now transition students a transition is used to make changes happen smoothly.
Okay without transition changes happen suddenly. With transition changes happen slowly and smoothly. For example, button color changes slowly when you hover.
Okay? And image size increases gradually. So this is about transition.
You already know what is transition.
Fade. This is one type students. I'm sorry. Fade means an element slowly appears or disappears. Okay? It does not come suddenly. Students, it gradually comes visible or invisible. Whenever you go to VN app or in short app, whenever you're doing editing, you will be having different transitions, right? That is what it is about. Slide means the element moves from one position to another position. Students, for example, a menu sliding from left to right. Zoom, you already know zoom changes the size of the element. It can either increase or decrease slowly. Why transition students? It means one element will replace another by covering it. So, it looks like one content is pushing another outer. So this is about filters and transitions. So overall we can say filters improve how elements look and transition makes changes smooth. Okay.
So basically this will make the web pages more attractive and user friendly students. Then we have question number three. What do you mean by DHTML?
Explain the components of DHTML.
DHT DHTML stands for dynamic hypertext markup language. Normally when we open a web page students the content uh stays the same unless we refresh it right but here DH HTML like if we use this the web page can change automatically without reloading. Okay. So, DHTML is used to make web pages interactive, dynamic, responsive. For example, when you click a button and content changes instantly, right? And uh when a menu opens without refreshing, when text or images change automatically, that is nothing but it is all possible because of DHTML. So, it is important to understand that DHTML is not a separate language. It is a combination of different technologies working together. Let us talk about components of DHTML. First it is hypertext markup language. Uh hypertext markup language is used to create the basic structure of the web page. Okay.
It will define headings, paragraphs, images, tables, forms and all. So HTML is like the base of the web web page.
Then we have CSS. Just now we have talked about CSS. Now if we talk about JavaScript students, it is used to add actions and behavior to the web page.
Okay. It will help the page to respond to user actions like when user clicks, types, move the mouse, it will help like functionality is done using JavaScript.
Okay, using JavaScript we can show or hide content, we can validate the forms, we can create animations. Now JavaScript will make the page active and interactive. Then we have dome students document object model. It represents the web page as a structure of objects.
Okay. So with the DOM JavaScript can access any element. It can change the content. It can it can change the style or it can add or remove the elements.
For example, changing the text after clicking a button, updating image without refreshing. So, DOM acts like a bridge between HTML and JavaScript. So, now students, how everything works together in DHTML. HTML provides structure, CSS provides design, JavaScript provides actions, DOM allows changes. So, please try to understand this. This is very basic. Okay? like DH HTML combines HTML, CSS, JavaScript and DOM HTML and components. Okay, different four components.
Now let us talk about fourth question explain about DHTML and its features.
Just now we have talked what is DH HTML.
Let me say you again that it stands for dynamic hypertext markup language. It is used to make web pages dynamic and interactive. In normal HTML pages, we want to see any change. We need to refresh the page.
But in DHTML, changes can happen instantly without refreshing.
So the web page can update its content, design or layout automatically based on user actions. For example, when you click a button and some text appears, when a menu opens, uh you will be seeing it. When images change automatically, all these are examples of DHTML students. Now, let us talk about its features. Dynamic content in DHTML, the content of the web page can change at any time. Okay. Text, images, data, it can be updated instantly without loading the page. For example, when you click show more, new content appears immediately. Okay. Dynamic content dynamic style changes students. DHTML allows changing the style of elements.
Okay? That means we can change color, size, position based on user actions.
For example, when you move the mouse on a button, it color will change and when you click something its size increases.
So the web page becomes more visually interactive. Event handling. DHTML can respond to user actions. Okay, these actions are called events. Some common events are click, hover, key press. So when these events happen the web page performs some action animation effects already you know that uh DHTML supports simple animations okay like elements can move appear disappear change size so these animations make the web page more attractive okay for example sliding the menu moving the banner fading the images all that is animation no page reload uh required students one important feature is that the page does not need to reload okay only the required part of the page changes because of this the website will become faster. User will uh yeah like user experience will be improved. So yes this is about. Now let us talk about improved user interaction. DHTML makes the website respond quickly to user actions. Okay. User does not need to wait for page to reload. Everything happens instantly. Now if we talk about advantages, web pages become interactive. Design becomes modern. User experience become better. performance also gets improved. So basically students, DH HTML makes the web pages dynamic by allowing the changes without reloading and improving the user interaction. Now we also have one extra question. Let me explain you this question as well. In case if you get this question, you should be able to write the answer in your answer booklet.
Extra question is explain how to create multimedia effects with filters.
Students, uh filters are used to change and improve the appearance of multimedia elements. I already said you like images text videos improve or change. So instead of editing it in another software we can directly apply the effects using filters. So what these filters will do these will help you to improve the quality to make the content attractive to add creative effects. For example, you might have seen right blood background images, black and white photos, right or dark images. So all this is created using filters itself.
Now let us talk how they work. First it is selecting the element students because we choose the element where we want to apply the effect. It can be an image, a piece of text, a video. So selection is important because the filter will uh only affect that particular element. Changes you will be selecting that then choosing the appropriate filter. Next we decide which type of effect we want. Okay. Different filters are used for different purposes.
For example, if we want a soft look, we will blur it. If you want more light, brightness feature we will be using. If we want clarity, we will be using contrast. Different uh appropriate filters we will be choosing. Then applying the filter students, after selecting the filter, we apply it to the element. Once applied, the appearance will change immediately. For example, image may become brighter or slightly blurred or we can also make the image black and white. So this step actually changes the look. Then adjusting the intensity. After applying we can control how strong the effect should be. Okay.
For example, more brightness very light image. If we less the brightness, slightly light image. So we can increase or decrease the effect based on the requirement. Then combining multiple filters students. We are not limited to just one filter. We can apply multiple filters together. For example, blur plus brightness, contrast plus shadow. So this will create more advanced and attractive designs. We can say few common types. Here we have already we have seen these common types in our explanation previous question explanations. Now if we talk about the advantages or why these are important we can say that it will improve visual quality. It will make the content attractive. It will highlight important elements. It will create modern design.
These are the advantages. Okay. Just give a reading. Now if I conclude I can say you that filters are used to enhance multimedia elements by changing their appearance and also they make them more attractive and visually effective. This was the complete explanation. How was the explanation? Let me know in the comment section. If you want notes you message me on my Instagram. Join our telegram channel for important updates.
Do check out our playlist semester 4 web technologies playlist link, Instagram link, telegram link. All links are available in this video description. All the very best. Bye-bye.
Related Videos
Agentforce NOW AMA: Build with React and Salesforce Multi-Framework
SalesforceDevs
490 views•2026-05-28
How agent o11y differs from traditional o11y — Phil Hetzel, Braintrust
aiDotEngineer
450 views•2026-05-28
Re: 🗣️📍theprophedu📍2026 GST 103 CLASS (E-EXAM REVISION)
theprophedu
636 views•2026-06-04
More tests are always better? How to use AI to identify tests that bring little value
Alliance4Qualification
335 views•2026-05-29
Search Algorithms Explained in 60 Seconds! 🤖💨
samarthtuliofficial
218 views•2026-06-01
People of Game of Thrones using JavaScript DOM
AltCampus
296 views•2026-05-30
Instagram accounts got PWNed
EricParker
13K views•2026-06-03
Introduction to Problem Solving Part - 1 | Lecture 1 | Intermediate DSA
ascensionix
107 views•2026-05-29











