Lecture-7.pptx
Download as PPTX, PDF0 likes22 views
The document discusses CSS fonts and debugging HTML and CSS. It provides information on: 1) The five generic font families in CSS and how to specify font stacks using the font-family property. 2) Common issues that can cause errors in HTML like unclosed elements and attributes. 3) How browsers have developer tools to inspect pages and common causes of CSS bugs like overflow, inheritance, and changes to the DOM.
Lecture-7.pptx
- 1. CSS
- 2. CSS Fonts Choosing the right font has a huge impact on how the readers experience a website. The right font can create a strong identity for your brand. Using a font that is easy to read is important. The font adds value to your text. It is also important to choose the correct color and text size for the font.
- 3. Generic Font Families In CSS there are five generic font families: 1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance. 2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look. 3. Monospace fonts - here all the letters have the same fixed width. They create a mechanical look. 4. Cursive fonts imitate human handwriting. 5. Fantasy fonts are decorative/playful fonts. All the different font names belong to one of the generic font families.
- 4. The CSS font-family Property The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. Start with the font you want, and end with a generic family (to let the browser pick a similar font in the generic family, if no other fonts are available). The font names should be separated with comma If the font name is more than one word, it must be in quotation marks, like: "Times New Roman".
- 5. .p1 { font-family: "Times New Roman", Times, serif; } .p2 { font-family: Arial, Helvetica, sans-serif; } .p3 { font-family: "Lucida Console", "Courier New", monospace; }
- 6. <div> tag The <div> tag defines a division or a section in an HTML document. The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript. The <div> tag is easily styled by using the class or id attribute. Any sort of content can be put inside the <div> tag!
- 7. <!DOCTYPE html> <html> <head> <style> div { border: 1px solid gray; padding: 8px; } h1 { text-align: center; text-transform: uppercase; color: #4CAF50; } p { text-indent: 50px; text-align: justify; letter-spacing: 3px; } </style> </head> <body> <div> <h1>text formatting</h1> <p>This text is styled with some of the text formatting properties. The heading uses the text- align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored </p> </div> </body> </html>
- 8. What are browser developer tools? Every modern web browser includes a powerful suite of developer tools. These tools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load.
- 10. The HTML DOM (Document Object Model) When a web page is loaded, the browser creates a Document Object Model of the page. The HTML DOM model is constructed as a tree of Objects:
- 11. What is the DOM? DOM defines a standard for accessing documents: "The Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." The DOM standard is separated into 3 different parts: Core DOM - standard model for all document types XML DOM - standard model for XML documents HTML DOM - standard model for HTML documents
- 12. HTML DOM HTML DOM is a standard object model and programming interface for HTML. It defines: The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
- 13. HTML and debugging HTML is not as complicated to understand as Rust. HTML is not compiled into a different form before the browser parses it and shows the result (it is interpreted, not compiled). And HTML's element syntax is arguably a lot easier to understand than a "real programming language" like Rust, JavaScript, or Python.
- 14. Permissive code generally when you do something wrong in code, there are two main types of error that you'll come across: Syntax errors: These are spelling or punctuation errors in your code that actually cause the program not to run, like the Rust error shown above. These are usually easy to fix as long as you are familiar with the language's syntax and know what the error messages mean. Logic errors: These are errors where the syntax is actually correct, but the code is not what you intended it to be, meaning that the program runs incorrectly. These are often harder to fix than syntax errors, as there isn't an error message to direct you to the source of the error. HTML itself doesn't suffer from syntax errors because browsers parse it permissively, meaning that the page still displays even if there are syntax errors. Browsers have built-in rules to state how to interpret incorrectly written markup, so you'll get something running, even if it is not what you expected. This, of course, can still be a problem! Note: HTML is parsed permissively because when the web was first created, it was decided that allowing people to get their content published was more important than making sure the syntax was absolutely correct. The web would probably not be as popular as it is today, if it had been more strict from the very
- 16. <h1>HTML debugging examples</h1> <p>What causes errors in HTML? <ul> <li>Unclosed elements: If an element is <strong>not closed properly, then its effect can spread to areas you didn't intend <li>Badly nested elements: Nesting elements properly is also very important for code behaving correctly. <strong>strong <em>strong emphasized?</strong> what is this?</em> <li>Unclosed attributes: Another common source of HTML problems. Let's look at an example: <a href="https://www.mozilla.org/>link to Mozilla homepage</a> </ul>
- 17. The paragraph and list item elements have no closing tags. Looking at the image above, this doesn't seem to have affected the markup rendering too badly, as it is easy to infer where one element should end and another should begin. The first <strong> element has no closing tag. This is a bit more problematic, as it isn't easy to tell where the element is supposed to end. In fact, the whole of the rest of the text has been strongly emphasized. This section is badly nested: <strong>strong <em>strong emphasized?</strong> what is this?</em>. It is not easy to tell how this has been interpreted because of the previous problem. The href attribute value is missing a closing double quote. This seems to have caused the biggest problem — the link has not rendered at all.
- 18. CSS Debugging Debugging in CSS means figuring out what might be the problem when you have unexpected layout results. Common Causes Of CSS Bugs CSS layout issues often fall out of one of the following categories: Overflow of content from its parent resulting in extra or unexpected scrollbars and content being pushed out of the regular viewport area. Inheriting browser inconsistencies leading to mixed results across browsers and devices. Unexpected inheritance from the cascade where multiple styles override one another, which may cause alignment and spacing issues, among other things. CSS resiliency failures from DOM changes, including when child elements have gained wrapping divs or additional elements are unexpectedly added.
- 19. Debugging Overflow Overflow is usually one of the most apparent issues and can be pretty frustrating. It’s not always evident at a glance which element is causing overflow, and it can be tedious to try to comb through elements using dev tools inspectors. A tried and true method to begin figuring out which element is responsible for overflow is to add the following CSS: * { outline: 1px solid red; } Why outline instead of border? Because it will not add to the element’s computed DOM size. Adding borders will change element appearances if they’re already using a border and may falsely cause additional overflow issues.
- 20. The intent of using outline is to reveal element boundaries and visualize how elements are nested. For example, if overflow is causing unexpected scrollbars, an outline can help point out which element is pushing out of the viewport. In addition to this manual method, Firefox reveals scrolling elements and specify which elements have children causing overflow, as seen in this
- 21. COMMON CAUSES OF OVERFLOW # Typically when we’re concerned about overflow problems, it’s from a mismatch of width allowances between a parent element and its children. One of the first things to check is if an element has set an absolute width without a responsive method to allow it to fully resize downwards. For example, a 600px box will trigger overflow on viewports narrower than 600px. Instead, you may be able to adjust to add in a max-width: 100% so that the element will also responsively resize: .wide-element { width: 600px; max-width: 100%; }
- 22. we can account for that margin by using the CSS math function calc to subtract the total area used by the horizontal margins: p:first-of-type { width: 800px; max-width: calc(100% - 6rem); margin: 3rem; }