Third Week Reflection!

Kainat Muhammadi
2 min readMar 7, 2021

--

We did learn in the first two weeks at how HTML is used to create web pages. Also learnt its basic tags and elements in detail. HTML describe the structure of your web pages and CSS control the design of your web page.

In third week we focused on CSS (cascading style sheet). We learnt that how CSS enable us to control the styling and layout of the web pages. There are generally two categories of CSS.

Presentation:

In this part we learnt how to change the color of text, the fonts you want to use and the size, style of these fonts, how to add background colors to pages and how to add background images.

Layout:

How to make your web pages more attractive. Simply we can say that where the different elements are positioned on screen.

There are three ways to apply CSS on your web pages:

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. It is useful for quick, permanent changes but are less flexible than internal and external style sheets.

For Example: <h1 style="color:red;margin-left:20px;">inline CSS</h1>

An Internal CSS/ Inpage CSS holds CSS rules for the page in the head section of the HTML file. The rules only apply to that page, but you can configure CSS classes and IDs that can be used to style multiple elements in the page code.

<head>
<style type="text/css">
h1 {
color: blue;
margin-left: 20px;
}

p {
font-family: Arial, Helvetica, Sans Serif;
}
</style>
</head>

An external stylesheet is a standalone .css file that is linked from a web page. The advantage of external stylesheets is that it can be created once and the rules applied to multiple web pages. You can make a single change in the stylesheet and it will be applied to all linked pages, saving time and effort.

<link href="style.css" rel="stylesheet" type="text/css">

CSS Properties: CSS properties affect how elements are displayed. These properties are color, background-colors, font size, font-weight, text-decoration, margin and paddings, borders, alignment.

--

--