CSS

Add link element in head block of html file to link to CSS

<link href=’CSS path’ rel=’stylesheet’>

Format of css code:

(Element OR .class OR #id OR element.class OR [attribute] OR
[attribute*=value] OR element\class\id descending element)
[all of the above is termed as SELECTOR]

{
Rules for styling e.g.,
 font-size:<size of font>px;
 color: <fontcolor as word or hex>;
 font-family <fontname>;
 font-weight <bold,normal,thin etc.>;
 list-style: <shape of bullet points>;
}
 * is universal selector (selects every element)
To customise behavior during specific user action AKA pseudo-class i.e. active,
hover, inactive, focus, visited etc.
<element name>:<action> {
Rulesets
}
to apply multiple selectors together, do this:
selector1,selector2,…
{
Rulesets
}

Color,background-color to style color of elements or their backgrounds,

respectively
Opacity to control opacity of element (uses values from 0-1), affects both
background and foreground
Backgrounds can also be set as images using background-image: url(“<url of
image>”)

 !important when placed after a ruleset for an element (before ‘;’),

overrides all other rulesets for that element

BOX MODEL

Everything displayed on the webpage occupies space in a BOX

The following functions are used to manipulate how elements are
displayed in the box:

 width

 height

 padding

 border
  margin

 overflow

For border, we can use 3 values separated by space i.e.

border: <size> style color
default values are medium none color
color is current color of element
border-radius can change the roundess of the border corners, to make
a fully circular border, create an element with same width and height
then set border-radius as 50%
padding modifies padding, more specific modifiers are:
 padding-top
 padding-bottom
 padCng-left
 padding-right
Another way to do this is by writing 4,3 or 2 padding values in a
single line, in clockwise rotation i.e. top,left,bottom,right (4 values)
top,left,bottom (3 values) top and bottom, left and right (2 values)
Same applies for margin, which is like restraining order of elements
(other elements cannot come within <marginsize> pixels)

To center an element using margin, the following code is used:

margin 0 auto;

When 2 elements are side by side, their horizontal margins are added
but when one is above the other, the spacing is determined by the
larger margin value of the two.
To account for differing display conditions, we can set
min-width/height and max-width/height.

 overflow is used to deal with situations when an element’s box

occupies more area than what is contained by its parent element

o hidden—when set to this value, any content that overflows will be

hidden from view.
o scroll—when set to this value, a scrollbar will be added to the
element’s box so that the rest of the content can be viewed by
scrolling.

o visible—when set to this value, the overflow content will be

displayed outside of the containing element. Note, this is the
default value.

Often, the first rule in a css file is using the ‘*’ selector to set all
margins and padding to 0 (no need to write units when using 0)
visibility is used to hide elements from view, it can take 1 of 3 values:

 visible

 hidden

 collapse

Hidden elements will not show on the browser, but will be shown in
the source code and the space reserved for them will be visible.

 BOX MODEL has a limitation: changing padding, margin,

border size etc. changes the dimensions of the box, making it
difficult to position and manage.

 This is fixed by setting box-sizing: border-box;

In this model, the overall size of the box remains fixed, properties
such as padding, border are included within this size.
FLOW OF ELEMENTS IN HTML
By default, the order in which elements appear on an HTML page is
decided by the order in which they appear in the HTML document.

Position

Block-level elements like these boxes create a block the full width of their parent elements,
and they prevent other elements from appearing in the same horizontal space.

Notice the block-level elements in the image above take up their own line of space and
therefore don’t overlap each other.

The default position of an element can be changed by setting its position property.
The position property can take one of five values:

 static - the default value (it does not need to be specified)

 relative
 absolute
 fixed
 sticky
Position: Relative
One way to modify the default position of an element is by setting
its position property to relative.

This value allows you to position an element relative to its default static
position on the web page.

