Reviewer made by: James Ducog & Stephanie Fabito. Good Luck!

HTML LAYOUT

The area of graphic design that deals with where visual elements are placed on a page
is called page layout. The look of web pages may be enhanced by using page layout. To
create a smooth flow of information and eye movement for maximum efficacy or impact,
it chooses the general appearance, relative importance, and interactions between
graphic components. Tip! For easier removal of automatic padding and margin, we can
set a universal selector and put the value ‘0’.

Layout guidelines for pages

The portion of a front end that
shows up at the top of the page is
called the header. Web pages have
a header section created by the
element.
The menu list and the navigation
bar are the same thing. Through
hyperlinks, content information is
shown using it.
The main section of the website
where the content is shown is called
the Content Section.
Index / Sidebar: It has extra content or advertisements that aren't really necessary to
be on the page.
Footer: Contact details and other inquiries pertaining to site pages are listed in the
footer section. Web pages always include a footer section at the bottom. The placement
of the footer on web pages is specified by the element.

THE HTML DIV or <div> tag also plays a vital role for partitions and section separation
of content or containers. The <div> tag is also a general container that lets you put
together relevant objects or material. This grouping facilitates the organization of your
website's structure, which makes it simpler to maintain and style.

Overall, HTML Layout is important for structure and organization as it offers a

methodical approach to arrange material on a webpage, facilitating user navigation and
comprehension. That’s why hierarchy needs to be considered too, to make the content
organization look neat and in order.
INTRODUCTION TO CSS

The invention of HTML by computer scientist Tim Berners-Lee in the early 1990s
allowed content to be displayed on websites. However, HTML did not offer styling
options.

CSS stands for Cascading Style Sheets. It is the language for describing the
presentation of Web pages, including colors, layout, and fonts, thus making our web
pages presentable to the users. CSS is the one who brings life to the structure and dull
appearance of our websites. Yung CSS allows us to apply styles to HTML documents.

CSS is designed to make style sheets for the web. It is independent of HTML, meaning
it's not controlled by HTML. This implies that CSS rules can be applied to HTML
documents without needing to alter the HTML code itself to change the design of a
webpage. The development of CSS was primarily driven by the need to separate the
structure of web documents from their presentation, leading to greater flexibility and
maintainability in web design.

The use of CSS in web designing:

● Enhanced website elements' visual appeal and design.
● Enhanced user experience with interactive effects and layout modifications.
● Uniform branding and style on every page of the website.

Creditors in Creating CSS

Hakon Wium Lie
1994: First Proposed by Hakon Wium Lie on 10th October
Bert Bos
1996: CSS was published on 17th November with influencer Bert Bos
1997: Created CSS level 2 on 4th November
1998: Published on 12th May
1999: CSS level 3 was released
Note: CSS1 until the latest version was released by the organization called W3C (World
Wide Web Consortium.)

CSS1 CSS3

The first version of CSS was developed CSS3 was released in 1999.
by W3C in 1996.
 It does not support responsive layout and Since it is the latest version of CSS, it
design. supports responsive layout and design.

We cannot break CSS into modules. We can break CSS3 into modules.

Here, we are not able to create 3D Here, we are able to perform all sorts of
animation. animation as it supports 3D animation
and transformation.

It is slower than CSS3. It is faster than CSS.

CSS includes a decent group of unique CSS3 includes a decent collection of

color schemes and colors. HSLA, HSL RGBA, and gradient colors.

Single text blocks can be used in CSS. Here we can also use multi-column text
blocks.

It does not support media queries. It supports media queries.

The syntax and structure of CSS1 were CSS3 introduces more complex syntax
relatively simple and straightforward, with and concepts, especially with the addition
limited options for complex styling and of advanced features like flexbox, grid
layout. layout, and CSS animations. While these
features offer greater flexibility and power,
they also require a deeper understanding
of CSS principles and techniques.

Syntax of CSS
CSS plays a crucial role in styling elements, controlling their appearance and layout on
a webpage. CSS syntax is used to apply styles to HTML elements. The styling and
layout of HTML components on a webpage are determined by the CSS syntax.

Selector {property:value; property:value;}

p {color:blue; text-align:center;}

● The selector points to the HTML element you want to style.

● The declaration block contains one or more declarations separated by
semicolons.
● Each declaration includes a CSS property name and a value, separated by a
colon.
● Multiple CSS declarations are separated with semicolons, and declaration blocks
are surrounded by curly braces.
CSS SELECTORS AND COMMENTS

