<\/p>\n
Do you need to know HTML and CSS to use WordPress?<\/strong><\/p>\n No. But the more you know, the better off you\u2019ll be at managing your WordPress website (self-hosted version). We won\u2019t dig too deep, just enough to get a little dirty.<\/p>\n You can create a WordPress website<\/strong> without knowing how to code by selecting a theme, publishing pages, creating a custom menu and adding pages to that menu.<\/p>\n But sooner or later, you’ll want to tweak your site or solve a problem.<\/p>\n You have to understand the files and code just enough to pull this off. By going under the hood, you\u2019ll take a giant leap forward and be better prepared if you\u2019re ever confronted with the dreaded \u201cwhite screen of death.<\/a>\u201d<\/strong><\/p>\n Ready? Let\u2019s start digging.<\/strong><\/p>\n You may not know that WordPress is built upon mainly three languages, PHP,<\/strong> CSS<\/strong> and HTML.<\/strong> JavaScript<\/strong> is gaining increasing importance too.<\/p>\n Why learn HTML when you can already publish posts<\/a> and pages? <\/strong>Learning basic HTML (along with CSS) will help you gain greater control over the look of your individual posts and pages.<\/p>\n HTML is the main language used to create web pages. It’s all about organizing and controlling how your website content is displayed. Its purpose is to apply meaning, not presentation. Using HTML elements, you can define content as paragraphs, headings, lists, links, images etc..<\/p>\n You may already be familiar with HTML if you\u2019ve written a WordPress post and switched to your Code editor in your WordPress Gutenberg editor.<\/p>\n (FYI: The WordPress Gutenberg editor for posts and pages can be found when you go to Admin > Posts > Add New<\/strong> or Admin > Pages > Add New<\/strong>.)<\/p>\n Go to your WordPress admin section (dashboard) and edit a post or page you\u2019ve written. <\/p>\n Do you see a lot of angle brackets < ><\/strong>? You\u2019re looking at HTML.<\/p>\n HTML is all about elements and tags. HTML elements are the building blocks of HTML pages. An HTML element generally consists of a start tag, content and an end tag.<\/p>\n <h1><\/strong>This is a Heading<\/h1><\/strong><\/p>\n <a href=”https:\/\/www.crimsondesigns.com<\/a>“><\/strong> This is a link.<\/a><\/strong><\/p>\n<\/div>\n In a web page (source code<\/u><\/a>), you may notice that <html><\/strong> is the opening tag.<\/strong> It starts things off and tells the browser that everything between that and the <\/html><\/strong> closing tag<\/strong> is an HTML document.<\/p>\n The content between <body><\/strong> and <\/body><\/strong> is the main content that will appear in the web browser screen.<\/p>\n Keep in mind, web browsers (ex. Chrome, Firefox) do not display HTML tags, but use them to determine how to display the document. Web browsers read HTML documents and display them on a screen.<\/p>\n Did you know?<\/strong><\/p>\n Did you know that if you work strictly in your WordPress VISUAL Editor (Gutenberg), you\u2019re still adding HTML to your post? It is just taking place “under the hood<\/strong>” where you can\u2019t see it.<\/p>\n Once you make the move to the Code editor, you will be taking your first step towards better WordPress management and you\u2019ll gain some HTML skills. Of course, you can switch back and forth between the Visual editor and the Code editor.<\/p>\n Add a new post, write something in the Gutenberg Visual editor, make something bold (strong) and then take a peek at the Code editor to see the HTML. Keep the post as a draft and try to make some changes in the Code editor. Have some fun with it!<\/p>\n In your Code editor, you\u2019ll likely see <h1><\/strong> tags, <a><\/strong> tags, <img><\/strong> tags and <strong><\/strong> tags.<\/p>\n Basically, the Code editor shows you the HTML markup. The Visual editor does its best to interpret that HTML markup and present it to you similar to the way it will look in a web browser. By switching to the Code editor, you can add your own custom styling<\/strong> to your content. <\/p>\n <\/p>\n There are 3 Types of CSS Styles:<\/strong><\/p>\n You are adding inline CSS to your post\/page when you add a \u201ccolor\u201d<\/strong> to an element in your VISUAL editor. It\u2019s taking place “under the hood.”<\/strong><\/p>\n <h2 style=”color:red;”><\/strong>Header Example<\/h2><\/strong><\/p>\n<\/div>\n TIP: Look for the \u201cstyle=\u201d<\/span><\/strong> as a sign you\u2019re looking at inline CSS.<\/p>\n Remember that inline CSS is applied locally to an element. The style above is only applied to one h2 element and makes it \u201cred.\u201d<\/strong> It is best used is for a specific post\/page you\u2019re working on. <\/p>\n NOTE: Every WordPress website includes at least one theme. Every theme includes at least one external style sheet.<\/p>\n The main external style sheet<\/a> in your WordPress theme is probably called style.css.<\/strong><\/p>\n Before you can make changes, you need to be able to read a style sheet and understand the syntax first. Once you find your theme’s main style sheet and can make sense of it, you can add your own styles, but there’s a catch. Instead of making changes to that specific style sheet, you’re better off creating a child theme<\/u><\/a> with its own main style sheet. You’ll call it style.css<\/strong>. (same name as the style sheet in the main (parent) theme that you were studying.<\/p>\n You will then add custom CSS to it, which will override the styles in your parent theme. You will not only need to understand a bit of CSS, you will also need to know the basics of file structure and how to find, recognize and create CSS files.<\/p>\n For now, let\u2019s learn a bit about CSS, so we can recognize it when we see it.<\/p>\n That\u2019s the first step.<\/strong> Recognize it.<\/p>\n Then be able to read it. Practice. Then write your own CSS.<\/p>\n CSS (Cascading Style Sheets) is a style sheet language used to define visual appearance of HTML documents. It dictates your website\u2019s look and feel and will hopefully make it beautiful – with your help.<\/p>\n To learn more about the differences between Inline, Embedded and External Stylesheets, read: 3 Types of CSS Styles: Inline, Embedded, and External Stylesheets. <\/a><\/p>\n The example above is called a CSS rule-set. It starts with a selector (h1) followed by a declaration block. <\/p>\n TIP:<\/strong> Look for the curly braces as a sign you may be looking at CSS in a style sheet.<\/p>\n Child themes inherit CSS styles<\/strong> of the original theme (parent theme). You can add your own styles. Thankfully, if you make a mistake in your child theme, you can deactivate it and revert back to your parent theme while you fix your mistake. You can then reactivate your child theme. It’s a nice safety net!<\/p>\n Remember:<\/strong> Don\u2019t edit the stylesheet in a (parent) theme. You will have no safety net. Also, if it is updated, your changes will be lost.<\/p>\n By learning to write CSS, you can move beyond customizing the posts and pages on your website to modifying your chosen WordPress theme. Your website will become more uniquely yours and it just might give you enough confidence to go deeper under the hood to explore PHP<\/a> and JavaScript.<\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" Do you need to know HTML and CSS to use WordPress? No. But the more you know, the better off you’ll be at managing your WordPress website (self-hosted version). We won’t dig too deep, just enough to get a little dirty.<\/p>\n","protected":false},"author":1,"featured_media":7548,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,10],"tags":[285,286,279,284],"class_list":{"0":"post-4299","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-and-css","8":"category-wordpress","9":"tag-html-elements","10":"tag-html-tags","11":"tag-wordpress-beginner","12":"tag-wordpress-child-theme","13":"cat-5-id","14":"cat-10-id","15":"has_thumb"},"_links":{"self":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/4299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=4299"}],"version-history":[{"count":5,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/4299\/revisions"}],"predecessor-version":[{"id":7733,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/4299\/revisions\/7733"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/media\/7548"}],"wp:attachment":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=4299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=4299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=4299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"white](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2017\/10\/white-screen-of-death-wordpress.gif\")
As you probably already know, WordPress has an admin side (dashboard) for creating and editing content, and a front end that your site visitors see.<\/p>\nWhat is HTML?<\/h2>\n
![\"HTML](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2017\/09\/html-css-frame.gif\")
<\/p>\nHow to View HTML in WordPress<\/h3>\n
\n
How to recognize HTML (syntax)<\/h3>\n
\n
\n
![\"HTML](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2017\/10\/html-on-computer.jpg\")
<\/p>\nTo learn the nitty-gritty details of HTML, read: Smooth Strides from HTML to HTML5<\/a>.<\/h4>\n
Web Browsers and HTML<\/h3>\n
Go ahead and practice.<\/h3>\n
CODE\/ VISUAL Editors in a Nutshell<\/h3>\n
You\u2019re off to a great start now. Let\u2019s move on to CSS.<\/h4>\n
\n
PART 2: CSS in WordPress<\/h2>\n
Why should I learn CSS when I have Gutenberg?<\/h3>\n
\n
\n
Inline CSS<\/h3>\n
How to Recognize Inline CSS<\/h4>\n
External Style Sheets<\/h3>\n
![\"WordPress](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2017\/10\/wordpress-icon.png\"){kind=icon}
<\/p>\nWhat is CSS?<\/h2>\n
\n
![\"cascading](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2017\/10\/cascading-style-sheets.jpg\")
<\/p>\nRecognizing CSS (Syntax) in an External Style Sheet<\/em><\/h3>\n
\n
<\/strong>(This heading will be white and center-aligned.)<\/li>\n<\/ul>\n\u201cCurly braces\u201d<\/strong> surround declaration blocks. They are important!<\/h4>\n
![\"css](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2017\/10\/css-on-computer.jpg\")
<\/p>\nLearn the nitty gritty details about CSS: Smooth Strides from CSS to CSS3<\/a><\/h4>\n
A Closer Look at Child Themes<\/h3>\n
![\"WordPress](\"https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2017\/10\/wordpress-child-theme.gif\")
<\/p>\n\n
![\"CSS](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2017\/10\/css-in-wordpress.gif\")
<\/p>\n\n\n