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 [Link] file and link to that from [Link]
<link rel=”stylesheet” href=”/css/[Link]”>
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="[Link]
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.
