{"id":43,"date":"2022-12-23T11:30:33","date_gmt":"2022-12-23T11:30:33","guid":{"rendered":"https:\/\/www.cmsgalaxy.com\/blog\/?p=43"},"modified":"2022-12-23T11:30:33","modified_gmt":"2022-12-23T11:30:33","slug":"css-cascading-style-sheets","status":"publish","type":"post","link":"https:\/\/www.cmsgalaxy.com\/blog\/css-cascading-style-sheets\/","title":{"rendered":"CSS (CASCADING STYLE SHEETS)"},"content":{"rendered":"\n<p class=\"has-medium-font-size\"><strong>What is CSS?<\/strong><\/p>\n\n\n\n<p class=\"has-small-font-size\">CSS is a language used to style a web page. It describes how HTML pages should displayed on media or websites.   <\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>What are the uses of CSS?<\/strong><\/p>\n\n\n\n<p class=\"has-small-font-size\">CSS is used to define the styles for your web pages , including deisgns, layout variations, colors, variations etc.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>CSS sytnax:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A css  syntax csonsists of two blocks declaration block and selector block.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>selector block points to the html you want to design or style<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-small-font-size\">p&nbsp;{<br>&nbsp;&nbsp;color:&nbsp;red;<br>&nbsp;&nbsp;text-align:&nbsp;center;<br>}<\/p>\n\n\n\n<p>In this code p is selector part which indicates the html element to style. and color and text-align are property. red and cente are property value.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>CSS Selectors:<\/strong> These are used to find the HTML elements to style.<\/p>\n\n\n\n<p> Simple selectors: Selects based on id, class<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>id selector:  The id selector uses the id attribute of an HTML element to select a specific element. To select an element with a specific id, write a hash (#) character, followed by the id of the element.<\/li>\n\n\n\n<li>Class Selector:  The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the class name.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><th>Selector<\/th><th>Example<\/th><th>Example description<\/th><\/tr><tr><td>#id<\/td><td>#firstname<\/td><td>Selects the element with id= &#8220;first name&#8221;<\/td><\/tr><tr><td>.class<\/td><td>.intro<\/td><td>Selects all elements with class=&#8221;intro&#8221;<\/td><\/tr><tr><td>element.class<\/td><td>p.intro<\/td><td>Selects only &lt;p&gt; elements with class=&#8221;intro&#8221;<\/td><\/tr><tr><td>*<\/td><td>*<\/td><td>Selects all elements<\/td><\/tr><tr><td>element<\/td><td>p<\/td><td>Selects all &lt;p&gt; elements<\/td><\/tr><tr><td>element.element<\/td><td>div, p<\/td><td>Selects all &lt;div&gt; elements and all &lt;p&gt; elements<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"has-medium-font-size\"><strong>How to add CSS?<\/strong><\/p>\n\n\n\n<p>There are 3 ways to add CSS<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>External CSS: With an external css we change the look of the website with changing one file. External CSS are defined inside the &lt;link&gt; tag.<\/li>\n\n\n\n<li>Internal CSS:  An internal style sheet may be used if one single HTML page has a unique style. The internal style is defined inside the &lt;style&gt; element, inside the head section.<\/li>\n\n\n\n<li>Inline CSS:  An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.<\/li>\n<\/ol>\n\n\n\n<p class=\"has-medium-font-size\"><strong>CSS Comments:<\/strong>  Comments are used to explain the code. These are used for later purpose to correct the source code. These comments are given inside the &lt;style&gt; attribute and starts with \/* and ends with *\/.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>CSS Borders: <\/strong> <\/p>\n\n\n\n<p>CSS Borders allow to specify the style, width and color of the elements border<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>dotted- Defines a dotted border<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>dashed&nbsp;&#8211; Defines a dashed border<\/li>\n\n\n\n<li>solid&nbsp;&#8211; Defines a solid border<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>double&nbsp;&#8211; Defines a double border<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&nbsp;groove- Defines a 3D grooved border. The effect depends on the border-color value<\/li>\n\n\n\n<li>ridge&nbsp;&#8211; Defines a 3D ridged border. The effect depends on the border-color value<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>inset&nbsp;&#8211; Defines a 3D inset border. The effect depends on the border-color value<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>outset&nbsp;&#8211; Defines a 3D outset border. The effect depends on the border-color value<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>none&nbsp;&#8211; Defines no border<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>hidden&nbsp;&#8211; Defines a hidden border<\/li>\n<\/ul>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Pavaniysk\/8c28e04155f9c7d89b8c5058ca9c6db2.js\"><\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is CSS? CSS is a language used to style a web page. It describes how HTML pages should displayed<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-43","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/43","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/comments?post=43"}],"version-history":[{"count":5,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/43\/revisions"}],"predecessor-version":[{"id":55,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/43\/revisions\/55"}],"wp:attachment":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/media?parent=43"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/categories?post=43"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/tags?post=43"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}