The HTML components you wish to customize are selected and targeted using CSS
selectors. In particular, you may pick more than one element at once using CSS
selectors. Because you won't have to write the same lines of code twice for distinct
components, they are useful when you want to apply the same styles to several HTML
elements.
CSS Selectors are used to select or target HTML elements that we want to style. While
the elements that we select, or target are called ‘subjects’ of the selector. There are a
variety of ways on how we can utilize selectors for more refined and precise styling.

There are 5 types of Selectors:

● Type Selector - In CSS, a type selector is used to choose and apply styles to
every element on a page that belongs to a specific type. It uses the tag name of
HTML elements to target them. For instance, you might use the name of the tag
as the selector if you wanted to apply a certain style to every (paragraph)
element on your website. Example: p, h1, body, section.

● ID and Class - A selector that targets specific elements or elements that have
one instance on the web page like header and footer (ID) and multiple (class)
elements that share the same characteristics or are used for an element that
needs many classes. ID uses ‘#’ while class uses ‘.’ followed by a class or id
name.

● Attribute Selector - With CSS, you may target HTML components according to
whether their attributes are present, specific, valued, or partially valued. This is
done by using an attribute selector. This gives you more styling options for items
than simply their IDs, classes, or tag names. Example: ~, ^, &, *

● Universal Selector - While * or as we call the star element is present again, we

should remember the difference between the two. * as attribute selector selects
all the value with the same string while * as a universal selector affects the
overall settings.

● Pseudo Class and Pseudo Element - Special CSS keywords called

pseudo-classes and pseudo-elements let you target elements according to
certain states or situations that aren't possible to target with standard selectors.
Example: you can use the pseudo element: ::first letter, it will select all the first
letter of each paragraph.
SPECIFICITY - When there are competing CSS rules, specificity in CSS decides which
styles are applied to an element. It's a means of settling disputes when several CSS
selectors aiming at the same element clash.

Inline > ID > Class > Type elements > universal

CSS LINKS

CSS links play a vital role in formatting HTML documents and are essential in web
development. Web developers can apply styling to webpage elements by including
external CSS files in HTML documents through CSS links. By linking external CSS files
to HTML documents, CSS links allow developers to maintain consistent styling across
multiple web pages and easily update styles globally.

In addition, CSS links are used to define hyperlinks in HTML documents, allowing users
to navigate between different web pages. websites smoothly. This feature is necessary
to create an intuitive and user-friendly browsing experience.

In general, CSS links act as a bridge between HTML documents and external style
sheets, allowing developers to customize the visual presentation of web content and
improve overall design. and usability of websites.

Pseudo Classes
Pseudo-classes are a concept in CSS (Cascading Style Sheets) that allow you to apply
styles to elements based on their state or position within the document structure,
without needing to modify the HTML.

Example of pseudo class

:hover
:active
:link
:visited

Link States
CSS links have different states. The states mean how the links adapt when a user
interacts with them. For instance, before clicking on the link, after clicking, when
hovering over, etc. Here are all the different states of CSS links. Links states should be
in order to prevent inconsistencies between various link states and uphold uniform
styling across web pages.

Link (a:link): A link that has a destination, this is the unvisited state when the user is
yet to click on the link., styled using the :link pseudo class.

