Whaleshares Logo

Introducing 100DaysOfCode initiative: A way to promote Whaleshares (16)

zoneboyPosted for Everyone to comment on, 5 years ago3 min read

Hello.

I am pleased to introduce the 100DaysOfCode initiative right on whaleshares. It is an initiative that tends to expose participants to the developer world and also promote Whaleshares on twitter.

Rules

  • Carefully read and understand the EXAMPLE given.
  • Use the EXAMPLE to solve the given task.
  • Publish your completed task on Whaleshares.
  • Tweet your post on twitter with the following tags #100DaysOfCode #Whaleshares #HTML5
  • Drop your post link and tweet link as a comment under the post for possible reward.
  • Post tags should include eternalblue tag

100.PNG
Example of a 100DaysOfCode tweet. You specify the Day and what you accomplished.

Your post will be rewarded by the initiative sponsors. This initiative is sponsored by @kennybll-witness, @dbread-witness, and @ceruleanblue.

Kindly vote for the sponsors as your preferred witness on wallet.whaleshares.io/~witnesses.
Click the vote button beside @kennybll-witness, @dbread-witness, and @ceruleanblue username to vote them as witness.

EXAMPLE

We wrote our fifteenth html code yesterday and was able to view it in a web browser. Today, we are moving on to CSS.

CSS is Cascading Style Sheets. Css is like the makeup that add extra beauty to a lady physical appearance. HTML is the lady just coming out of the pool. She is all natural. Css is used to style our HTML page. It beautifies the html page.

CSS can be added to an HTML page via the following methods

  • Inline,
  • Internal, and
  • External.

Mostly CSS is always Property: value;. Other instance can be Property: value, value, value; and so on.

Inline

This is adding the CSS code right next to the html code we want to style.


<h1 style="background-color:crimson; color:blue; width: 200px;">Hello World</h1>

You can see that our code now has a style. It look more beautiful. This is a typical Hello world code with the <h1> tag. However, I added the style attribute to the <h1> element. The first CSS property I added was to change the background color and that is by specifying background-color:crimson;. This will change the background colour to crimson. I then go on and change the text colour to blue which has the CSS property color:blue;. I ended by specifying the width of <h1> element and the content inside it. I used width: 200px; meaning the length of the <h1> will be 200px.

That is inline CSS and you can modify the properties values as you like. You can see that it is Property: value; which is width: 200px; or color: blue;.

Task

Using the example above, replicate the screenshot below showing your codes and browser output.

code.PNG

Hint

  • The texts are all <h1>
  • The colors and background colors used include gold, green, white, cyan, and brown.
  • The width is 200px

Feel free to leave a comment if you do not understand any process
All completed tasks will be rewarded by the sponsors. Please follow the rules to be eligible for reward.

Series

https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-wwhaleshares
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-2
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-3
https://whaleshares.io/@zoneboy/25nreu-introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-3
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-5
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-6
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-7
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-8
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-9
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-10
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-11
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-12
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-13
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-14
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-15
Sign Up to join this conversation, or to start a topic of your own.
Your opinion is celebrated and welcomed, not banned or censored!