{"id":239,"date":"2022-05-16T13:11:11","date_gmt":"2022-05-16T13:11:11","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=239"},"modified":"2023-03-26T13:22:32","modified_gmt":"2023-03-26T13:22:32","slug":"inline-css","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/inline-css\/","title":{"rendered":"Inline CSS"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><strong>Inline CSS<\/strong><\/p>\n\n\n\n<p>Inline CSS is used when we want to style only one element.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Inline CSS | Lecture 4 | CSS for Beginners\" width=\"696\" height=\"392\" src=\"https:\/\/www.youtube.com\/embed\/dGs5gVTMBXM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>We use Inline CSS to style some single elements. There is a style attribute in HTML, and we are going to use it, to achieve styling that particular element. It is like personally going to the element, and providing all the required styles for that element. So, if we want to style some paragraphs, using the style attribute, we can do so. Here is a demonstration of the same &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"816\" height=\"218\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Inline-CSS.jpg\" alt=\"\" class=\"wp-image-1288\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Inline-CSS.jpg 816w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Inline-CSS-300x80.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Inline-CSS-768x205.jpg 768w\" sizes=\"auto, (max-width: 816px) 100vw, 816px\" \/><\/figure>\n<\/div>\n\n\n<p>In the above HTML code, in the div element, we just have specified through the style attribute, some different properties for the element, like the color of the text should be Red, and the text should be in the center. I know that we have not seen some different properties from CSS, but do not worry about those properties and their values that are written there for now, since we are going to observe them later. You can just understand that we want the text color of that element to be red, and we want the text to be at the center of the block. We are going to move into details later on.<\/p>\n\n\n\n<p>Let&#8217;s also have a look at the output of the above HTML-<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1023\" height=\"140\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Inline-CSS-1.jpg\" alt=\"\" class=\"wp-image-1289\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Inline-CSS-1.jpg 1023w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Inline-CSS-1-300x41.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/Inline-CSS-1-768x105.jpg 768w\" sizes=\"auto, (max-width: 1023px) 100vw, 1023px\" \/><\/figure>\n<\/div>\n\n\n<p><br>As you can see, the text is now at the center, So, whenever we want to style for a single element, we can make use of the style attribute to do so.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Inline CSS Inline CSS is used when we want to style only one element. We use Inline CSS to style some single elements. There is a style attribute in HTML, and we are going to use it, to achieve styling that particular element. It is like personally going to the element, and providing all the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[9,13,167],"class_list":{"0":"post-239","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css-tutorial","7":"tag-css","8":"tag-css-tutorial","9":"tag-inline-css"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/comments?post=239"}],"version-history":[{"count":4,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/239\/revisions"}],"predecessor-version":[{"id":5569,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/239\/revisions\/5569"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}