100 days of code (from day 18)

in coding •  last month  (edited)

I can still remember when we started. It felt like yesterday. It's day 19 already and it keeps getting more interesting. Just as you guessed, I'll be dropping day 18's post and today's. Yes, today's task is the 19th day.

Ignore the tenses used on the 18th day. They were written on the said that. Let's dive right into it!

Day 18
It's day 18! CSS keeps getting interesting. Today, we learnt how to include external style sheets in our codes. This time, we didn't place our CSS code in the HTML file, we wrote it on a separate file and used a link code to merge both together.

First, I created a style sheet for my CSS code and named it "style.css"


Capture1.PNG

That's the style sheet and the HTML file. They are in the same folder. And both codes are shown below:

Capture.PNG

And the output..


Capture2.PNG

Day 19
So, today was all about CSS. Yeah, we are still very much in it and we continued with external styling. This time, we created IDs and classes. They are external CSS properties used in selecting a particular tag to style. We use the # tag to style IDs and "." to style classes.

The example is shown below. You can see the HTML file and CSS file placed side by side.


Capture1.PNG

The first paragraph is named earth using the "id". You should see the way we styled ID in the CSS file.
Same thing applies to the third paragraph. It is named class, and it is styled, too. All paragraphs have different stylings to show how these properties works. This is the output below:

image

And that's it for day 19's task. Let's hope for what the next might bring.

Until then...

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Congratulations, this post has been upvoted using the Steemjet community account,courtsey @cherylsonty, Keep publishing quality posts using the steemjet tag to earn curation rewards.

Join us

Steemjet Discord channel-https://discord.gg/vdZe8JW

We hope to see you around. Keep Steeming!!!