---

---

Greetings to All

---

Hy guys, I wish you all the blessings and mercy of Almighty Allah and I hope you enjoy the beautiful days of your lives. So as we know, new teaching teams have published their courses So on with the Engagement Challenge . So lets Continue the course with the Second chapter, In the previous lesson we Have learn the basics of Html5 and now we will talk about the Basic concepts of CSS3 lets learn or refresh my concepts. Thanks to team @kouba1 or @starrchris for starting the coding course initiative. So lets delve deeper in the topic by answering these questions or different Sections .In Section 1 , we will answer the quiz; in Section 2 we will answer the theoretical questions; and in section 3 move towards the practical implementation....

^{Image taken From Source}

SECTION 1

Quiz

After Reading or understanding course here are the answers of quiz....

1..What is the full meaning of CSS

a) Cescading Style Sheets
b) Cascading Style Sheets
c) Cabonated Style Sheets

Answer:b(Cascading Style Sheet)

Descriptions : Cascading Style sheet is the best option and correct spelled word that means something that flow in stages in programming Cascading style sheet (CSS) is used to decorate the Simple Html Page...

2..Which of the following is not a way of implementing CSS.

a)Enternal styling
b) Internal Styling
c) Inline Styling

Answer:b(Enternal Styling)

Descriptions : Enternal Styling is not correctly spelled. In other Options Internal Styling is the styling that is used within the html file and Ininline styling is used within html tags

3..Which selector is used to style group of p tages?

a) .p{ }
b) p{ }
c) #p{ }

Answer:b(p{ })

Descriptions The p selector targets all < p > (paragraph) elements in the document. The other options are incorrect because .p{ } targets elements with the class p.#p{ }targets an element with the ID p.

4..How do you save an external CSS file?

a) .css
b) .style
c) .sheet

Answer:a( .css )

Descriptions External CSS files are saved with the .css extension. This file is then linked to the HTML document using the < link > tag.

5..What way of implementing CSS to HTML, do professional use?

a)Internal styling
b) Inline Styling
c)External

Answer:c(External )

Descriptions Professionals typically use external styling because it keeps the HTML clean and separates the content from the presentation. This approach also makes it easier to maintain and update the styles across multiple pages.

SECTION 2

THEORATICAL QUESTIONS

1.Explain Why CSS is added to HTML file?

CSS that is named as Cascading Style Sheet is added to an HTML file to control the visual presentation of the web page. It is added or linked to HTML file to enhance the presentation and layout of webpages. There are many reasons why CSS is essential to add in Html.

• As we know Html is used to structure the content of web page while CSS is used to style the layout of the content .Without CSS the html structure page will be dull and boring to see for attracting colors and styles we add CSS.

• CSS provides a wide range of styling options such as we can change colors, fonts, positioning that help us to create visually attractive and professional web pages. It helps to design the pages that html alone can not did.

• WE can implement it across multiple web pages. Changes made in a single CSS file can be applied to all when linked.

• CSS reduces the amount of code that is needed to style a web page. Instead of repeating style rules within each HTML element we can define them once in a CSS file and apply them across multiple elements

• There are many styling options that are provided by CSS for visually appealing and perfect professional UI or UX design.

• Example:

Previously designed form without CSS

With CSS

So this clearly shows the importance of CSS.

2. What's the difference between Id, Class and Elements?

In Html and CSS, ID ,Classes and Elements are used to select and style specific parts of a web page. Here are the key differences between them....

ID

An ID is unique and is used specifically for a single element to identify it uniquely. As we know, CSS is linked with the html file, so in CSS it is defined with the # symbol, and the name is same the ID name we will put in html. In HTML, id is used to define the id with some styling on the specific element

• Example

^{Id Example Html}

^{Id Example CSS}

• Output

• Use Case: IDs are commonly used for elements that appear only once on a page or for specific sections.

Class

A class can be mostly used multiple times in the page once we defined it in our CSS. If we use the bootstrap or tailwind that we can utilize already defined classes for styling or reuse them same as that we can define our classes in style sheet and then use it where ever needed in the page. We mostly defined a class in CSS using . then the name of the class. In html we simply write class and then its name it will be cleared through Example.

• Example

^{Class Example Html}

^{Class Example CSS}

• Output

• Use Case: Classes are used to apply common styles to multiple elements button text blocks, or other.

Element

An element refers to any HTML tag that build HTML document.Elements are selected in CSS by using the tag name directly such as p , a,h1 etc...

• Example

^{Element Example HTML}

^{Element Example CSS}

• Output

• Use Case: Element are used to apply styles to a specific HTML tag.

