{"id":10181,"date":"2020-02-13T11:55:44","date_gmt":"2020-02-13T11:55:44","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=10181"},"modified":"2020-02-14T12:32:18","modified_gmt":"2020-02-14T12:32:18","slug":"css-tutorial-for-beginners-step-by-step-with-examples","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/css-tutorial-for-beginners-step-by-step-with-examples\/","title":{"rendered":"CSS Tutorial for beginners (Step by Step) with Examples(Part1)."},"content":{"rendered":"\n<p>     <\/p>\n\n\n\n<p>       <\/p>\n\n\n\n<h1 class=\"has-text-align-center wp-block-heading\">Introduction to CSS?<\/h1>\n\n\n\n<p>CSS stands for Cascading Style Sheet. It is a style sheet language which is used to describe the presentation of a document. We can improve the looks of our webpages through CSS. If we define a CSS, we can use it in more than one webpage Or we can use it on the whole website. CSS is used to improve the look of the webpage.<\/p>\n\n\n\n<h1 class=\"has-text-align-center wp-block-heading\">Syntax of CSS?<\/h1>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"389\" height=\"150\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/css-syntax.png\" alt=\"\" class=\"wp-image-10197\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/css-syntax.png 389w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/css-syntax-300x116.png 300w\" sizes=\"auto, (max-width: 389px) 100vw, 389px\" \/><\/figure>\n\n\n\n<p><strong>Selector<\/strong> &#8211; The selector is defined as the HTML element or HTML Tag in which you want to style. It is used to find or select HTML elements based on their element name, id, class-attribute, and more.<\/p>\n\n\n\n<p><strong>Property<\/strong> &#8211; It indicates that these properties are defined for that element or selector.<\/p>\n\n\n\n<p><strong>Property-Value<\/strong> &#8211; It indicates the value assigned to the property.<\/p>\n\n\n\n<p><strong>For Example :-<\/strong>  <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"546\" height=\"232\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/Untitled-Diagram-6.png\" alt=\"\" class=\"wp-image-10328\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/Untitled-Diagram-6.png 546w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/02\/Untitled-Diagram-6-300x127.png 300w\" sizes=\"auto, (max-width: 546px) 100vw, 546px\" \/><\/figure>\n\n\n\n<h1 class=\"has-text-align-center wp-block-heading\">What is an External Style Sheet?<\/h1>\n\n\n\n<p>An external style sheet is a separate document that contains only CSS rules. It doesn&#8217;t contain any HTML tags. It has .css extension. An external style sheet can help you to change the look of an entire website by changing just one CSS file. <strong>For Example &#8211; <\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Open any editor like notepad++, Sublime text, etc.<\/li><li>Write the CSS Code.<\/li><li>Save the file with .css extension like <em>style.css<\/em><\/li><\/ul>\n\n\n\n<h1 class=\"has-text-align-center wp-block-heading\">How to link webpage to the external style sheet in CSS?<\/h1>\n\n\n\n<p><em><strong>href<\/strong><\/em>  attribute with <em><strong>&lt;link&gt;<\/strong><\/em> element inside the <strong><em>&lt;head&gt;<\/em><\/strong> tag is used to link webpage to an external style sheet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"> Syntax :-<\/h3>\n\n\n\n<p>If your CSS file is in the same directory then you have to write the file name under <em>href<\/em>  tag. For Example &#8211;                                                                                                                                                                                      <em>&lt;link ref=&#8221;stylesheet&#8221; href=&#8221;style.css&#8221;&gt;<\/em> <\/p>\n\n\n\n<p>If your CSS file is in the other directory then you have to write both the path and the file name under <em>href<\/em>  tag. For Example &#8211;                                                                                                                                         <em>&lt;link ref=&#8221;stylesheet&#8221; href=&#8221;path-of-css-file\/style.css&#8221;&gt;<\/em><\/p>\n\n\n\n<p> <strong>For Example:- <\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/SushantSinghRajput03\/301c7cc96f457f78d5f3ab9acd527c60.js\"><\/script>\n\n\n\n<p>Click here for part 2 &#8211; <a target=\"_blank\" href=\"https:\/\/www.devopsschool.com\/blog\/css-tutorial-for-beginners-step-by-step-with-examples-2\/\" rel=\"noopener noreferrer\">CSS Tutorial for beginners (Step by Step) with Examples(Part2).<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction to CSS? CSS stands for Cascading Style Sheet. It is a style sheet language which is used to describe the presentation of a document. We can improve the looks&#8230; <\/p>\n","protected":false},"author":19,"featured_media":10317,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[5605],"tags":[5358,5606,5905,5608,5906],"class_list":["post-10181","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-css","tag-css-tutorial","tag-css-tutorial-examples","tag-external-style-sheet","tag-syntax-of-css"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/10181","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=10181"}],"version-history":[{"count":34,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/10181\/revisions"}],"predecessor-version":[{"id":10363,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/10181\/revisions\/10363"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media\/10317"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=10181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=10181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=10181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}