Sec S19W2 || Creation of an organized page layout (Basic concepts of CSS 3)
![]() |
---|
Friends today we have gathered again to learn an interesting topic "Creation of an organized page layout (Basic concepts of CSS 3)" given by @starrchris. In this post, you will get to know many useful things about CSS which is used for the styling of websites. CSS is so important in web designing as it is with CSS you can make your website look more attractive. Let's get started with the contents of the discussion.
Quiz
b)
Cascading Style Sheets
a)
External styling
b)
p{}
a)
.css
c)
External
Theoretical Questions
Explain Why CSS is added to an HTML file,?
CSS which is known as "cascading style sheets" is added to the HTML file to separate the content structure of the HTML file from the presentation style. Without further ado, below is the more reason why CSS is added to the HTML file.
- SEPARATION OF CONCERNS:
CSS is added to the HTML file to handle the visual styling since HTML is used for the structuring of content. With the help of this separation it more easier for a web developer or programmers to maintain and update the design and content separately.
- EFFICIENCY:
CSS is added to HTML files to reduce the amount of code in HTML files, so it would be easier for web developers, programmers, etc to read, which also helps to improve page load time.
- FLEXIBILITY:
CSS offers a variety of styling options that HTML files cannot handle alone. CSS is added to improve layout control, animations, responsive web design, color schemes, etc for different types of screen sizes and devices. What this means is that CSS is added to HTML files to make a responsive design that can be viewed on both mobile, tablet, and laptop.
In summary, CSS is added to an HTML file to create a beautiful web page that looks more attractive and appealing. It's added to add beauty to a website.
What's the difference between Id, Class, and Elements?
Well, firstly I will say that the differences are based on their use and how you select both as your way of styling. Having said that I would like to use tabular form and show you their differences
Key points | Elements | Class | ID |
---|---|---|---|
By Definition | Elements are the basic building blocks of HTML documents which have the following: <div> , <h1> <p> , and others. | class is known as reusable attributes that are used to apply to multiple HTML elements. | ID is a unique identifier that is assigned to HTML elements. |
By use | It is used to define the content and structure of the webpage | It is used when you want to give the same style to multiple elements | It is used when you want to style a single element or when you want to reference a single element |
By selection in CSS | All instances of an element can be styled via the use of the name of the element which for example; p { color: yellow; } styles all <p> elements with yellow text. | It is selected by using dot (. ) followed by the class name, which example can be like this .example (color: green;) styles all elements with the class example with green text | It is selected by using a hash (# ) followed by the ID name. For example, #unique {color: purple;} style the element with the ID unique with purple text. |
List 5 differences between HTML and CSS, with practical examples.
Okay, let's take a look at the 5 differences between HTML and CSS, with the practical example below.
Eg.1: Purpose
HTML is used to create the structure and the content of a website (webpage) Whereas; CSS is used to style and layout the website (webpage), controlling the design and presentation of how the webpage should be displayed.
Example of HTML based on Purpose
Example of CSS based on Purpose
Eg. 2: Syntax
HTML makes use of attributes and tags, while CCS makes use of declarations and selections.
Example of HTML based on Syntax
Example of CSS based on Syntax
Eg. 3: Location in Code
HTML can be written directly in the HTML file, while CCS can only be written in an external stylesheet, in inline or the <style>
tag
Example: Linking CSS to HTML
Eg. 4: Content
HTML files define the structure and content such as paragraph lists, headings, and others. While CSS defines the visual look and feel of the content when it is displayed. It adds colors, spacing, fonts, and others
Eg. 5: Accessibility
HTML makes use of semantic tags to help readers have an understanding of the structure of the content. While CSS is used to enhance the visual accessibility of the webpage.
Output
List 5 website layouts for a blog, and give reasons why you choose such a layout.
The 5 website layouts for the log and the reason for choosing such layouts are given below.
S/N | Layout | Reason why I choose such layout |
---|---|---|
1 | Single column layout | I choose this as my number one because of its simplicity of content. |
2 | Two-column layout | I chose this because it is a layout that I can use and balance my design |
3 | Magazine layout | I chose this layout because of how advanced the layout is when it comes to display |
4 | Grid | I chose this layout so I can easily navigate through my work |
5 | Masonry Layout | I chose this layout because it is best used for engaging, dynamic design and it looks more appealing to me. |
What are Bugs and why do we debug and why do we Debug our code.?
Bugs |
---|
Simply put in programming, programmers are usually faced with errors which are known as bungs. This means bungs are errors that occur in a problem which causes a code to start misbehaving (malfunctioning). Bungs come into a code based on incorrect input of a code, assumption, syntax errors and so on are capable of causing a software program to have bungs.
Why do we debug |
---|
Firstly, it is good to understand that debugging means fixing errors so a program can run smoothly which involves Identifying and fixing the errors. To this, I will see that we debug for the following few reasons of mine.
To correct errors.
To enhance the satisfaction of users.
To increase the reliability of software thereby reducing the failures of a software program.
To protect the software from being hacked.
To increase the performance of the software so it can serve a multitude of users.
Why we debug our code |
---|
There are multiple reasons why we debug our code some of these reasons are:
We debug our code to identify and fix all errors in the code.
We debug our code to increase the quality of the code
We debug our code to ensure the code doesn't misbehave.
We debug our code to make our code easier to perform when testing via solving issues.
As a software developer debugging is very important as it is the only way that you can know that your code is running smoothly.
Practical Questions 3:
After I have finished learning the lecture from the beginning to the end, I then carry out the practical aspects of it as directed by the professor who gave the lecture. To this, I already have Visual Studio installed on my laptop which I just opened and ran the code as shared below.
The screenshot of my page in browser
The screenshot of the source code
Disclaimer
All images that are used in this post are products of mine which were gotten as a screenshot and saved with my username along with the file name.
Best Regards,
Dynamic Devs Team
@kouba01
@starrchris
I am inviting: @dove11, @pelon53, @simonnwigwe, and @dave-hanny
Hello @josepha great post on CSS basics and web page layout.Your quiz and explanations are really clear and helpful. I like how you explained the difference between CSS, HTML, and their uses with practical examples.
The website layouts you chose and the reasons behind them are also useful for anyone looking to design their blog. The section on debugging is a good reminder of why it’s important to keep our code error free. Thanks for sharing such detailed information,wish you success 💖🤗🌸💐.
Indeed I enjoyed the class which Is why I put in my best. Thank you for your support.
https://x.com/AkwajiAfen/status/1813979400209383848
Upvoted. Thank You for sending some of your rewards to @null. It will make Steem stronger.
Your work interesting. CSS use to style our web page content. As you use to create a website layout. Mostly we use css to create a professional website. I love your way of explanation. I wish you best of luck.
Thank you so much for contributing to my post.
You have presented a detailed work here my friend. Expect my entry soon
Thank you, and I will be waiting to read yours.
Your website layout is great. Debugging is must needed to indentify and correct the error and ensure the project is work smooth.
Thank you for stopping by. Indeed with debugging, we can correct all errors.
As usual, your article is very well written and well organized. I'm glad to read it and the way you expressed the different layouts which you like to add in your website. I wish you very good luck 🍀
Thank you for your good wishes