{"id":20,"date":"2024-01-16T20:00:00","date_gmt":"2024-01-16T20:00:00","guid":{"rendered":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/?p=20"},"modified":"2024-01-16T20:00:00","modified_gmt":"2024-01-16T20:00:00","slug":"css-basics","status":"publish","type":"post","link":"https:\/\/aidailyflow.com\/?p=20","title":{"rendered":"Introduction to CSS \ud83d\ude80"},"content":{"rendered":"\n<p>So far we\u2019ve worked with HTML alone.<\/p>\n\n\n\n<p>While HTML forms the backbone of web content, the need for customization and visual appeal leads us to Cascading Style Sheets (CSS). CSS is a web standard designed for styling HTML elements, allowing us to control the presentation and layout of our web pages.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"css-rule-example\">CSS Rule Example<\/h3>\n\n\n\n<p>Here&#8217;s a basic example of a CSS rule that styles paragraph tags:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>p {\n  color: red;\n}\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Selector (<code>p<\/code>):<\/strong> Identifies the HTML element to which the styling rules will be applied.<\/li>\n\n\n\n<li><strong>Declaration Block (<code>{ color: red; }<\/code>):<\/strong> Contains one or more declarations. Each declaration comprises a property (<code>color<\/code>) and its corresponding value (<code>red<\/code>).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"applying-css\">Applying CSS<\/h3>\n\n\n\n<p>CSS can be applied in various ways:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"1-inline-style\">1. Inline Style<\/h4>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>&lt;p style=\"color: red;\"&gt;This is a red paragraph.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"2-internal-style-within-html-document\">2. Internal Style (Within HTML Document)<\/h4>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;head&gt;\n  &lt;style&gt;\n    p {\n      color: red;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"3-external-style-in-separate-css-file\">3. External Style (In Separate CSS File)<\/h4>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;head&gt;\n  &lt;link href=\"style.css\" rel=\"stylesheet\" \/&gt;\n&lt;\/head&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"multiple-css-rules\">Multiple CSS Rules<\/h3>\n\n\n\n<p>You can list multiple CSS rules to apply different styles to various elements:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>p {\n  color: red;\n}\n\na {\n  color: blue;\n}\n<\/code><\/pre>\n\n\n\n<p>A selector can target one or more items:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>p, a {\n  color: red;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"selectors-and-spacing\">Selectors and Spacing<\/h3>\n\n\n\n<p>Selectors can target one or more items, and spacing is insignificant in CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>p,a {\n  color: red;}\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>p,a {              color: red;\n         }\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"best-practices\">Best Practices<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Each declaration in the declaration block should end with a semicolon (<code>;<\/code>).<\/li>\n\n\n\n<li>Proper indentation and spacing enhance readability but are not required by the browser.<\/li>\n<\/ul>\n\n\n\n<p>Understanding these fundamental concepts equips you to enhance the visual aspects of your HTML documents using CSS. As you delve deeper, you&#8217;ll discover the versatility and power CSS brings to web development. Stay tuned for more insights into advanced CSS techniques and best practices.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>So far we\u2019ve worked with HTML alone. While HTML forms the backbone of web content, the need for customization and visual appeal leads us to&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,6,8],"tags":[],"class_list":["post-20","post","type-post","status-publish","format-standard","hentry","category-3-css","category-1-fundamentals","category-2-html"],"menu_order":0,"_links":{"self":[{"href":"https:\/\/aidailyflow.com\/index.php?rest_route=\/wp\/v2\/posts\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aidailyflow.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aidailyflow.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aidailyflow.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aidailyflow.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=20"}],"version-history":[{"count":0,"href":"https:\/\/aidailyflow.com\/index.php?rest_route=\/wp\/v2\/posts\/20\/revisions"}],"wp:attachment":[{"href":"https:\/\/aidailyflow.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aidailyflow.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aidailyflow.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}