{"id":305930,"date":"2020-03-31T07:27:43","date_gmt":"2020-03-31T14:27:43","guid":{"rendered":"https:\/\/css-tricks.com\/?post_type=chapters&p=305930"},"modified":"2020-05-20T10:18:51","modified_gmt":"2020-05-20T17:18:51","slug":"editable-style-blocks","status":"publish","type":"chapters","link":"https:\/\/css-tricks.com\/books\/greatest-css-tricks\/editable-style-blocks\/","title":{"rendered":"Editable Style Blocks"},"content":{"rendered":"\n
When you see some HTML like:<\/p>\n\n\n\n
<p>I'm going to display this text.<\/p><\/code><\/pre>\n\n\n\nThat’s pretty intuitive. Like, the browser is going to display that paragraph element of text.<\/p>\n\n\n\n
But that paragraph exists in a larger HTML document, like:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>My Website<\/title>\n<\/head>\n<body>\n <p>I'm going to display this text.<\/p>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nWhy doesn’t “My Website” also display like the paragraph does? What’s so different about <title><\/code> and <p><\/code>. Well, that’s the nature of any code. Different things do different things. But in this case, we can trace why it doesn’t display<\/em> pretty easily. <\/p>\n\n\n\nIf we open this HTML document in a browser an inspect that <title><\/code> element, it will show us that the User Agent Stylesheet sets that element to display: none;<\/code> Well that makes sense! That’s exactly what we use when we want to hide things entirely from sites. <\/p>\n\n\n\n