Web Designing 101 Class


#101

You’re really doing an awesome thing here! @Funsho Thank you!


#102

Thank you!

So do you want to join ?


#103

Yeah. But I’ll join when the class gets to CSS. That’s where I got stuck in my learning.


#104

Noted.


#105

Good day fellow students,

Are we ready ? @Anelaw


#106

@Anelaw, kindly post a screen shot of the solution to the assignment.


#107

Sorry…network issues.


#108

Great work @Anelaw!!!

Now let’s begin today’s class.


#109

So @Anelaw, from now one, we shall be examining other HTML tags and their uses.

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;">

#110

Example:

<!DOCTYPE html>
<html>
<body>

<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>

</body>
</html>

In the <p> tag, we used the style attribute to give some of our text some color.


#111

Now @Anelaw,

Create another html file and paste the code above on it. :point_up_2:t6::point_up_2:t6::point_up_2:t6:


#112

Done!!


#113

HTML Background Color

The background-color property defines the background color for an HTML element.

This example sets the background color for a page to powderblue:

<body style="background-color:powderblue;">

@Anelaw, in your new html file, change the body background color as seen in the above code and post a screen shot.


What's on your mind right now?
#114

You can save the new file as anything.htm :grin:


#115


#116

yes, you are cute :slight_smile:


#117

Now, lets change text color of the I am Cute paragraph to red.

Hint: <p style="color:green;">This is a paragraph.</p>


#118

Lol. You could have just pretended not to notice my edits.

Question please: Can an attribute have more than one property?
I tried including both color and font


#119

Good question. Yes it can.

To use more than one property to an attribute do this

<h1 style="font-family:verdana; color:red;"> This is a heading </h1>

#120

You can use W3Schools to get a full view of available tags and attributes.