{"id":151,"date":"2010-10-09T03:20:12","date_gmt":"2010-10-09T11:20:12","guid":{"rendered":"https:\/\/www.bhavyatechnologies.com\/blog\/?p=151"},"modified":"2010-10-09T03:21:10","modified_gmt":"2010-10-09T11:21:10","slug":"applying-css","status":"publish","type":"post","link":"https:\/\/www.bhavyatechnologies.com\/blog\/applying-css\/","title":{"rendered":"Applying CSS"},"content":{"rendered":"

This HTML<\/abbr> Beginner Tutorial<\/strong> assumes that you have no previous knowledge of HTML or CSS<\/acronym>.<\/p>\n

There are three ways to apply CSS to HTML.<\/p>\n

\n
\n

In-line<\/h2>\n

In-line<\/strong> styles are plonked straight into the HTML tags using the style<\/code> attribute.<\/p>\n

They look something like this:<\/p>\n

\r\n<p style=\"color: red\">text<\/p><\/strong>\r\n<\/code><\/pre>\n
This will make that specific paragraph red.<\/p>\n
But, if you remember, the best-practice approach is that the HTML should be a stand-alone, presentation free<\/strong> document, and so in-line styles should be avoided wherever possible.<\/p>\n
Internal<\/h2>\n
Embedded, or internal<\/strong> styles are used for the whole page. Inside the head<\/code><\/a> tags, the style<\/code><\/a><\/strong> tags surround all of the styles for the page.<\/p>\n
This would look something like this:<\/p>\n
\r\n<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\"\r\n\"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd\">\r\n<html>\r\n<head>\r\n<title>CSS Example<\/title>\r\n<style type=\"text\/css\"><\/strong>\r\n\tp {<\/strong>\r\n\t\tcolor: red;<\/strong>\r\n\t}<\/strong>\r\n\r\n\ta {<\/strong>\r\n\t\tcolor: blue;<\/strong>\r\n\t}<\/strong>\r\n<\/style><\/strong>\r\n...\r\n<\/code><\/pre>\n
This will make all of the paragraphs in the page red and all of the links blue.<\/p>\n
Similarly to the in-line styles, you should keep the HTML and the CSS files separate, and so we are left with our saviour…<\/p>\n
External<\/h2>\n
External<\/strong> styles are used for the whole, multiple-page website. There is a separate CSS file<\/strong>, which will simply look something like:<\/p>\n
\r\np {<\/strong>\r\n\tcolor: red;<\/strong>\r\n}<\/strong>\r\n\r\na {<\/strong>\r\n\tcolor: blue;<\/strong>\r\n}<\/strong>\r\n<\/code><\/pre>\n
If this file is saved as “web.css” then it can be linked to in the HTML like this:<\/p>\n
\r\n<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\"\r\n\"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd\">\r\n<html>\r\n<head>\r\n\t<title>CSS Example<\/title>\r\n\t<link rel=\"stylesheet\" type=\"text\/css\" href=\"web.css\" \/><\/strong>\r\n...\r\n<\/code><\/pre>\n
In the CSS Advanced Tutorial<\/a>, we will see that there are other ways of linking external style sheets<\/a>, but this will suffice for now.<\/p>\n
To get the most from this guide, it would be a good idea to try out the code as we go along, so start a fresh new file with your text-editor and save the blank document as “web.css” in the same directory as your HTML file.<\/p>\n
Now change your HTML file so that it starts something like this:<\/p>\n
\r\n<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\"\r\n\"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd\">\r\n\r\n<html>\r\n\r\n<head>\r\n\t<title>My first web page<\/title>\r\n\t<link rel=\"stylesheet\" type=\"text\/css\" href=\"web.css\" \/><\/strong>\r\n<\/head>\r\n...\r\n<\/code><\/pre>\n
Save the HTML file. This now links to the CSS file, which is empty at the moment, so won’t change a thing. As you work your way through the CSS Beginner Tutorial, you will be able to add to and change the CSS file and see the results by simply refreshing the browser window that has the HTML file in it, as we did before.<\/p>\n
Source: www.htmldog.com<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
This HTML Beginner Tutorial assumes that you have no previous knowledge of HTML or CSS. There are three ways to apply CSS to HTML. In-line In-line styles are plonked straight into the HTML tags using the style attribute. They look something like this: <p style=”color: red”>text<\/p> This will make that specific paragraph red. But, if … Continue reading Applying CSS<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-151","post","type-post","status-publish","format-standard","hentry","category-css"],"yoast_head":"\nApplying CSS - Bhavya Technologies - Blog<\/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:\/\/www.bhavyatechnologies.com\/blog\/applying-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Applying CSS - Bhavya Technologies - Blog\" \/>\n<meta property=\"og:description\" content=\"This HTML Beginner Tutorial assumes that you have no previous knowledge of HTML or CSS. There are three ways to apply CSS to HTML. In-line In-line styles are plonked straight into the HTML tags using the style attribute. They look something like this: <p style="color: red">text<\/p> This will make that specific paragraph red. But, if … Continue reading Applying CSS\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bhavyatechnologies.com\/blog\/applying-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Bhavya Technologies - Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BhavyaWebTech\/\" \/>\n<meta property=\"article:published_time\" content=\"2010-10-09T11:20:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2010-10-09T11:21:10+00:00\" \/>\n<meta name=\"author\" content=\"Bhavya Technologies\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bhavyatech\" \/>\n<meta name=\"twitter:site\" content=\"@bhavyatech\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bhavya Technologies\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/applying-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/applying-css\/\"},\"author\":{\"name\":\"Bhavya Technologies\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/a8b972526a82dee1d674d1fcb5124895\"},\"headline\":\"Applying CSS\",\"datePublished\":\"2010-10-09T11:20:12+00:00\",\"dateModified\":\"2010-10-09T11:21:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/applying-css\/\"},\"wordCount\":342,\"publisher\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#organization\"},\"articleSection\":[\"CSS Tips\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/applying-css\/\",\"url\":\"https:\/\/www.bhavyatechnologies.com\/blog\/applying-css\/\",\"name\":\"Applying CSS - Bhavya Technologies - Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#website\"},\"datePublished\":\"2010-10-09T11:20:12+00:00\",\"dateModified\":\"2010-10-09T11:21:10+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/applying-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.bhavyatechnologies.com\/blog\/applying-css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/applying-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.bhavyatechnologies.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Applying CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#website\",\"url\":\"https:\/\/www.bhavyatechnologies.com\/blog\/\",\"name\":\"Bhavya Technologies - Blog\",\"description\":\"\u00a0Digital Marketing, Website design & development company in Hyderabad, India\",\"publisher\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.bhavyatechnologies.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#organization\",\"name\":\"Bhavya Web Technologies\",\"url\":\"https:\/\/www.bhavyatechnologies.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.bhavyatechnologies.com\/blog\/wp-content\/uploads\/2017\/07\/cropped-NewLogo.png\",\"contentUrl\":\"https:\/\/www.bhavyatechnologies.com\/blog\/wp-content\/uploads\/2017\/07\/cropped-NewLogo.png\",\"width\":248,\"height\":100,\"caption\":\"Bhavya Web Technologies\"},\"image\":{\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/BhavyaWebTech\/\",\"https:\/\/x.com\/bhavyatech\",\"http:\/\/www.linkedin.com\/company\/bhavya-technologies\/\",\"http:\/\/www.youtube.com\/user\/bhavyatechnologies\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/a8b972526a82dee1d674d1fcb5124895\",\"name\":\"Bhavya Technologies\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/fe762d42f67c5102549b2df80f35f4328850bd6b77a18d11070f369c3854d473?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/fe762d42f67c5102549b2df80f35f4328850bd6b77a18d11070f369c3854d473?s=96&d=mm&r=g\",\"caption\":\"Bhavya Technologies\"},\"description\":\"We are team of young, energetic and dynamic members, focused on providing high quality website designing, website development and Internet Marketing services. With a team of such Bhavya member we always try and deliver high quality of project, exceeding client\u2019s expectation.\",\"sameAs\":[\"http:\/\/www.bhavyatechnologies.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Applying CSS - Bhavya Technologies - Blog","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:\/\/www.bhavyatechnologies.com\/blog\/applying-css\/","og_locale":"en_US","og_type":"article","og_title":"Applying CSS - Bhavya Technologies - Blog","og_description":"This HTML Beginner Tutorial assumes that you have no previous knowledge of HTML or CSS. There are three ways to apply CSS to HTML. In-line In-line styles are plonked straight into the HTML tags using the style attribute. They look something like this: <p style=\"color: red\">text<\/p> This will make that specific paragraph red. But, if … Continue reading Applying CSS","og_url":"https:\/\/www.bhavyatechnologies.com\/blog\/applying-css\/","og_site_name":"Bhavya Technologies - Blog","article_publisher":"https:\/\/www.facebook.com\/BhavyaWebTech\/","article_published_time":"2010-10-09T11:20:12+00:00","article_modified_time":"2010-10-09T11:21:10+00:00","author":"Bhavya Technologies","twitter_card":"summary_large_image","twitter_creator":"@bhavyatech","twitter_site":"@bhavyatech","twitter_misc":{"Written by":"Bhavya Technologies","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/applying-css\/#article","isPartOf":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/applying-css\/"},"author":{"name":"Bhavya Technologies","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/a8b972526a82dee1d674d1fcb5124895"},"headline":"Applying CSS","datePublished":"2010-10-09T11:20:12+00:00","dateModified":"2010-10-09T11:21:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/applying-css\/"},"wordCount":342,"publisher":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#organization"},"articleSection":["CSS Tips"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/applying-css\/","url":"https:\/\/www.bhavyatechnologies.com\/blog\/applying-css\/","name":"Applying CSS - Bhavya Technologies - Blog","isPartOf":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#website"},"datePublished":"2010-10-09T11:20:12+00:00","dateModified":"2010-10-09T11:21:10+00:00","breadcrumb":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/applying-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bhavyatechnologies.com\/blog\/applying-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/applying-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.bhavyatechnologies.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Applying CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#website","url":"https:\/\/www.bhavyatechnologies.com\/blog\/","name":"Bhavya Technologies - Blog","description":"\u00a0Digital Marketing, Website design & development company in Hyderabad, India","publisher":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bhavyatechnologies.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#organization","name":"Bhavya Web Technologies","url":"https:\/\/www.bhavyatechnologies.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-content\/uploads\/2017\/07\/cropped-NewLogo.png","contentUrl":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-content\/uploads\/2017\/07\/cropped-NewLogo.png","width":248,"height":100,"caption":"Bhavya Web Technologies"},"image":{"@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/BhavyaWebTech\/","https:\/\/x.com\/bhavyatech","http:\/\/www.linkedin.com\/company\/bhavya-technologies\/","http:\/\/www.youtube.com\/user\/bhavyatechnologies"]},{"@type":"Person","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/a8b972526a82dee1d674d1fcb5124895","name":"Bhavya Technologies","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bhavyatechnologies.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/fe762d42f67c5102549b2df80f35f4328850bd6b77a18d11070f369c3854d473?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fe762d42f67c5102549b2df80f35f4328850bd6b77a18d11070f369c3854d473?s=96&d=mm&r=g","caption":"Bhavya Technologies"},"description":"We are team of young, energetic and dynamic members, focused on providing high quality website designing, website development and Internet Marketing services. With a team of such Bhavya member we always try and deliver high quality of project, exceeding client\u2019s expectation.","sameAs":["http:\/\/www.bhavyatechnologies.com"]}]}},"_links":{"self":[{"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/151","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=151"}],"version-history":[{"count":3,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/151\/revisions"}],"predecessor-version":[{"id":154,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/151\/revisions\/154"}],"wp:attachment":[{"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bhavyatechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}