.green-box {
background-color: green;
position: relative;
}
Although the code in the example above instructs the browser to expect a
relative positioning of the .green-box element, it does not specify where
the .green-box element should be positioned on the page. This is done by
accompanying the position declaration with one or more of the
following offset properties that will move the element away from its default
static position:

 top - moves the element down from the top.

 bottom - moves the element up from the bottom.
 left - moves the element away from the left side (to the right).
 right - moves the element away from the right side (to the left).

You can specify values in pixels, ems(1 em=1 font size and so on), or
percentages, among others, to dial in exactly how far you need the element
to move. It’s also important to note that offset properties will not work if
the element’s position property is the default static.

.green-box {
background-color: green;
position: relative;
top: 50px;
left: 120px;
}
In the example above, the element of green-box class will be moved down 50
pixels, and to the right 120 pixels, from its default static position. The image
below displays the new position of the box.
Offsetting the relative element will not affect the positioning of other
elements.

Position: Absolute
Another way of modifying the position of an element is by setting its
position to absolute.
When an element’s position is set to absolute, all other elements on the page
will ignore the element and act like it is not present on the page. The
element will be positioned relative to its closest positioned parent element,
while offset properties can be used to determine the final position from
there. Take a look at the image below:

The “This website is in progress. Please come back later!” text is displaced
from its static position at the top left corner of its parent container. It has
offset property declarations of top: 300px; and right: 0px;, positioning it 300
pixels down, and 0 pixels from the right side of the page.

When an element’s position is set to absolute, as in the last exercise, the element
will scroll with the rest of the document when a user scrolls.
We can fix an element to a specific position on the page (regardless of user
scrolling) by setting its position to fixed, and accompanying it with the familiar
offset properties top, bottom, left, and right.

.title {
position: fixed;
top: 0px;
left: 0px;
}
In the example above, the .title element will remain fixed to its position no
matter where the user scrolls on the page, like in the image below:

This technique is often used for navigation bars on a web page.

Position: Sticky
Since static and relative positioned elements stay in the normal flow of the
document, when a user scrolls the page (or parent element) these elements
will scroll too. And since fixed and absolute positioned elements are removed
from the document flow, when a user scrolls, these elements will stay at
their specified offset position.

The sticky value is another position value that keeps an element in the
document flow as the user scrolls, but sticks to a specified position as the
page is scrolled further. This is done by using the sticky value along with the
familiar offset properties, as well as one new one.

.box-bottom {
background-color: darkgreen;
position: sticky;
top: 240px;
}
In the example above, the .box-bottom <div> will remain in its relative position,
and scroll as usual. When it reaches 240 pixels from the top, it will stick to
that position until it reaches the bottom of its parent container where it will
“unstick” and rejoin the flow of the document.

Z-Index
When boxes on a web page have a combination of different positions, the
boxes (and therefore, their content) can overlap with each other, making
the content difficult to read or consume.

.blue-box {
background-color: blue;
}

.green-box {
background-color: green;
position: relative;
top: -170px;
left: 170px;
}
In the example above, the .green-box element overlaps on top of the .blue-
box element.

The z-index property controls how far back or how far forward an element
should appear on the web page when elements overlap. This can be
thought of as the depth of elements, with deeper elements appearing
behind shallower elements.

The z-index property accepts integer values. Depending on their values, the
integers instruct the browser on the order in which elements should be
layered on the web page.

.blue-box {
background-color: blue;
position: relative;
z-index: 1;
}

.green-box {
background-color: green;
position: relative;
top: -170px;
left: 170px;
}
In the example above, we set the .blue-box position to relative and the z-index
to 1. We changed position to relative, because the z-index property
does not work on static elements. The z-index of 1 moves the .blue-
box element forward, because the z-index value has not been explicitly
specified for the .green-box element, which means it has a default z-index value
of 0. Take a look at the example image below:

DISPLAY
 Some elements are such that their block occupies the whole horizontal
width of the page, so separate elements are often separated by lines, by
setting display: inline, we can restrict the size of the box of an element to
just be enough to accommodate the content, height and width cannot be
set in CSS after doing this. This is the default display for some elements
e.g. <strong> <em> <a>

 Block elements are those which occupy the full width of the page by
