{"id":10450,"date":"2020-02-15T06:34:14","date_gmt":"2020-02-15T06:34:14","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=10450"},"modified":"2020-02-15T13:21:40","modified_gmt":"2020-02-15T13:21:40","slug":"css-tutorial-for-beginners-step-by-step-with-examples-3","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/css-tutorial-for-beginners-step-by-step-with-examples-3\/","title":{"rendered":"CSS Tutorial for beginners (Step by Step) with Examples(Part3)."},"content":{"rendered":"\n<h2 class=\"has-text-align-center wp-block-heading\"><code>i. Universal Style Class<\/code> <\/h2>\n\n\n\n<p>It is a type of style class which is used by any element of the HTML document. Universal Style Class Starts with a dot(.) operator and followed by the Class name. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Syntax <\/h3>\n\n\n\n<p><em>&lt;style&gt;<\/em> <\/p>\n\n\n\n<p>             <em>.classname { class properties } <\/em>     [ <strong><em>Note :-<\/em><\/strong> no space between class_name]<\/p>\n\n\n\n<p><em>&lt;\/style&gt;<\/em><\/p>\n\n\n\n<p><strong>For Example :-<\/strong>        <\/p>\n\n\n\n<p>&lt;style&gt;<\/p>\n\n\n\n<p>              .class { color: red; font-size: 30px;}<\/p>\n\n\n\n<p>&lt;\/style&gt;<\/p>\n\n\n\n<h3 class=\"has-text-align-center wp-block-heading\">Sample Program  <\/h3>\n\n\n\n<script src=\"https:\/\/gist.github.com\/SushantSinghRajput03\/4d6e3f719c9e01d0d741f462e36493e3.js\"><\/script>\n\n\n\n<h3 class=\"has-text-align-center wp-block-heading\">Output  <\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"310\" height=\"147\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/Output-3-1.png\" alt=\"\" class=\"wp-image-10468\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/Output-3-1.png 310w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/Output-3-1-300x142.png 300w\" sizes=\"auto, (max-width: 310px) 100vw, 310px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><code>ii. Element Specific Style Class<\/code> <\/h2>\n\n\n\n<p>It is a type of style class which is used by a specific element(declared before class name) of the HTML document. An element specific style class starts with the element name, followed by a dot(.) operator, which is followed by a class name. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Syntax :-<\/h3>\n\n\n\n<p><em>&lt;style&gt;<\/em><\/p>\n\n\n\n<p>  <em>elementname.classname { class definition }<\/em><\/p>\n\n\n\n<p><em>&lt;\/style&gt;<\/em><\/p>\n\n\n\n<p><strong>For Example :- <\/strong><\/p>\n\n\n\n<p><em>&lt;style&gt;<\/em><\/p>\n\n\n\n<p>     <em>p.sushant { color:blue; font-size:35px;}<\/em> <\/p>\n\n\n\n<p> <em>&lt;\/style&gt;<\/em> <\/p>\n\n\n\n<p>[<strong><em>Note :-<\/em><\/strong> Here, <strong>sushant<\/strong> class is used by <strong>p<\/strong> element only and if we declare the  class in other elements then it doesn&#8217;t work.]<\/p>\n\n\n\n<h3 class=\"has-text-align-center wp-block-heading\">Sample Program <\/h3>\n\n\n\n<script src=\"https:\/\/gist.github.com\/SushantSinghRajput03\/a9be846c162de523d7c9ff32f7ca95e5.js\"><\/script>\n\n\n\n<p><strong>Note :-<\/strong> In the above sample program, the class is called in <strong>h1<\/strong> tag as well as in <strong>p<\/strong> tag, but class property works only with <strong>p<\/strong> tag because of the element-specific style class.<strong> See the output Below :-<\/strong> <\/p>\n\n\n\n<h3 class=\"has-text-align-center wp-block-heading\">Output <\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"487\" height=\"200\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/Output-specific-element-style-sheet.png\" alt=\"\" class=\"wp-image-10490\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/Output-specific-element-style-sheet.png 487w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/Output-specific-element-style-sheet-300x123.png 300w\" sizes=\"auto, (max-width: 487px) 100vw, 487px\" \/><\/figure><\/div>\n\n\n\n<h1 class=\"has-text-align-center wp-block-heading\"><strong><em><code>How to use two or more classes in CSS.<\/code><\/em><\/strong><\/h1>\n\n\n\n<p>We can use two or more classes in an element\/tag by giving space between them. <\/p>\n\n\n\n<h3 class=\"has-text-align-center wp-block-heading\">Syntax <\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"490\" height=\"190\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/Syntax.jpg\" alt=\"\" class=\"wp-image-10538\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/Syntax.jpg 490w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/Syntax-300x116.jpg 300w\" sizes=\"auto, (max-width: 490px) 100vw, 490px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"has-text-align-center wp-block-heading\">Sample Program<\/h3>\n\n\n\n<script src=\"https:\/\/gist.github.com\/SushantSinghRajput03\/13de411065153615966ad4af10b4c1a0.js\"><\/script>\n\n\n\n<h3 class=\"has-text-align-center wp-block-heading\">Output<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"220\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/OutPuttwo-more-class-1024x220.png\" alt=\"\" class=\"wp-image-10544\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/OutPuttwo-more-class-1024x220.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/OutPuttwo-more-class-300x64.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/OutPuttwo-more-class-768x165.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/OutPuttwo-more-class.png 1321w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>i. Universal Style Class It is a type of style class which is used by any element of the HTML document. Universal Style Class Starts with a dot(.) operator and followed by the Class name. Syntax &lt;style&gt; .classname { class properties } [ Note :- no space between class_name] &lt;\/style&gt; For Example :- &lt;style&gt; .class&#8230;<\/p>\n","protected":false},"author":19,"featured_media":10501,"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-10450","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\/10450","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=10450"}],"version-history":[{"count":53,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/10450\/revisions"}],"predecessor-version":[{"id":10552,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/10450\/revisions\/10552"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media\/10501"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=10450"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=10450"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=10450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}