Lecture-7.pptx

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.

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.

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".

.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New",
monospace;
}

<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!

<!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>

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.

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:

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

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.

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.

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

 <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>

 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.

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.

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.

 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

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%;
}

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;
}

Lecture-7.pptx

Recommended

More Related Content

Similar to Lecture-7.pptx (20)

More from vishal choudhary (20)

Recently uploaded (20)

Lecture-7.pptx