{"id":10242,"date":"2020-02-14T06:06:00","date_gmt":"2020-02-14T06:06:00","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=10242"},"modified":"2020-02-14T13:18:29","modified_gmt":"2020-02-14T13:18:29","slug":"css-tutorial-for-beginners-step-by-step-with-examples-2","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/css-tutorial-for-beginners-step-by-step-with-examples-2\/","title":{"rendered":"CSS Tutorial for beginners (Step by Step) with Examples(Part2)."},"content":{"rendered":"\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h1 class=\"has-text-align-center wp-block-heading\">What is Internal Style Sheet?<\/h1>\n\n\n\n<p>An internal style sheet is a set of style that is created as a part of an HTML document. An internal style sheet may be used if one single page has a unique style.<br>An internal Style sheet is created by using <em><strong>&lt;style&gt;<\/strong><\/em> element, which is added inside the <strong><em>&lt;head&gt;<\/em><\/strong> element of the HTML document. <strong>For Example :-<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/SushantSinghRajput03\/e5d11a3f2778c9eba19aadfe28fc8fd3.js\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><em>Output<\/em><\/strong> <\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"217\" height=\"117\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/Output.png\" alt=\"\" class=\"wp-image-10260\"\/><\/figure>\n\n\n\n<p>To know more about Internal Style Sheet, watch the video &#8211; <a target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=Bs7L-FyxY_A&amp;list=PLbGui_ZYuhiisW-k9eEON2vxGABv-PafB&amp;index=7\" rel=\"noopener noreferrer\">What is Internal Style Sheet?<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h1 class=\"has-text-align-center wp-block-heading\">What is Inline Style in CSS?<\/h1>\n\n\n\n<p><em>Inline style<\/em> is used when we need a specific <em><strong>style<\/strong><\/em> for an individual element present in the Web Page. The <em><strong> style<\/strong><\/em>   Attribute in a specific tag or element is used to create an inline style. The <em><strong>style<\/strong><\/em> attribute can contain any CSS property between double-quotes. <strong>For Example:-<\/strong> <\/p>\n\n\n\n<p><strong>For Paragraph :- <\/strong><\/p>\n\n\n\n<p><em>&lt;p style=&#8221;color: red; font-size: 20px;&#8221;&gt;I am First Paragraph&lt;\/p&gt;<\/em><\/p>\n\n\n\n<p><em>&lt;p&gt;I am Second Paragraph&lt;\/p&gt;<\/em><\/p>\n\n\n\n<p><strong>For Heading :- <\/strong><\/p>\n\n\n\n<p><em>&lt;h1 style=&#8221;color: blue; font-size: 23px;&#8221;&gt;I am Heading&lt;\/h1&gt;<\/em><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/SushantSinghRajput03\/c428e5560ec59b855aa75f728e3279b5.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Output<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"225\" height=\"114\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/output-3.png\" alt=\"\" class=\"wp-image-10304\"\/><\/figure>\n\n\n\n<p>To know more about Inline Style, watch the video  &#8211; <a target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=gG7zNZgDKv4&amp;list=PLbGui_ZYuhiisW-k9eEON2vxGABv-PafB&amp;index=8\" rel=\"noopener noreferrer\">What is Inline Style in CSS?<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h1 class=\"has-text-align-center wp-block-heading\">How to use an ID Selector?<\/h1>\n\n\n\n<p>The ID Selector uses the id attribute of an HTML element to select a specific element. The id of an element should be unique within a page, so the id selector is used to select one unique element. To select an element with a specific id, write a hash(#) character, followed by the id of the element. <strong>For Example :- <\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/SushantSinghRajput03\/c0fcdc0b12392477c85e666d6d619ac5.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Output<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"328\" height=\"138\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/Output-2-1.png\" alt=\"\" class=\"wp-image-10347\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/Output-2-1.png 328w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/Output-2-1-300x126.png 300w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/figure>\n\n\n\n<h1 class=\"has-text-align-center wp-block-heading\">How\/Where to use a Class Selector or Style Class?<\/h1>\n\n\n\n<p>Class selectors are used when we have to apply a style to either on same or across different tags without repeating the style rule in an HTML document. Using this method of creating styles, you can create style in the form of style classes in an external style sheet or as an internal style sheet. The class attribute is used to apply style class in the HTML tag. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Type of Style Class?<\/strong><\/h3>\n\n\n\n<p><em> i.<\/em> Universal style classes.<br> <em>ii.<\/em> Element Specific Style Classes.<\/p>\n\n\n\n<p>Click Here for part 3 :-<a target=\"_blank\" href=\"https:\/\/www.devopsschool.com\/blog\/css-tutorial-for-beginners-step-by-step-with-examples-3\/\" rel=\"noopener noreferrer\"> CSS Tutorial for beginners (Step by Step) with Examples(Part3)<\/a>.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is Internal Style Sheet? An internal style sheet is a set of style that is created as a part of an HTML document. An internal style sheet may be used if one single page has a unique style.An internal Style sheet is created by using &lt;style&gt; element, which is added inside the &lt;head&gt; element&#8230;<\/p>\n","protected":false},"author":19,"featured_media":10318,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_joinchat":[],"footnotes":""},"categories":[5605],"tags":[5358],"class_list":["post-10242","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-css"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/10242","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=10242"}],"version-history":[{"count":49,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/10242\/revisions"}],"predecessor-version":[{"id":10401,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/10242\/revisions\/10401"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media\/10318"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=10242"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=10242"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=10242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}