{"id":8280,"date":"2024-10-09T22:53:30","date_gmt":"2024-10-09T17:23:30","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=8280"},"modified":"2024-10-09T22:53:34","modified_gmt":"2024-10-09T17:23:34","slug":"front-end-development-css","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/front-end-development-css\/","title":{"rendered":"Front-end Development &#8211; CSS"},"content":{"rendered":"\n<p><strong>Introduction:<\/strong><\/p>\n\n\n\n<p> CSS stands for Cascading Style Sheet, a standard language that specifies how to display content on a web page. With CSS, we can control the design layout and its components for various devices, such as desktops, tablets, and mobile phones. Examples of components are header, footer, body, section and contents.<\/p>\n\n\n\n<p>HTML never intended to have tags for formatting the web page. Development of large websites where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide web Consortium(W3C)  created CSS. CSS removed the style formatting from the HTML page.<\/p>\n\n\n\n<p><strong>CSS Syntax:<\/strong><\/p>\n\n\n\n<p> A CSS rule consists of a selector and declaration block.<\/p>\n\n\n\n<p>The Selector points to the HTML element we want to style. The declaration contains one or more declarations separated by semicolons.<\/p>\n\n\n\n<p>Each declaration includes a CSS property name and value, separated by a colon. Multiple CSS declarations  separated with semicolons,and declaration blocks are surrounded by curly braces.<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<p>If we want to style a paragraph tag, the styling will be:<\/p>\n\n\n\n<p>p{<\/p>\n\n\n\n<p>color : red;<\/p>\n\n\n\n<p>text-align: center;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>Here p is the selector, color is the property and red is the value.<\/p>\n\n\n\n<p><strong>CSS Selectors:<\/strong><\/p>\n\n\n\n<p> CSS selectors are used to find or select the HTML elements we want to style. The selectors can be divided into five categories.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Simple Selectors (Elements based on id,class name,name)<\/li>\n\n\n\n<li>Combinator selectors (Elements based on specific relationship)<\/li>\n\n\n\n<li>Pseudo-class Selectors (Elements based on state)<\/li>\n\n\n\n<li>Pseudo-elements Selectors (Select and style part of the element)<\/li>\n\n\n\n<li>Attribute Selectors (Select based on Attribute or attribute value)<\/li>\n<\/ul>\n\n\n\n<p>We can group the selectors and provide the styling commonly which heps to reduce the code.<\/p>\n\n\n\n<p><strong>Ways to insert CSS:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>External CSS<\/li>\n\n\n\n<li>Internal CSS<\/li>\n\n\n\n<li>Inline CSS<\/li>\n<\/ul>\n\n\n\n<p><strong>External CSS:<\/strong><\/p>\n\n\n\n<p> An external style sheet can be written in any text editor and must be saved with &#8220;<em>.css<\/em>&#8221; extension. Using link HTML tag, we can insert the stylesheet in head scetion to apply the styles.<\/p>\n\n\n\n<p>EX:  &lt;link rel=&#8221;stylesheet&#8221; href=&#8221;mystyle.css&#8221;><\/p>\n\n\n\n<p><strong>Internal CSS<\/strong>:<\/p>\n\n\n\n<p> An internal style sheet is used if a single HTML page contains a unique style. The style is defined inside &lt;style> tag inside head section.<\/p>\n\n\n\n<p>EX: &lt;style><\/p>\n\n\n\n<p>h1\u00a0{<br>\u00a0 color:\u00a0maroon;<br>\u00a0 margin-left:\u00a040px;<br>}<\/p>\n\n\n\n<p>&lt;\/style><\/p>\n\n\n\n<p><strong>Inline CSS:<\/strong><\/p>\n\n\n\n<p>This is used to apply styling for a single element.<\/p>\n\n\n\n<p>EX: &lt;p\u00a0style=&#8221;color:red;&#8221;> This is Paragraph &lt;\/p><\/p>\n\n\n\n<p>The style sheet is mainly responsible for developing the web page responsive.<\/p>\n\n\n\n<p>For developing a web page mobile responsive, we need to use CSS properties like viewport, media queries, grid view, frameworks. <\/p>\n\n\n\n<p>With the help of CSS, we can effectively develop a webpage that enhances its appearance and creates a more interactive user experience.<\/p>\n\n\n\n<p>Previous Blog:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-pheonix-solutions wp-block-embed-pheonix-solutions\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"WfkTYfYTgW\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/front-end-development-javascript\/\">Front-end Development &#8211; Javascript<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;Front-end Development &#8211; Javascript&#8221; &#8212; PHEONIX SOLUTIONS\" src=\"https:\/\/pheonixsolutions.com\/blog\/front-end-development-javascript\/embed\/#?secret=7W3WqYCu4C#?secret=WfkTYfYTgW\" data-secret=\"WfkTYfYTgW\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Introduction: CSS stands for Cascading Style Sheet, a standard language that specifies how to display content on a web page. With CSS, we can control the design layout and its components for various devices, such as desktops, tablets, and mobile phones. Examples of components are header, footer, body, section and&hellip; <a href=\"https:\/\/pheonixsolutions.com\/blog\/front-end-development-css\/\" class=\"more-link read-more\" rel=\"bookmark\">Continue Reading <span class=\"screen-reader-text\">Front-end Development &#8211; CSS<\/span><i class=\"fa fa-arrow-right\"><\/i><\/a><\/p>\n","protected":false},"author":502,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-8280","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-uncategorized","7":"h-entry","9":"h-as-article"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Pheonix Solutions - We Empower Your Business Growth<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pheonixsolutions.com\/blog\/front-end-development-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pheonix Solutions - We Empower Your Business Growth\" \/>\n<meta property=\"og:description\" content=\"Introduction: CSS stands for Cascading Style Sheet, a standard language that specifies how to display content on a web page. With CSS, we can control the design layout and its components for various devices, such as desktops, tablets, and mobile phones. Examples of components are header, footer, body, section and&hellip; Continue Reading Front-end Development &#8211; CSS\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pheonixsolutions.com\/blog\/front-end-development-css\/\" \/>\n<meta property=\"og:site_name\" content=\"PHEONIXSOLUTIONS\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-09T17:23:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-09T17:23:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/09\/PX2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3837\" \/>\n\t<meta property=\"og:image:height\" content=\"2540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Keerthana P\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pheonixsolution\" \/>\n<meta name=\"twitter:site\" content=\"@pheonixsolution\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Keerthana P\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/front-end-development-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/front-end-development-css\\\/\"},\"author\":{\"name\":\"Keerthana P\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/person\\\/bfb764836e66c01d0c03dd2e79ce94fa\"},\"headline\":\"Front-end Development &#8211; CSS\",\"datePublished\":\"2024-10-09T17:23:30+00:00\",\"dateModified\":\"2024-10-09T17:23:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/front-end-development-css\\\/\"},\"wordCount\":458,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/front-end-development-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/front-end-development-css\\\/\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/front-end-development-css\\\/\",\"name\":\"Pheonix Solutions - We Empower Your Business Growth\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#website\"},\"datePublished\":\"2024-10-09T17:23:30+00:00\",\"dateModified\":\"2024-10-09T17:23:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/front-end-development-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/front-end-development-css\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/front-end-development-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Front-end Development &#8211; CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\",\"name\":\"Pheonix Solutions\",\"description\":\"We Empower Your Business Growth\",\"publisher\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\",\"name\":\"PheonixSolutions\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/logo.png\",\"width\":454,\"height\":300,\"caption\":\"PheonixSolutions\"},\"image\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/PheonixSolutions-209942982759387\\\/\",\"https:\\\/\\\/x.com\\\/pheonixsolution\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/person\\\/bfb764836e66c01d0c03dd2e79ce94fa\",\"name\":\"Keerthana P\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g\",\"caption\":\"Keerthana P\"},\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/author\\\/keerthana\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pheonix Solutions - We Empower Your Business Growth","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pheonixsolutions.com\/blog\/front-end-development-css\/","og_locale":"en_US","og_type":"article","og_title":"Pheonix Solutions - We Empower Your Business Growth","og_description":"Introduction: CSS stands for Cascading Style Sheet, a standard language that specifies how to display content on a web page. With CSS, we can control the design layout and its components for various devices, such as desktops, tablets, and mobile phones. Examples of components are header, footer, body, section and&hellip; Continue Reading Front-end Development &#8211; CSS","og_url":"https:\/\/pheonixsolutions.com\/blog\/front-end-development-css\/","og_site_name":"PHEONIXSOLUTIONS","article_publisher":"https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/","article_published_time":"2024-10-09T17:23:30+00:00","article_modified_time":"2024-10-09T17:23:34+00:00","og_image":[{"width":3837,"height":2540,"url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/09\/PX2.png","type":"image\/png"}],"author":"Keerthana P","twitter_card":"summary_large_image","twitter_creator":"@pheonixsolution","twitter_site":"@pheonixsolution","twitter_misc":{"Written by":"Keerthana P","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/pheonixsolutions.com\/blog\/front-end-development-css\/#article","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/front-end-development-css\/"},"author":{"name":"Keerthana P","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/person\/bfb764836e66c01d0c03dd2e79ce94fa"},"headline":"Front-end Development &#8211; CSS","datePublished":"2024-10-09T17:23:30+00:00","dateModified":"2024-10-09T17:23:34+00:00","mainEntityOfPage":{"@id":"https:\/\/pheonixsolutions.com\/blog\/front-end-development-css\/"},"wordCount":458,"commentCount":0,"publisher":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#organization"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/pheonixsolutions.com\/blog\/front-end-development-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/pheonixsolutions.com\/blog\/front-end-development-css\/","url":"https:\/\/pheonixsolutions.com\/blog\/front-end-development-css\/","name":"Pheonix Solutions - We Empower Your Business Growth","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#website"},"datePublished":"2024-10-09T17:23:30+00:00","dateModified":"2024-10-09T17:23:34+00:00","breadcrumb":{"@id":"https:\/\/pheonixsolutions.com\/blog\/front-end-development-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pheonixsolutions.com\/blog\/front-end-development-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/pheonixsolutions.com\/blog\/front-end-development-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pheonixsolutions.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Front-end Development &#8211; CSS"}]},{"@type":"WebSite","@id":"https:\/\/pheonixsolutions.com\/blog\/#website","url":"https:\/\/pheonixsolutions.com\/blog\/","name":"Pheonix Solutions","description":"We Empower Your Business Growth","publisher":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pheonixsolutions.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/pheonixsolutions.com\/blog\/#organization","name":"PheonixSolutions","url":"https:\/\/pheonixsolutions.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/12\/logo.png","contentUrl":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/12\/logo.png","width":454,"height":300,"caption":"PheonixSolutions"},"image":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/","https:\/\/x.com\/pheonixsolution"]},{"@type":"Person","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/person\/bfb764836e66c01d0c03dd2e79ce94fa","name":"Keerthana P","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g","caption":"Keerthana P"},"url":"https:\/\/pheonixsolutions.com\/blog\/author\/keerthana\/"}]}},"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p7F4uM-29y","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/8280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/502"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=8280"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/8280\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=8280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=8280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=8280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}