{"id":112033,"date":"2023-02-24T09:00:00","date_gmt":"2023-02-24T03:30:00","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=112033"},"modified":"2024-07-29T12:15:30","modified_gmt":"2024-07-29T06:45:30","slug":"internal-css","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/internal-css\/","title":{"rendered":"Internal CSS \u2013 All You Need to Know"},"content":{"rendered":"

Internal CSS refers to the use of cascading style sheets (CSS) within an HTML document, rather than linking to an external CSS file. Internal CSS allows for quick and easy styling of individual web pages, without the need to make changes to an external file that affects the entire website.<\/p>\n

How to use Internal CSS<\/h3>\n

To use internal CSS, the CSS code is placed within the head section of an HTML document, using the <style> tag. The CSS code is then applied to specific elements within the body of the HTML document, using selectors and declarations.<\/p>\n

Selectors are used to specifying which HTML elements the CSS styles will be applied to. For example, a p selector will apply the CSS styles to all <p> elements within the HTML document. Declarations are used to specify the styles that will be applied to the selected elements. For example, a declaration of color: red; will change the color of the text within the selected elements to red.<\/p>\n

Uses of Internal CSS<\/h3>\n

1. It is a useful tool for styling individual web pages without the need to make changes to an external CSS file that affects the entire website.<\/p>\n

Here is an example of internal CSS being used to change the background color and font of a webpage:<\/p>\n

<html>\r\n  <head>\r\n    <style>\r\n      body {\r\n        background-color: cyan;\r\n        font-family: Arial, sans-serif;\r\n      }\r\n      h1 {\r\n        color: white;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <h1>Welcome to DataFlair<\/h1>\r\n    <p>This is an example of internal CSS.<\/p>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
Output<\/strong><\/p>\n
\"uses<\/a><\/p>\n
In this example, the CSS code is placed within the <style> tags in the head section of the HTML document. The body selector is used to apply the background color and font to the entire webpage. The h1 selector is used to change the color of the text within the <h1> element.<\/p>\n
As a result, when the webpage is loaded in a browser, the background color of the webpage will be light blue and the font will be Arial. The text within the <h1> element will be dark blue.<\/p>\n
2. Internal CSS also allows for the use of inline styles, which can be applied directly to individual HTML elements. For example, you can change the color of a single paragraph using the style attribute:<\/p>\n
<p style=\"color: red;\">This is a red paragraph<\/p>\r\n<\/pre>\n
Output<\/strong><\/p>\n
\"inline<\/a><\/p>\n
Features of Internal CSS<\/h3>\n
1. Easy to use:<\/strong> Internal CSS is easy to implement and understand, as it is placed directly within the HTML document. This allows for quick and easy styling of individual web pages, without the need to make changes to an external file that affects the entire website.<\/p>\n
Example<\/strong>:<\/p>\n
<html>\r\n  <head>\r\n    <style>\r\n      h1 {\r\n        color: #2700ff;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <h1>DataFlair<\/h1>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
Output<\/strong><\/p>\n
\"easy<\/a><\/p>\n
2 . Inline styles:<\/strong> Internal CSS allows for the use of inline styles, which can be applied directly to individual HTML elements. This can be useful for making small adjustments to specific elements, without the need to create a new class or id in the CSS.<\/p>\n
Example<\/strong><\/p>\n
<p style=\"color: red;\">This is a red paragraph<\/p>\r\n<\/pre>\n
Output<\/strong><\/p>\n
\"color<\/a><\/p>\n
 <\/p>\n
3. Specificity:<\/strong> Internal CSS styles have higher specificity than external CSS styles. This means that if there is a conflict between internal and external styles, the internal styles will take precedence.<\/p>\n
Example<\/strong><\/p>\n
<html>\r\n  <head>\r\n    <style>\r\n      h1 {\r\n        color: blue;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <h1 style=\"color: red;\">DataFlair<\/h1>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
Output<\/strong><\/p>\n
\"specificity\"<\/a><\/p>\n
The use of internal CSS has the advantage of enabling changes to be made easily affecting a certain HTML page without making modifications on other HTML pages that are not affected. This kind of selected styling is most beneficial at the development stage or in cases when the styles should be changed from time to time, for example in the creation of prototypes.<\/p>\n
However, internal CSS may be less effective than external CSS in particular when it comes to maintaining consistency in a large website. When using external CSS, modifications made to a single CSS file are applied to all the web pages and this saves time besides reducing duplication.<\/p>\n
Conclusion<\/h3>\n
In this article by DataFlair, we can conclude by saying that Internal CSS refers to the use of CSS styles within an HTML document, rather than in a separate file. This allows for specific styling to be applied to a single HTML document, rather than across an entire website. It can be useful for small, simple websites or for creating unique styles for a single page. However, for larger websites with multiple pages, it is generally more efficient to use external CSS styles in a separate file, as this allows for easy maintenance and reusability of styles across multiple pages.<\/p>\n","protected":false},"excerpt":{"rendered":"
Internal CSS refers to the use of cascading style sheets (CSS) within an HTML document, rather than linking to an external CSS file. Internal CSS allows for quick and easy styling of individual web...<\/p>\n","protected":false},"author":5,"featured_media":112264,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27226],"tags":[27264,27265],"class_list":["post-112033","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tutorials","tag-internal-css","tag-uses-of-internal-css"],"yoast_head":"\nInternal CSS \u2013 All You Need to Know - DataFlair<\/title>\n<meta name=\"description\" content=\"Internal CSS refers to the use of CSS styles within an HTML document. See its features and uses with examples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/internal-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Internal CSS \u2013 All You Need to Know - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Internal CSS refers to the use of CSS styles within an HTML document. See its features and uses with examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/internal-css\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-24T03:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-29T06:45:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/internal-css.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Internal CSS \u2013 All You Need to Know - DataFlair","description":"Internal CSS refers to the use of CSS styles within an HTML document. See its features and uses with examples.","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:\/\/data-flair.training\/blogs\/internal-css\/","og_locale":"en_US","og_type":"article","og_title":"Internal CSS \u2013 All You Need to Know - DataFlair","og_description":"Internal CSS refers to the use of CSS styles within an HTML document. See its features and uses with examples.","og_url":"https:\/\/data-flair.training\/blogs\/internal-css\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2023-02-24T03:30:00+00:00","article_modified_time":"2024-07-29T06:45:30+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/internal-css.webp","type":"image\/webp"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/internal-css\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/internal-css\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823"},"headline":"Internal CSS \u2013 All You Need to Know","datePublished":"2023-02-24T03:30:00+00:00","dateModified":"2024-07-29T06:45:30+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/internal-css\/"},"wordCount":697,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/internal-css\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/internal-css.webp","keywords":["Internal CSS","uses of internal css"],"articleSection":["CSS Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/internal-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/internal-css\/","url":"https:\/\/data-flair.training\/blogs\/internal-css\/","name":"Internal CSS \u2013 All You Need to Know - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/internal-css\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/internal-css\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/internal-css.webp","datePublished":"2023-02-24T03:30:00+00:00","dateModified":"2024-07-29T06:45:30+00:00","description":"Internal CSS refers to the use of CSS styles within an HTML document. See its features and uses with examples.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/internal-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/internal-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/internal-css\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/internal-css.webp","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/internal-css.webp","width":1200,"height":628,"caption":"internal css"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/internal-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"CSS Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/css-tutorials\/"},{"@type":"ListItem","position":3,"name":"Internal CSS \u2013 All You Need to Know"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team creates expert-level guides on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Our goal is to empower learners with easy-to-understand content. Explore our resources for career growth and practical learning.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/112033","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=112033"}],"version-history":[{"count":5,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/112033\/revisions"}],"predecessor-version":[{"id":143007,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/112033\/revisions\/143007"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/112264"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=112033"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=112033"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=112033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}