Scribd
Upload
20 views22 pages

Lecture 7

Uploaded by

Siddharth Chauhan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
20 views22 pages

Lecture 7

Uploaded by

Siddharth Chauhan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

CSS

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> <body>
<head>
<style> <div>
div { <h1>text formatting</h1>
border: 1px solid gray; <p>This text is styled with some of the text
padding: 8px; formatting properties. The heading uses the text-
} align, text-transform, and color properties.
h1 { The paragraph is indented, aligned, and the space
text-align: center; between characters is specified. The underline is
text-transform: uppercase; removed from this colored
color: #4CAF50; </p>
} </div>
p{
text-indent: 50px; </body>
text-align: justify; </html>
letter-spacing: 3px;
}
</style>
</head>
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 beginning.
 <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 screenshot.
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 .wide-element
also responsively
{ resize:
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;
}

You might also like