default, but their width and height can be modified. E.g., all <h1-6>, <p>,
<div>, <footer>.
  Inline-block elements behave just like the name implies.

E.g., images

 Float is used to move elements as far right or as far left as possible. It is

commonly used to wrap text around an image. Their width must be
specified, as the default value is the width of the entire page so changing
float without specifying width will yield no changes.

Float can be used to float multiple elements at once, but when floated elements
have different heights, they can ‘bump’ into each other and not allow other
elements to move properly to the left or right. Clear is used to set what happens
in this scenario It can take on one of the following values:

 left—theleft side of the element will not touch any other element within
the same containing element.

 right—the right side of the element will not touch any other element
within the same containing element.

 both—neitherside of the element will touch any other element within the
same containing element.

 none—the element can touch either side.

  COLORS in CSS can be set by :

color, background-color and can take

rgb,hsl(hue,saturation,lightness),keyword or hex
values. Rgb colors are set by rgb(r,g,b).

Hue, Saturation, and Lightness

The RGB color scheme is convenient because it’s very close to how
computers represent colors internally. There’s another equally powerful
system in CSS called the hue-saturation-lightness color scheme,
abbreviated as HSL.

The syntax for HSL is similar to the decimal form of RGB, though it differs in
important ways. The first number represents the degree of the hue, and can
be between 0 and 360. The second and third numbers are percentages
representing saturation and lightness respectively. Here is an example:

color: hsl(120, 60%, 70%);

Hue is the first number. It refers to an angle on a color wheel. Red is 0
degrees, Green is 120 degrees, Blue is 240 degrees, and then back to Red at
360. You can see an example of a color wheel below.

Saturation refers to the intensity or purity of the color. The saturation

increases towards 100% as the color becomes richer. The saturation
decreases towards 0% as the color becomes grayer.

Lightness refers to how light or dark the color is. Halfway, or 50%, is normal
lightness. Imagine a sliding dimmer on a light switch that starts halfway.
Sliding the dimmer up towards 100% makes the color lighter, closer to
white. Sliding the dimmer down towards 0% makes the color darker, closer
to black.
HSL is convenient for adjusting colors. In RGB, making the color a little
darker may affect all three color components. In HSL, that’s as easy as
changing the lightness value. HSL is also useful for making a set of colors
that work well together by selecting various colors that have the same
lightness and saturation but different hues.

Opacity and Alpha

All of the colors we’ve seen so far have been opaque, or non-transparent.
When we overlap two opaque elements, nothing from the bottom element
shows through the top element. In this exercise, we’ll change the opacity, or
the amount of transparency, of some colors so that some or all of the
bottom elements are visible through a covering element.

To use opacity in the HSL color scheme, use hsla instead of hsl, and four
values instead of three. For example:

color: hsla(34, 100%, 50%, 0.1);

The first three values work the same as hsl. The fourth value (which we have
not seen before) is the alpha. This last value is sometimes called opacity.

Alpha is a decimal number from zero to one. If alpha is zero, the color will
be completely transparent. If alpha is one, the color will be opaque. The
value for half-transparent would be 0.5.

You can think of the alpha value as, “the amount of the background to mix
with the foreground”. When a color’s alpha is below one, any color behind
it will be blended in. The blending happens for each pixel; no blurring
occurs.

The RGB color scheme has a similar syntax for opacity, rgba. Again, the first
three values work the same as rgb and the last value is the alpha. Here’s an
example:

color: rgba(234, 45, 98, 0.33);