Visited (a:visited): A link that has already been visited (exists in the browser's history),
styled using the :visited pseudo class.

Hover (a:hover): A link that is hovered over by a user's mouse pointer, styled using the
:hover pseudo class.

Active (a:active): The state where the link is clicked but is yet to navigate the user to
the destination href address. Styled using the :active pseudo class.

Default styles
Default links have the following properties:

Links are underlined.

Unvisited links are blue.

👆
Visited links are purple.
Hovering a link makes the mouse pointer change to a little hand icon.
Active links are red. Try holding down the mouse button on the link as you click it.

CSS FONTS AND TEXTS

A crucial first step in creating a useful and accessible website is selecting the
appropriate typeface. Your designs and webpages' readability is influenced by the way
text is formatted.
With CSS, you may change the appearance of your HTML text in a variety of ways. You
are able to choose the typeface you wish to use, adjust its size and boldness, modify its
color, and add other embellishments or space.

Here are the following text properties you can use to control the text appearance, add
design or to change its state:

1. Text color: Text color is important to contrast the background color to which
enhances the readability of texts. We have 3 properties available for color which
are the ‘color’ itself, ‘HEX’, and ‘RGB’. The color property focuses on literal color
names like ‘red’, ‘blue’, or ‘green’. The HEX code starts with the ‘#’ symbol and
uses a 6 digit combination of letters and numbers. The RGB stands for ‘red’,
‘green’, and ‘blue’ that has range of 0-255
 2. Text Alignment and text-align-last: this property sets the alignment of your text
to where it starts, while text-align-last sets the alignment of the last line of text.
The following values available for text alignment are: ‘start’, ‘end’, ‘justify’, and
‘center’.

3. Text-transformation: used to specify the capitalization type of texts. The

following values we have for text-transformation are: capitalize, lowercase, and
uppercase.

4. Text-decoration: allows users to place line design to text. The following values
include: underline, overline, line-through, and underline-overline combination. We
can also style these lines by adding values such as ‘wavy’, ‘dotted’, ‘dashed’, and
etc.

5. Text-shadow: Adding a text-shadow adds depth to your text, it is used especially

for headings or titles. It is used to uplift your text. The syntax is composed of
horizontal-shadow, vertical-shadow, blur-radius, and color.

6. Text-spacing: configures the spacing of your text whether it be space between

characters, lines, and words. The following properties we have for text-spacing
are: text-indent, line-height, letter-spacing, and word-spacing.

Here are the following font properties we can use to modify the appearance of our texts:

1. The CSS property font-family can be used to designate a list of fonts or the
preferred font to be used for displaying text in an HTML document. By defining a
prioritized list of font families, you can make sure that a user's system will fall
back to the next specified font if the first font in the list isn't available.
● Example: font-family: Helvetica, sans-serif;

2. Font-style: attribute is used to define a webpage's text element's font style. It

gives site developers the ability to decide whether to display the text in an
oblique, italic, or standard style. Remember the difference between italic and
oblique depends on the font-family used. Italic is done by skewing lines to the
right and normally seen in serif fonts while oblique are slanted regular fonts or
sans-serif fonts.

3. Font-weight specifies the desired thickness of text or fonts. We can use the
keyword value such as ‘lighter’, ‘normal’, ‘bold’, or ‘bolder’ or we can also use
numerical values by using px.
 4. Font-variant alters the appearance of font, for instance we have the only value
of ‘small-caps’ which makes the text or font look small but in all caps.

5. Font-size sets the desired sizing of texts or fonts. It determines the height of the
font characters, affecting their visibility and readability. The following values we
could set the font-size property into are: ‘__px’, ‘__%’, ‘__em’, and ‘__rem’.

!Important:

Font Web-Safe - There are fonts that we can mark as ‘web safe’ meaning they are safe
to use and consistent among different platforms, system or website applications.

● The following are the examples of web safe fonts: (sans-serif: Arial and Verdana |
serif: Times New Roman, Garamond, and Georgia.)
● Note: While these fonts are marked as ‘web safe’ doesn’t mean it’s 100%
working all the time.

Generic Font Families:

● Serif - identified by the decorative extensions which are ‘serifs’ and give off
classic aesthetics.
● Sans-serif - Clean, simple, straightforward. Appears modern.
● Monospace - often associated with typewriters. It ensures equal spacing of
characters horizontally regardless of the width.
● Cursive - Decorative, flowing type, and mimics a human handwriting.
● Fantasy - unconventional design, artistic, particularly related to a theme.

Font Google - is one of the most used websites when it comes to font usage. There are
over 1500 fonts currently available on the Google Font website. It is handy if you don't
want to use regular available fonts. You can easily identify a font from google by
checking its source code if the font was imported.

Just put a link tag and copy the link to use the font from Google.
Syntax: <link rel=”stylesheet” href=”link” >

Font Pairing refers to the combination of two or more fonts that creates a visually
appealing typography and connective use of font types. There are 4 rules to look for
when pairing fonts.

Complement - use fonts that complement each other may it be from the same family or
not that shares some similar characteristics.
Use font superfamilies - Some font families already have a set for users to use
because they are designed to work together so it's also great to use fonts from
superfamilies. Eg. Lucida, Helvetica Neue, Roboto.

Contrast is King - The use of two different fonts that not just complement each other
but also contrast is a great asset and beneficial for the overall visual appeal and
readability of your text.
The popular contrast partners are paring sans-serif font with serif fonts.

Choose only one boss - there should be only one font that takes up the majority for
your text to establish hierarchy.