{"id":5640,"date":"2025-07-08T11:21:37","date_gmt":"2025-07-08T15:21:37","guid":{"rendered":"https:\/\/opentextbooks.concordia.ca\/pressbooksuserguide\/?post_type=chapter&p=5640"},"modified":"2025-12-13T15:00:21","modified_gmt":"2025-12-13T20:00:21","slug":"html-and-css-basics","status":"publish","type":"chapter","link":"https:\/\/opentextbooks.concordia.ca\/pressbooksuserguide\/chapter\/html-and-css-basics\/","title":{"raw":"HTML and CSS Basics","rendered":"HTML and CSS Basics"},"content":{"raw":"
\r\n

Basics of HTML and CSS in<\/h2>\r\n
\r\n

Pressbooks<\/h2>\r\n<\/div>\r\nHTML structures web content, while CSS styles it. Together, they control how your textbook looks and feels.\r\n\r\n<\/div>\r\nPressbooks uses both HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) behind the scenes. Understanding how markup language and style sheets function together will help you grasp foundational web design parameters and accessibility principles. The following basics may be of interest to those working with preset themes, but they are essential for anyone attempting to customize their book.\r\n
\r\nBasics of<\/span>\r\n
HTML\r\n(HyperText Markup Language)<\/span><\/a>\r\nCSS\r\n(Cascading Style Sheets)<\/span><\/a><\/div>\r\n<\/div>\r\n

<\/a>HTML (HyperText Markup Language)<\/h2>\r\nHTML is the language used to structure content on the web. It consists of elements (or \"tags\") that define different parts of your content, such as headings, paragraphs, lists, and links.\r\n\r\nFor example:\r\n
\r\n
  HTML:\r\n<\/pre>\r\n
<h1> This is a Heading<\/span> <\/h1>\r\n<p> This is a paragraph of text.<\/span> <\/p>\r\n  \r\n<ul>\r\n  <li> First item<\/span> <\/li>\r\n  <li> Second item<\/span> <\/li>\r\n<\/ul>\r\n<\/pre>\r\n<\/div>\r\n
HTML Key Elements to Know<\/h3>\r\nHeadings:<\/strong> Structure your text into hierarchical levels (e.g. <h1><\/span>, <h2><\/span>).\r\n\r\nParagraphs:<\/strong> Use <p><\/span> for blocks of text.\r\n\r\nLists:<\/strong> Organize items using ordered <ol><\/span> or unordered <ul><\/span> lists.\r\n\r\nLinks:<\/strong> Create hyperlinks with the <a><\/span> tag (e.g. <a href<\/span>=\"https:\/\/link.com\"<\/span>> Link <\/span><\/a><\/span>).\r\n\r\nImages:<\/strong> Add visuals with the <img><\/span> tag (e.g. <img src<\/span>=\"image.jpg\"<\/span> alt<\/span>=\"Description\"<\/span>><\/span>).\r\n
HTML Exercise<\/h3>\r\nTry to understand the HTML content in your Pressbooks project by clicking on the Text (HTML) tab in the Edit Part\/Chapter page. Take great caution when trying to change any of the HTML tags.\r\n\r\n
\r\n\r\n
<\/a>CSS (Cascading Style Sheets)<\/h2>\r\nCSS is the language used to style HTML content. It defines how elements look\u2014their colours, fonts, sizes, and layout. In Pressbooks, CSS customizations let you modify the visual appearance of your book.\r\n
How CSS Works<\/h3>\r\nCSS uses \"selectors\" to target HTML elements and apply \"rules\" that style them.\r\n\r\nFor example:\r\n
\r\n
  CSS:\r\n<\/pre>\r\n
h1<\/span> {\r\n  colour: blue<\/span>;\r\n  font-size: 24px<\/span>;\r\n}\r\n\r\np<\/span> {\r\n  line-height: 1.5<\/span>;\r\n} <\/span>\r\n<\/pre>\r\n<\/div>\r\nThis code styles all <h1><\/span> elements to be blue and have a font size of 24 pixels. It also increases the line spacing for <p><\/span> elements.\r\n
CSS Key Concepts<\/h3>\r\nSelectors:<\/strong> Target specific elements (e.g., h1<\/span>, p<\/span>, .class<\/span>, #id<\/span>).\r\n\r\nProperties and Values:<\/strong> Define the styles (e.g., colour: red<\/span>;<\/span>, margin: 10px<\/span>;<\/span>).\r\n\r\nClasses and IDs:<\/strong> Use .class<\/span> and #id<\/span> to apply styles to specific elements.\r\n
Common CSS Properties<\/h3>\r\nText:<\/strong> colour<\/span>, font-size<\/span>, font-family<\/span>\r\n\r\nSpacing:<\/strong> margin<\/span>, padding<\/span>, line-height<\/span>\r\n\r\nBorders:<\/strong> border<\/span>, border-radius<\/span>\r\n\r\nLayout:<\/strong> display<\/span>, flex<\/span>, grid<\/span>\r\n
CSS Exercise<\/h3>\r\nNavigate to Appearance >> Custom Styles in your Pressbooks dashboard. Try adding a simple CSS rule in the \"Your Styles\" section, such as changing the font size of headings:\r\n
\r\n
  CSS:\r\n<\/pre>\r\n
h1<\/span> {\r\n  font-size: 30px<\/span>;\r\n}<\/span>\r\n<\/pre>\r\n<\/div>\r\nNote:\u00a0<\/strong>These two lines of code will change the font size of all h1<\/span> elements in your textbook. Explore <div><\/span> and .class<\/span> if you want to learn how to apply these changes to selected parts.\r\n\r\n
\r\n\r\n
\r\n
Additional Resources<\/h2>\r\n<\/header>\r\n
\r\n