• Differences:

• ID: Unique identifier for a single element (#idName).

• Class: Reusable identifier for multiple elements (.className).

• Element: Targets all instances of a specific HTML tag (elementName).

List 5 differences between HTML and CSS, with a practical example.

1.Purpose

Feature	HTML	CSS
Purpose	Used to structure content on the web.	Used to style and format the content defined by HTML.

• OUTPUT

The coloring and fonts are due to css.

2.Syntax

Feature	HTML	CSS
Syntax	Uses tags enclosed in angle brackets (< >).	Uses selectors followed by curly braces {} containing property-value pairs.

• OUTPUT

Functionality

Feature	HTML	CSS
Functionality	Defines the structure and content of the web page.	Controls the presentation and layout of the web page.

• OUTPUT

Placement

Feature	HTML	CSS
Placement	Written within the HTML file.	Can be placed within the HTML file or in an external stylesheet.

---

---

Modularity

Feature	HTML	CSS
Modularity	Defines the structure without separation of concerns.	Promotes separation of concerns, allowing styles to be reused.

• OUTPUT

4. List 5 website layout for a blog, give reasons why you choose such layout?

Now I will list five different Layouts for BlogsThat will help to organize and enhance the styling.

1. Single Column Layout

First layout is the single coloumn Layout where content will be presented in a vertical column
A single column layout is a simple, straightforward layout where content is presented in a single, vertical column.

• Reasons for Choosing:
  It help readers to focus on the content mainly without any distraction.Also this will create the simple but professional look.This layout will be highly responsive on each device.Here is the mapping.

1. Single Column Layout:

2. Two-Column Layout

The second one is two coloumn Layout it will respresents the posts in the way that there will be two bars One bar will have the Navigation links and important things and the other coloumn will have the display of blogs.

• Reasons for Choosing:

It will be easy to use as the navigation will be seriated from the main content. It also provide space for the ads ,social media feeds or related posts. Also the layout will be attractive and visually appealing.

3. Grid Layout

A grid format is an attractive design to representing blogs. It will show case the blogs in the Grid format with their titles, images and visually attractive look.

Reasons for Choosing:

First of all the grid layout is visually appealing and it will show the multiple post in a glance .It will also enhance the discoverability by showcasing several post simultaneously in a glance it will provide Also it will provide most mastered and professional look.

4. Magazine Layout

The fourth one is a magazine layout that will be the combination of content blocks also include the featured posts categories latest posts and will have multiple columns.

• Reasons for Choosing:

It will represent a variety of contents and also the filters to ease the access It will Encourages user engagement by presenting a wide range of content options. On the other hand it will Gives a professional and sophisticated look suitable for blogs with diverse content.

5. Full-Screen Layout

This design will occupy the entire screen width and height to present the content with ofter large images.It will have a big header on it and below will be display of the content.

• Reasons for Choosing:
  It will Provides an immersive reading experience with large, engaging visuals and also have great effect Great for branding and impactful storytelling.

Layout example of Blog designs

I have designed a layout to express the list in details here is the look....

• Source Code

5. What are Bugs and why do we debug and why do we Debug our code?

What are Bugs?

Bugs are the errors or faults in a software program that cause to produce the incorrect and unexpected results. The bugs are raised from the mistakes in our coding. There can be errors of different types such as syntax errors, commas and if the code is not written in correct language or format.

Why Do We Debug?

Debugging is the term that actually means the process to fix the issues and ensure that our software works correctly and Also increase the correctness performance and user experience towards our code.

Why Do We Debug Our Code?

• To correct issues that cause incorrect behavior.

• To enhance overall code quality and functionality.

• To make sure the software performs as intended.

• To provide a smooth and error-free user experience.

• To keep the software reliable and prevent crashes.

• How proCess works...

It firstly Notice the issue and then recreate the bug and separate the the code that is causing the problem.Then understand why the bug occurs. correct the issue or give suggestions to correct.

Tools

• GDB, WinDbg ,VScode
  These are some to debug or run our codes and also helps in increasing the code quality functionality and also fix errors for efficiency.

SECTION 3

PRACTICAL QUESTION

Finally lets move towards the the last section that is about the practical work. So I design a layout and try my best to enhance with CSS as I can. Here is the final look and source Code.

HTML

CSS

So here is the completion of my entry. Feel free to tell me if I have any mistake

So that was all from my side about the topic and I hope that you all will like to read the post and support the content

I would like to invite

• @drhira
• @artist1111
• @sawera1
• @steemdoctor1

to participate in the contest

Thanks for Reading

Regards @mateenfatima