{"id":112024,"date":"2023-04-14T09:00:32","date_gmt":"2023-04-14T03:30:32","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=112024"},"modified":"2024-07-27T19:02:29","modified_gmt":"2024-07-27T13:32:29","slug":"external-css-tricks-with-examples","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/external-css-tricks-with-examples\/","title":{"rendered":"External CSS tricks with Examples"},"content":{"rendered":"

External CSS is a method of styling web pages by linking a separate CSS file to the HTML document. This allows for easier maintenance and organization of styles, as well as the ability to reuse styles across multiple pages.<\/p>\n

Here is an example of linking an external CSS file to an HTML document:<\/p>\n

<html>\r\n<head>\r\n    <link rel=\"stylesheet\" type=\"text\/CSS\" href=\"styles.css\">\r\n<\/head>\r\n<body>\r\n    <h1>DataFlair!<\/h1>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
The “styles.css” file might contain the following styles:<\/p>\n
h1 {\r\n    color: red;\r\n}\r\n<\/pre>\n
Output:<\/strong><\/p>\n
\"styles\"<\/a><\/p>\n
Noteworthy Features of External CSS<\/h3>\n
1. Separation of presentation and content:<\/h4>\n
By keeping the CSS in a separate file, the HTML can focus on structure and content, while the CSS focuses on styling. Here is an example of this separation:<\/p>\n
HTML<\/strong><\/p>\n
<html>\r\n<head>\r\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\">\r\n<\/head>\r\n<body>\r\n    <h1>DataFlair<\/h1>\r\n    <p>Welcome to DataFlair<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
CSS<\/strong><\/p>\n
h1 {\r\n    color: red;\r\n}\r\n<\/pre>\n
Output<\/strong><\/p>\n
\"presentation<\/a><\/p>\n
2. Reusability:<\/h4>\n
Styles can be reused across multiple pages, making it easy to maintain consistency throughout a website. Here is an example of reusing styles across multiple pages:<\/p>\n
HTML<\/strong><\/p>\n
<html>\r\n<head>\r\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\">\r\n<\/head>\r\n<body>\r\n    <h1>DataFlair<\/h1>\r\n    <h1>Welcome to DataFlair<\/h1>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
CSS<\/strong><\/p>\n
h1 {\r\n    color: red;\r\n    font-size: 36px;\r\n}\r\n<\/pre>\n
Output<\/strong><\/p>\n
\"reusability\"<\/a><\/p>\n
3. Easy maintenance:<\/h4>\n
Changes to styles can be made in one central location, rather than having to update multiple pages individually. Here is an example of how easy it is to make global changes to a website:<\/p>\n
HTML<\/strong><\/p>\n
<html>\r\n<head>\r\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\">\r\n<\/head>\r\n<body>\r\n    <h1>DataFlair<\/h1>\r\n    <p>Welcome to DataFlair.<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
CSS<\/strong><\/p>\n
h1 {\r\n    color: cyan;\r\n    font-size: 36px;\r\n}\r\np {\r\n    font-family: Arial;\r\n}\r\n<\/pre>\n
Output<\/strong><\/p>\n
\"easy<\/a><\/p>\n
External CSS also supplements the collaboration of the teams in web development projects. The ability to put the style definitions in a separate file is highly useful because two different developers are able to work on different portions of a website at the same time without adversely affecting one another\u2019s work. Such division of labor is beneficial to system development as it lessens difficulties in merging several branches of codes in the system, which would usually cause conflict in the version control system.<\/p>\n
Uses of External CSS<\/h3>\n
1. Styling text:<\/h4>\n
Changing font size, font style, color, and more. Here is an example of styling text:<\/p>\n
HTML<\/strong><\/p>\n
<html>\r\n<head>\r\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\">\r\n<\/head>\r\n<body>\r\n    <h1>DataFlair<\/h1>\r\n    <p>Welcome to DataFlair<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
CSS<\/strong><\/p>\n
h1 {\r\n    color: red;\r\n    font-size: 36px;\r\n    font-style: italic;\r\n}\r\np {\r\n    font-size: 18px;\r\n    font-weight: bold;\r\n    color: blue;\r\n}\r\n<\/pre>\n
Output<\/strong><\/p>\n
\"styling<\/a><\/p>\n
2. Changing layout:<\/h4>\n
Using CSS to position and size elements on a page. Here is an example of changing layout:<\/p>\n
HTML<\/strong><\/p>\n
<html>\r\n<head>\r\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\">\r\n<\/head>\r\n<body>\r\n    <div id=\"header\">Header<\/div>\r\n    <div id=\"content\">Content<\/div>\r\n    <div id=\"footer\">Footer<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
CSS<\/strong><\/p>\n
#header {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 50px;\r\n    background-color: blue;\r\n    color: white;\r\n}\r\n#content {\r\n    margin-top: 50px;\r\n    padding: 20px;\r\n}\r\n#footer {\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 50px;\r\n    background-color: gray;\r\n    color: cyan;\r\n}\r\n<\/pre>\n
Output<\/strong><\/p>\n
\"changing<\/a><\/p>\n
3. Adding effects:<\/h4>\n
CSS can be used to create hover effects, animations, and more. Here is an example of adding effects:<\/p>\n
HTML<\/strong><\/p>\n
<html>\r\n<head>\r\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\">\r\n<\/head>\r\n<body>\r\n    <div id=\"box\">Hover over me!<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
CSS<\/strong><\/p>\n
\/* styles.css *\/\r\n#box {\r\n    width: 100px;\r\n    height: 100px;\r\n    background-color: red;\r\n}\r\n#box:hover {\r\n    background-color: blue;\r\n    transition: background-color 1s;\r\n}\r\n<\/pre>\n
Output<\/strong><\/p>\n
\"adding<\/a><\/p>\n
\"adding<\/a><\/p>\n
Conclusion<\/h3>\n
W can say that an external CSS file is a separate file that contains only CSS code. It is linked to an HTML document using the “link” tag in the “head” section of the HTML document. Using an external CSS file allows for the separation of presentation and structure in a website, making it easier to maintain and update the visual design of the site. It also allows for the same styles to be reused across multiple pages, reducing code duplication and making the site more efficient to load. Overall, using an external CSS is considered the best practice for web development.<\/p>\n","protected":false},"excerpt":{"rendered":"
External CSS is a method of styling web pages by linking a separate CSS file to the HTML document. This allows for easier maintenance and organization of styles, as well as the ability to...<\/p>\n","protected":false},"author":5,"featured_media":112565,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27226],"tags":[27296,27297,27298],"class_list":["post-112024","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tutorials","tag-external-css","tag-external-css-in-html","tag-external-style-sheet"],"yoast_head":"\nExternal CSS tricks with Examples - DataFlair<\/title>\n<meta name=\"description\" content=\"External CSS allows for separation of presentation and structure in a website, making it easier to maintain and update. Learn more about it.\" \/>\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\/external-css-tricks-with-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"External CSS tricks with Examples - DataFlair\" \/>\n<meta property=\"og:description\" content=\"External CSS allows for separation of presentation and structure in a website, making it easier to maintain and update. Learn more about it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/external-css-tricks-with-examples\/\" \/>\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-04-14T03:30:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-27T13:32:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/external-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=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"External CSS tricks with Examples - DataFlair","description":"External CSS allows for separation of presentation and structure in a website, making it easier to maintain and update. Learn more about it.","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\/external-css-tricks-with-examples\/","og_locale":"en_US","og_type":"article","og_title":"External CSS tricks with Examples - DataFlair","og_description":"External CSS allows for separation of presentation and structure in a website, making it easier to maintain and update. Learn more about it.","og_url":"https:\/\/data-flair.training\/blogs\/external-css-tricks-with-examples\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2023-04-14T03:30:32+00:00","article_modified_time":"2024-07-27T13:32:29+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/external-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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/external-css-tricks-with-examples\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/external-css-tricks-with-examples\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823"},"headline":"External CSS tricks with Examples","datePublished":"2023-04-14T03:30:32+00:00","dateModified":"2024-07-27T13:32:29+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/external-css-tricks-with-examples\/"},"wordCount":435,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/external-css-tricks-with-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/external-css.webp","keywords":["External CSS","External CSS in html","external style sheet"],"articleSection":["CSS Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/external-css-tricks-with-examples\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/external-css-tricks-with-examples\/","url":"https:\/\/data-flair.training\/blogs\/external-css-tricks-with-examples\/","name":"External CSS tricks with Examples - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/external-css-tricks-with-examples\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/external-css-tricks-with-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/external-css.webp","datePublished":"2023-04-14T03:30:32+00:00","dateModified":"2024-07-27T13:32:29+00:00","description":"External CSS allows for separation of presentation and structure in a website, making it easier to maintain and update. Learn more about it.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/external-css-tricks-with-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/external-css-tricks-with-examples\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/external-css-tricks-with-examples\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/external-css.webp","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/external-css.webp","width":1200,"height":628,"caption":"external css"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/external-css-tricks-with-examples\/#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":"External CSS tricks with Examples"}]},{"@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\/112024","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=112024"}],"version-history":[{"count":5,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/112024\/revisions"}],"predecessor-version":[{"id":142996,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/112024\/revisions\/142996"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/112565"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=112024"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=112024"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=112024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}