Sec S19W2 || Creation of an organized page layout (Basic concepts of CSS 3)

Hello fellow members of the steemit community. I am so happy to be participating and yet another week of the engagement challenge, which is going to be based on website design.

I can't lie to you all, I found the first lesson who really interesting as I was able to learn a lot of basics on HTML5, writing codes and send them display as I one was something mind intriguing.

With that same energy, I am so eager to participate in this lesson and do my best, to give the best of me. Let's begin with the concept, basics of CSS 3.

CSS3, or Cascading Style Sheets Level 3, is an advanced version of CSS used for styling and formatting web pages. It introduces new features that enhance web design efficiency and visual appeal(physical look). Compared to CSS, CSS3 offers more flexibility for animations, rounded corners, shadows, and at lot more.

Css it's a programming language which is not used on its own, but embedded in an HTML5 when performing coding on a website model. It could be applied In different stages or forms depending on the type of websites in question.

Solution To Homework

Questions	Solution
1. Full meaning of CSS	Cascading Style Sheets
2. Not a form of implementing CSS	Enternal styling
3. Selector use to style group of pages	p{} selector
4. Saving external CSS file	.css extension
5. Widely used CSS style by professionals	External styling

---

Theoretical Questions

Why CSS is added to HTML file,?

CSS is added to HTML files in order to style the content and give a define layout of a web page. HTML main focus is on the structure and content of a web page, but it doesn't provide any styling options on it own.

CSS allows the developer to control the visual aspects of his web page, such as font size, color, background images, and layout. By separating the styling information from the HTML content, the developer can create cleaner and more easy to maintain code. This also makes it easier to apply the same styling model to multiple web pages.

Example could be simple inline styling.

^{source code}

^display

What is the main difference between Id, Class and Elements?

ID:

An ID is a unique text identifier that can only be assigned to one element on a page. Just like a name tag, specifically identifying a single element. ID is use for single element on a page unlike the others which may assign to multiple elements.

Example:
<h1 id="main-heading">This is a heading</h1>

CLASS:

A Class is more of a general purpose attribute that can be assigned to multiple elements on a page. It labels elements categorically, grouping elements with similar characteristics together.

Example:
<div class="pencil">This is a pencil.</div>
<p class="description">This is a blue pencil</p>

ELEMENTS:

Elements are the building blocks which create the content and structure of a web page. They are defined using opening and closing tags, and can contain text, images, or other elements.

Examples. p{}. This element applies to the entire page. To be more specific on which p tag to use, I'd or class will do that perfectly.

5 differentiate between HTML and CSS, giving practical examples?

1.Function	•
HTML provides structure and content, defining the type of content on a web page. Examples are headings, paragraphs,	CSS controls the presentation, specifying how that content is displayed.examples are; font size, color, layout,

^{using CSS to style HTML}

2.Example:	-
Consider the case of a recipe.,	-
HTML would be in charge of the list of ingredients and instructions 'heading for "Ingredients", list items for ingredients, steps for instructions'.	CSS would be the formatting "font size, bold for headings, spacing between ingredient".

^{styling HTML with CSS. Recipe}

3.Language:	•
HTML uses tags to define content structure. Example; <p> for paragraph, <h1> for heading.	CSS uses selectors to locate HTML elements and style properties to define their appearance. for example; font-size: 16px; color: blue.

4.Scope:	•
HTML defines the content for each web page.	CSS can style a single page, a group of pages (using internal or external stylesheets), or an entire website.

5.Interactivity:	•
HTML can embed interactive elements like forms.	CSS has no coherent interactivity but can be used to style interactive elements.

Practical Questions

From my previous lesson, I was able to install Microsoft visual studio on my laptop. I won't be doing that again but then I will be performing the task which I have been asked to do.

I'll start by creating two files, The first one, I will name it index.html and the second layout.css.

^homework.

HTML code

CSS code

The practical work was really amazing. I was able to test variety of code and it display got me giggling. However I did face some problems with putting the side bar.

However I manage to come with it finally. I'm going to continue working in this area untill I am perfect in it. Thanks to the team for empowering me with this topic and challenge in general.

I now call on the following persons to join me participate. @wirngo @majerius and @fombae.

Credit to: @rafk

---