create account

My Daily learning - How to Code Day 11 of HTML: The id Attribute by nolimit909

View this thread on: hive.blogpeakd.comecency.com
· @nolimit909 · (edited)
$22.47
My Daily learning - How to Code Day 11 of HTML: The id Attribute
![MyJourneyBanner.jpg](https://cdn.steemitimages.com/DQmcuApBXvQK3PvkBvsftvXoZ1j625URnxV6NFQEtpradML/MyJourneyBanner..jpg)

Good Evening everyone,

This is the continuation of prep for my honorable discharge from my Military Service. I'm going back to school for computer science. For my prep @richatvns is mentoring me in Calculus and the field of computer science. I'm taking online video classes on Calculus 3, learning HTML, then CSS, followed by Javascript on W3Schools As well as learning blockchain technology through Steem at the same time.

Everyday rich is requiring me as a "proof of work" to show what I learned that day to him.

So we came up with the great idea why not help others, and make a quick easy to follow tutorial by posting what I learned each day.
Since I'm only doing 1 short tutorial a day, it's so easy to follow along and learn (should be under 5 min).
I get the added bonus of repeating the material, such that I truly understand it.

![jetseparator.gif](https://cdn.steemitimages.com/DQmQbizJyC2vw9Em89KQThPERKN1tqW6QQeB7ukPLvvqWxw/jetseparator.gif)

Today's topic is is the id Attribute.  This feature allows you to apply specific characteristics to a HTML element.   To create such an element, write hash character #, followed by the ID of the element.

For this element, we will give it light blue backgrounds, size 40 font, font color black, and center the text in the middle.  Check out the coding.  Notice how it lists each attribute characteristic of the element one by one.

![id coding.PNG](https://cdn.steemitimages.com/DQmR1f4eXZX6khZM7LbmjmJkPoeqpmqdeuCZSGR8mjRXkwb/id%20coding.PNG)

When we open the coding in safari, it looks like this:  
![id safari.PNG](https://cdn.steemitimages.com/DQmUbAAPqiwuqWAPbsVfkoBbgJfzmNTjUuD41gBhuwaCzp4/id%20safari.PNG)


![inline safari.PNG](https://cdn.steemitimages.com/DQmST6isKrvnft6nRUoxuFMfjHkjhKLywFMSu2Bt7znL25P/inline%20safari.PNG)

If you just found this Post and want to start from the beginning here are the earlier posts in the series:

<a href="https://steemit.com/partiko/@nolimit909/learning-how-to-code-html-ttpbcyua">Introduction to my journey</a>
<a href="https://steemit.com/blog/@nolimit909/day-2-of-html">Day 2 of HTML</a>
<a href="https://steemit.com/coding/@nolimit909/day-3-of-html-attributes">Day 3 of Attributes</a>
<a href="https://steemit.com/coding/@nolimit909/my-daily-learning-how-to-code-day-3-of-html-background-and-text-colors">Day 4 of HMTL Background and Text Colors</a>
<a href="https://steemit.com/coding/@nolimit909/my-daily-learning-how-to-code-day-3-of-html-background-and-text-colorss">Day 5 of HTML Fonts</a>
<a href="https://steemit.com/coding/@nolimit909/My-Daily-learning-How-to-Code-Day-8-of-HTML-Hyperlinks">Day 8 of HTML Fonts</a>
<a href="https://steemit.com/coding/@nolimit909/my-daily-learning-how-to-code-day-8-of-html-images">Day 8 of HTML Images</a>
<a href="https://steemit.com/coding/@nolimit909/my-daily-learning-how-to-code-day-8-of-html-tables">Day 9 of HTML Tables</a>
<a href="https://steemit.com/coding/@nolimit909/my-daily-learning-how-to-code-day-9-of-html-lists">Day 10 of HTML Lists</a>

You want to learn, Just remember the Nike Slogan:
![Just Do It](https://cdn.steemitimages.com/DQmXAFiDao3n1iLa4kfd5K619GckzW8337727GraDCpKXBc/image.png)

*** Thank you to @richatvns for setting up this template for posting and base artwork
![](https://cdn.steemitimages.com/DQmNsmXcZZM6oo1i82Qb6Ku1wj57UMnHBkf7VegYBALjsKA/image.png)
![poker_separator.gif](https://cdn.steemitimages.com/DQmV9o6NUzgkN1U6uXi9moD1EHbxUYUR3y1nLwEL6JnEnmC/poker_separator.gif)
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 21 others
properties (23)
authornolimit909
permlinkmy-daily-learning-how-to-code-day-10-of-html-the-id-attribute
categorycoding
json_metadata{"tags":["coding","blog","learning","technology","programming"],"users":["richatvns"],"image":["https://cdn.steemitimages.com/DQmcuApBXvQK3PvkBvsftvXoZ1j625URnxV6NFQEtpradML/MyJourneyBanner..jpg","https://cdn.steemitimages.com/DQmQbizJyC2vw9Em89KQThPERKN1tqW6QQeB7ukPLvvqWxw/jetseparator.gif","https://cdn.steemitimages.com/DQmR1f4eXZX6khZM7LbmjmJkPoeqpmqdeuCZSGR8mjRXkwb/id%20coding.PNG","https://cdn.steemitimages.com/DQmUbAAPqiwuqWAPbsVfkoBbgJfzmNTjUuD41gBhuwaCzp4/id%20safari.PNG","https://cdn.steemitimages.com/DQmST6isKrvnft6nRUoxuFMfjHkjhKLywFMSu2Bt7znL25P/inline%20safari.PNG","https://cdn.steemitimages.com/DQmXAFiDao3n1iLa4kfd5K619GckzW8337727GraDCpKXBc/image.png","https://cdn.steemitimages.com/DQmNsmXcZZM6oo1i82Qb6Ku1wj57UMnHBkf7VegYBALjsKA/image.png","https://cdn.steemitimages.com/DQmV9o6NUzgkN1U6uXi9moD1EHbxUYUR3y1nLwEL6JnEnmC/poker_separator.gif"],"links":["https://steemit.com/partiko/@nolimit909/learning-how-to-code-html-ttpbcyua","https://steemit.com/blog/@nolimit909/day-2-of-html","https://steemit.com/coding/@nolimit909/day-3-of-html-attributes","https://steemit.com/coding/@nolimit909/my-daily-learning-how-to-code-day-3-of-html-background-and-text-colors","https://steemit.com/coding/@nolimit909/my-daily-learning-how-to-code-day-3-of-html-background-and-text-colorss","https://steemit.com/coding/@nolimit909/My-Daily-learning-How-to-Code-Day-8-of-HTML-Hyperlinks","https://steemit.com/coding/@nolimit909/my-daily-learning-how-to-code-day-8-of-html-images","https://steemit.com/coding/@nolimit909/my-daily-learning-how-to-code-day-8-of-html-tables","https://steemit.com/coding/@nolimit909/my-daily-learning-how-to-code-day-9-of-html-lists"],"app":"steemit/0.1","format":"markdown"}
created2019-05-11 03:34:09
last_update2019-05-11 03:34:39
depth0
children2
last_payout2019-05-18 03:34:09
cashout_time1969-12-31 23:59:59
total_payout_value16.936 HBD
curator_payout_value5.532 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length3,588
author_reputation64,026,911,851,005
root_title"My Daily learning - How to Code Day 11 of HTML: The id Attribute"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id84,643,663
net_rshares42,658,363,135,681
author_curate_reward""
vote details (85)
@spydo ·
re-nolimit909-my-daily-learning-how-to-code-day-10-of-html-the-id-attribute-20190511t091330506z
You got a 84.78% upvote from @spydo courtesy of @cowboys1071! We offer 100% Payout and Curation.
properties (22)
authorspydo
permlinkre-nolimit909-my-daily-learning-how-to-code-day-10-of-html-the-id-attribute-20190511t091330506z
categorycoding
json_metadata{"app":"postpromoter/2.1.1"}
created2019-05-11 09:13:30
last_update2019-05-11 09:13:30
depth1
children0
last_payout2019-05-18 09:13:30
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length97
author_reputation5,236,724,209,210
root_title"My Daily learning - How to Code Day 11 of HTML: The id Attribute"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id84,656,275
net_rshares0
@treeplanter ·
Thanks for your donation
![treeplanternoplant_new.png](https://steemitimages.com/DQmaCMGBXirzeFWCWD8gVadsJE1PY1pvXTECAyjGAtF5KNg/treeplanternoplant_new.png)
properties (22)
authortreeplanter
permlinkre-nolimit909-my-daily-learning-how-to-code-day-10-of-html-the-id-attribute-20190515t055025090z
categorycoding
json_metadata{}
created2019-05-15 05:50:24
last_update2019-05-15 05:50:24
depth1
children0
last_payout2019-05-22 05:50:24
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length131
author_reputation62,929,728,687,402
root_title"My Daily learning - How to Code Day 11 of HTML: The id Attribute"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id84,875,525
net_rshares0