A little unconventional, but still worth mentioning is how hex colors can
also have an alpha value. By adding a two-digit hexadecimal value to the
end of the six-digit representation (#52BC8280), or a one-digit hexadecimal
value to the end of the three-digit representation (#F003), you can change
the opacity of a hexadecimal color. Hex opacity ranges from 00 (transparent)
to FF (opaque).

Alpha can only be used with HSL, RGB, and hex colors; we cannot add the
alpha value to name colors like green.

There is, however, a named color keyword for zero opacity, transparent. It’s
equivalent to rgba(0, 0, 0, 0), and it’s used like any other color keyword:

color: transparent;

TYPOGRAPHY
The art of arranging text on a webpage.

 Font stacks are when you write a list of fonts, sep. by ‘,’s in
font-family rule, this will ensure that 2nd font is displayed if 1st
unavailable and so on.

 font-weight can take a value from 1 to 1000. It also has some

keyword values i.e., lighter (-1 of parent value), normal (400),
bolder (+1 of parent value), bold (700). It is common practice to
use increments of 100.

 not all fonts support varying font weights and not all font
weights are available for all fonts.

 font-style can be used to set text to italic

  text-transform:uppercase/lowercase; can be used to set text to
display either all lowercase or all uppercase

 letter-spacing used to set space b/w letters, same for word-

spacing but for words.

Line Height

We can use the line-height property to set how tall we want each line containing
our text to be. Line height values can be a unitless number, such as 1.2, or a
length value, such as 12px, 5% or 2em.

p{
line-height: 1.4;
}
In the example above, the height between lines is set to 1.4. Generally, the
unitless value is preferred since it is responsive based on the current font size.
In other words, if the line-height is specified by a unitless number, changing the
font size will automatically readjust the line height.

text-align used to align text left,right,center or justify

Free font services, like Google Fonts and Adobe Fonts, host fonts that you can
link to from your HTML document with a provided <link> element, exact same
syntax as linking CSS file.

Web Fonts Using @font-face

Fonts can also be added using a @font-face ruleset in your CSS stylesheet
instead of using a <link> element in your HTML document. As mentioned
earlier, fonts can be downloaded just like any other file on the web. They
come in a few different file formats, such as:

 OTF (OpenType Font)

 TTF (TrueType Font)

 WOFF (Web Open Font Format)

 WOFF2 (Web Open Font Format 2)

The different formats are a progression of standards for how fonts will work
with different browsers, with WOFF2 being the most progressive. It’s a
good idea to include TTF, WOFF, and WOFF2 formats with your @font-
face rule to ensure compatibility on all browsers.

Let’s take a look at how to use @font-face using the same Roboto font as
before:

Within the “Selected Families” section, you can use the “Download” button
to download the font files to your computer. The files will be downloaded
in a single format, in this case, TTF. You can use additional tools to generate
additional file types for WOFF and WOFF2, check out MDN’s list of font
generators for more information.
When you have the files you need, move them to a folder inside your
website’s working directory, and you’re ready to use them in a @font-
face ruleset!

@font-face {
font-family: 'MyParagraphFont';
src: url('fonts/Roboto.woff2') format('woff2'),
url('fonts/Roboto.woff') format('woff'),
url('fonts/Roboto.ttf') format('truetype');
}
Let’s take a look at the example above, line by line:

 The @font-face at-rule is used as the selector. It’s recommended to

define the @font-face ruleset at the top of your CSS stylesheet.

 Inside the declaration block, the font-family property is used to set a

custom name for the downloaded font. The name can be anything
you choose, but it must be surrounded by quotation marks. In the
example, the font is named 'MyParagraphFont', as this font will be used
for all paragraphs.

 The src property contains three values, each specifying the relative
path to the font file and its format. In this example, the font files are
stored inside a folder named fonts within the working directory.

 Note that the ordering for the different formats is important because
our browser will start from the top of the list and search until it finds
a font format that it supports. Read more on format prioritization
on CSS-Tricks.

Once the @font-face at-rule is defined, you can use the font in your
stylesheet!

p{
font-family: 'MyParagraphFont', sans-serif;
}
Like using any other fonts, you can use the font-family property to set the font
on any HTML element. The downloaded font can be referenced with the
name you provided as the font-family property’s value in the @font-face ruleset
—in this case, 'MyParagraphFont'.
 FLEXBOX
A new type of flexible box model that makes positioning elements very
simple.

Display:flex or inline-flex