{"id":59,"date":"2024-07-13T10:27:39","date_gmt":"2024-07-13T10:27:39","guid":{"rendered":"https:\/\/shaplakanon.com\/wdc\/?p=59"},"modified":"2024-07-13T10:27:40","modified_gmt":"2024-07-13T10:27:40","slug":"html-styles-tutorial-for-beginners","status":"publish","type":"post","link":"https:\/\/shaplakanon.com\/wdc\/html-styles-tutorial-for-beginners\/","title":{"rendered":"HTML Styles Tutorial for Beginners"},"content":{"rendered":"\n<p>Welcome to this tutorial on HTML styles! In this guide, you will learn how to create a simple HTML file, add styles to your text, and view the results in your web browser using a web hosting file manager. Let&#8217;s get started!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 1: Log into Your Web Hosting Control Panel<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open your web browser and go to your web hosting control panel login page (e.g., cPanel, Plesk, etc.).<\/li>\n\n\n\n<li>Enter your username and password to log in.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Step 2: Open the File Manager<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Once logged in, look for the <code>File Manager<\/code> option in your control panel dashboard.<\/li>\n\n\n\n<li>Click on <code>File Manager<\/code> to open it.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Step 3: Navigate to the Public Directory<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In the File Manager, navigate to the <code>public_html<\/code> directory or the appropriate directory where you want to create your HTML file.<\/li>\n\n\n\n<li>This directory is typically where you place files that you want to be accessible via your web domain.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Step 4: Create a New File<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In the <code>public_html<\/code> directory, click on the <code>+ File<\/code> or <code>New File<\/code> button.<\/li>\n\n\n\n<li>Name the new file <code>styles.html<\/code> and click <code>Create New File<\/code>.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Step 5: Edit the HTML File<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Locate the <code>styles.html<\/code> file you just created in the file list.<\/li>\n\n\n\n<li>Right-click on <code>styles.html<\/code> and select <code>Edit<\/code> or use the Edit button\/menu option to open the file in the text editor provided by the file manager.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Step 6: Add HTML Styles Code<\/h4>\n\n\n\n<p>Copy and paste the following HTML code into the text editor:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;HTML Styles Tutorial&lt;\/title&gt;\n    &lt;style&gt;\n        .example1 {color: red;}\n        .example2 {font-size: 20px;}\n        .example3 {font-family: Arial, sans-serif;}\n        .example4 {text-align: center;}\n        .example5 {font-style: italic;}\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h1&gt;HTML Styles Examples&lt;\/h1&gt;\n\n&lt;p class=\"example1\"&gt;This text is red.&lt;\/p&gt;\n&lt;p class=\"example2\"&gt;This text is 20 pixels in size.&lt;\/p&gt;\n&lt;p class=\"example3\"&gt;This text is in Arial font.&lt;\/p&gt;\n&lt;p class=\"example4\"&gt;This text is centered.&lt;\/p&gt;\n&lt;p class=\"example5\"&gt;This text is italic.&lt;\/p&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>This code includes various HTML style attributes applied using CSS classes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>.example1<\/code> sets the text color to red.<\/li>\n\n\n\n<li><code>.example2<\/code> sets the font size to 20 pixels.<\/li>\n\n\n\n<li><code>.example3<\/code> sets the font family to Arial.<\/li>\n\n\n\n<li><code>.example4<\/code> centers the text.<\/li>\n\n\n\n<li><code>.example5<\/code> sets the text to italic.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Step 7: Save the File<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>After pasting the code, click <code>Save<\/code> or use the save option in the text editor.<\/li>\n\n\n\n<li>Close the text editor once the file is saved.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Step 8: View the File in a Web Browser<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open your preferred web browser (e.g., Chrome, Firefox, Edge, Safari).<\/li>\n\n\n\n<li>Type your domain name in the address bar followed by <code>\/styles.html<\/code> (e.g., <code>http:\/\/yourdomain.com\/styles.html<\/code>).<\/li>\n\n\n\n<li>You should now see a webpage displaying the styled text as specified in your HTML code.<\/li>\n<\/ol>\n\n\n\n<p>Congratulations! You&#8217;ve successfully created an HTML file, added styles, and viewed it in your web browser using your web hosting file manager. Experiment with the HTML and CSS styles to see how they change the appearance of your text. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to this tutorial on HTML styles! In this guide, you will learn how to create a simple HTML file, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[16,14],"tags":[],"class_list":["post-59","post","type-post","status-publish","format-standard","hentry","category-css","category-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>HTML Styles Tutorial for Beginners - Web Development Course<\/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:\/\/shaplakanon.com\/wdc\/html-styles-tutorial-for-beginners\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Styles Tutorial for Beginners - Web Development Course\" \/>\n<meta property=\"og:description\" content=\"Welcome to this tutorial on HTML styles! In this guide, you will learn how to create a simple HTML file, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shaplakanon.com\/wdc\/html-styles-tutorial-for-beginners\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development Course\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-13T10:27:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-13T10:27:40+00:00\" \/>\n<meta name=\"author\" content=\"ShaplaKanon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ShaplaKanon\" \/>\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:\\\/\\\/shaplakanon.com\\\/wdc\\\/html-styles-tutorial-for-beginners\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/html-styles-tutorial-for-beginners\\\/\"},\"author\":{\"name\":\"ShaplaKanon\",\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/#\\\/schema\\\/person\\\/f5f224239283c27426dadc2e4cc9a825\"},\"headline\":\"HTML Styles Tutorial for Beginners\",\"datePublished\":\"2024-07-13T10:27:39+00:00\",\"dateModified\":\"2024-07-13T10:27:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/html-styles-tutorial-for-beginners\\\/\"},\"wordCount\":376,\"commentCount\":0,\"articleSection\":[\"CSS\",\"HTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/html-styles-tutorial-for-beginners\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/html-styles-tutorial-for-beginners\\\/\",\"url\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/html-styles-tutorial-for-beginners\\\/\",\"name\":\"HTML Styles Tutorial for Beginners - Web Development Course\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/#website\"},\"datePublished\":\"2024-07-13T10:27:39+00:00\",\"dateModified\":\"2024-07-13T10:27:40+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/#\\\/schema\\\/person\\\/f5f224239283c27426dadc2e4cc9a825\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/html-styles-tutorial-for-beginners\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/html-styles-tutorial-for-beginners\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/html-styles-tutorial-for-beginners\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML Styles Tutorial for Beginners\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/#website\",\"url\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/\",\"name\":\"Web Development Course\",\"description\":\"Become a Web Developer from Home\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/#\\\/schema\\\/person\\\/f5f224239283c27426dadc2e4cc9a825\",\"name\":\"ShaplaKanon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g\",\"caption\":\"ShaplaKanon\"},\"sameAs\":[\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/\"],\"url\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/author\\\/sabahat\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML Styles Tutorial for Beginners - Web Development Course","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:\/\/shaplakanon.com\/wdc\/html-styles-tutorial-for-beginners\/","og_locale":"en_US","og_type":"article","og_title":"HTML Styles Tutorial for Beginners - Web Development Course","og_description":"Welcome to this tutorial on HTML styles! In this guide, you will learn how to create a simple HTML file, [&hellip;]","og_url":"https:\/\/shaplakanon.com\/wdc\/html-styles-tutorial-for-beginners\/","og_site_name":"Web Development Course","article_published_time":"2024-07-13T10:27:39+00:00","article_modified_time":"2024-07-13T10:27:40+00:00","author":"ShaplaKanon","twitter_card":"summary_large_image","twitter_misc":{"Written by":"ShaplaKanon","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/shaplakanon.com\/wdc\/html-styles-tutorial-for-beginners\/#article","isPartOf":{"@id":"https:\/\/shaplakanon.com\/wdc\/html-styles-tutorial-for-beginners\/"},"author":{"name":"ShaplaKanon","@id":"https:\/\/shaplakanon.com\/wdc\/#\/schema\/person\/f5f224239283c27426dadc2e4cc9a825"},"headline":"HTML Styles Tutorial for Beginners","datePublished":"2024-07-13T10:27:39+00:00","dateModified":"2024-07-13T10:27:40+00:00","mainEntityOfPage":{"@id":"https:\/\/shaplakanon.com\/wdc\/html-styles-tutorial-for-beginners\/"},"wordCount":376,"commentCount":0,"articleSection":["CSS","HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/shaplakanon.com\/wdc\/html-styles-tutorial-for-beginners\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/shaplakanon.com\/wdc\/html-styles-tutorial-for-beginners\/","url":"https:\/\/shaplakanon.com\/wdc\/html-styles-tutorial-for-beginners\/","name":"HTML Styles Tutorial for Beginners - Web Development Course","isPartOf":{"@id":"https:\/\/shaplakanon.com\/wdc\/#website"},"datePublished":"2024-07-13T10:27:39+00:00","dateModified":"2024-07-13T10:27:40+00:00","author":{"@id":"https:\/\/shaplakanon.com\/wdc\/#\/schema\/person\/f5f224239283c27426dadc2e4cc9a825"},"breadcrumb":{"@id":"https:\/\/shaplakanon.com\/wdc\/html-styles-tutorial-for-beginners\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/shaplakanon.com\/wdc\/html-styles-tutorial-for-beginners\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/shaplakanon.com\/wdc\/html-styles-tutorial-for-beginners\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/shaplakanon.com\/wdc\/"},{"@type":"ListItem","position":2,"name":"HTML Styles Tutorial for Beginners"}]},{"@type":"WebSite","@id":"https:\/\/shaplakanon.com\/wdc\/#website","url":"https:\/\/shaplakanon.com\/wdc\/","name":"Web Development Course","description":"Become a Web Developer from Home","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/shaplakanon.com\/wdc\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/shaplakanon.com\/wdc\/#\/schema\/person\/f5f224239283c27426dadc2e4cc9a825","name":"ShaplaKanon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g","caption":"ShaplaKanon"},"sameAs":["https:\/\/shaplakanon.com\/wdc\/"],"url":"https:\/\/shaplakanon.com\/wdc\/author\/sabahat\/"}]}},"_links":{"self":[{"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/posts\/59","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/comments?post=59"}],"version-history":[{"count":1,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/posts\/59\/revisions"}],"predecessor-version":[{"id":60,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/posts\/59\/revisions\/60"}],"wp:attachment":[{"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/media?parent=59"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/categories?post=59"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/tags?post=59"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}