Scribd
Upload
9 views

2,3,4,5 HTML and CSS

The document discusses various topics related to HTML and CSS including: - Sections on introductory and intermediate HTML and CSS - Different ways to style elements with CSS such as inline, internal, and external stylesheets - CSS selectors like classes and IDs - Common CSS properties like display, position, font-family, and float - Best practices for typography on the web like using Google Fonts and relative font sizing with rem units - How elements are positioned and flow on a page by default in HTML and how CSS can alter that behavior

Uploaded by

Andres R. Bucheli
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

2,3,4,5 HTML and CSS

The document discusses various topics related to HTML and CSS including: - Sections on introductory and intermediate HTML and CSS - Different ways to style elements with CSS such as inline, internal, and external stylesheets - CSS selectors like classes and IDs - Common CSS properties like display, position, font-family, and float - Best practices for typography on the web like using Google Fonts and relative font sizing with rem units - How elements are positioned and flow on a page by default in HTML and how CSS can alter that behavior

Uploaded by

Andres R. Bucheli
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

SECTION 2: INTRODUCTION TO HTML

<center>
</center>

<hr size="3" noshade>

SECTION 3: INTERMEDIATE HTML

<table cellspacing="10">
<tr>
<td>iOS Development</td>
<td>⭐⭐⭐⭐⭐</td>
</tr>
<tr>
<td>Web Development</td>
<td>⭐⭐⭐⭐⭐</td>
</tr>
<tr>
<td>Photography</td>
<td>⭐⭐</td>
</tr>
</table>

SECTION 4: INTRODUCTION TO CSS

INLINE:

<body style=”background-color: blue;”>

INTERNAL:
<style>
body {
background-color: blue;
}
</style>
EXTERNAL:
Create a styles.css file and link to that from index.html

<link rel=”stylesheet” href=”/css/master.css”>

ANATOMY:
selector { property : value; }

SELECTORS:
class: When you need to style a group of related
elements.
id: Use when an element is only a single one.

And id needs to be unit.


class can be used for many elements.

An element can have more than one class, but only ond ID.

Pseudoclass:
Pseudoclasses start with :

:hover → It’s very widely used.

SECTION 5: INTERMEDIATE CSS

FAVICONS:

Icons for websites.

<div> → Don’t do anything unless you use css with it.

A div is a content division element.

Remember always that the browser introduces a default


margin.
When you set a property to 0, you don’t need to especify
the units. For example:

h1 {
margin-top: 0;
}

Website styling is based in a box model.


Padding: Space of an element inside a box.
Margin: Space of the box in relation with other elements.

Display: Block, Inline, Inline-Block, None.

By default some elements are block displayed. These


elements take the whole widht of the screen.

Common Block Elements:


Paragraphs (<p>)
Headers (<h1> through <h6>)
Divisions (<div>)
Lists and list elements (<ol>, <ul>, and <li>)
Forms (<form>)

These types of elements block other elements for occuring


in the same line.

Other elements like for example <span> are only as wide


as it needs to be.

Common Inline Elements:


Spans (<span>)
Images (<img>)
Anchors (<a>)

With inline elements is impossible to change the width.


Nevertheless is possible to display block elements like
inline elements with the display property:

Ex:
p {
display: inline;
}

It’s possible to present inline elements like block


elements with display: block, but that won’t allow them to
be in the same line (for example in the case of span
elements)
span {
display: block;
}
If I want an element that occuppies the same line but at
the same time I can set the width, I need to use another
property: display: inline-block;

This is kinda images work. We can treat images as if they


are inline-block elements.

Example:

p {
display: inline-block;
}

The last one is display: none → This gets rid of the


element. It removes the element from the website.

Other way to hide elements is for example:

span {
visibility: hidden;
}

This is going an element disappear, but it keeps the


original position an all other elements still keep their
positions in relation to the hidden element.

Even without CSS, there are some positioning by default.


There are some rules:

1. Content is everything.
The content determines the width and height of the boxes.

2. Order comes from code.


The rendering comes from the order of the code.
<h1> </h1>
<p></p>
<p></p>
<img>

3. Children sit on parents.


<div>
<h1> a progammer</h1>
</div>

The children are shown on the front.

Position:
Static
Relative
Absolute
Fixed

Static: By default, go along with the html rules and keep


to the default html flow.
Relative: Allow us to position the element that we select,
relative to how it would have been positioned had it been
static.

Coordinates: Top, bottom, left, right.

Absolute: We position the element relative to its parent.


Ex:

div {
position: relative
}

img {
position: absolute
right: 30px;
}

This is a right margin of 30 px between the image and the


div that is the parent.

Fixed: The element stays exactly where it is located


without moving. Used for example with nav bars.

text-align: Used to center elements. This property has to


be set inside the parent container. This will center
everything inside, that doesn’t have a width set.

margin: With auto, can be used too, to center an element.


Used when there is a width set.

font-family: Has five main groups: cursive, fantasy


inherit, monospace, sans-serif, serif.

• sans-serif: without decoration.


• serif: with decoration.
• monospace: all leters take the same amount of space.
• cursive: DON’T USE THIS.
• fantasy: DON’T USE THIS.

For most browsert the default serif is times and the


default sans-serif is arial.

The next example especifies a specific type of sans-serif.

font-family: verdana, sans-serif;

If the browser doesn’t find verdana, it sets the text to


the default sans-serif.

WEB SAFE FONTS:


Fonts that most of the operating systems will be able to
render correctly.

But no font is totally web safe, so we need fallbacks.

We can go to → css font stack and copy a set of fallbacks.

Example:

font-family: "Helvetica Neue", Helvetica, Arial, sans-


serif;

If I want that everybody see my design exactly as I designed


it:

In this case, we need to use font embeding. This allows


to program the font isnted of presuming that people’s
browser already have it.

Use GOOGLE FONTS: Select the fonts that you like and copy
the link in the html file.
Ex:
<link
href="https://fonts.googleapis.com/css2?family=Merriwea
ther&family=Montserrat&family=Sacramento&display=swap"
rel="stylesheet">

Then in the css file, you just use:


1. font-family: 'Sacramento', cursive;

font-size: Remember to don’t use always pixels and use


percentages and em if you want a dynamic font-size.

em → width of the capital letter M.

1 em = 16px = 100%
90px = 5.625em

Units in em and % are inheritated from the container. →


To avoid this in CSS3 there is something called the rem →
The root em (Ignores all the parent settings).

It’s highly recommended to use always rem.

float: left; Allows to align elements to the left for


example (or to the right) and to wrap a paragraph around
the element.

Only use float when really necessary and for what is meant.
Don’t use it for positioning. Only use this for wrapping
text.

clear: left; This property and value deletes the previous


float property from the element in which it is applied.

You might also like