5 Stages of the Web Development

Process
Step 1: Design

This is the fun part. You'll likely talk about color schemes, function, special features (like e-
commerce), graphics, videos, and the overall look. We always recommend coming to the
meeting with a few examples of websites you love. After that meeting, the creative team takes
some time to bring your vision to life in 2D.

Step 2: Review

Once the team has had some time to work through the design process. it's time to show the client.
This is usually done in person with a presentation. You can discuss the layout, colors, etc. during
this time. Often, more meetings will follow as you'll likely have some feedback and changes that
you'd like the creative team to implement.

Step 3: Develop

Now that the design is approved, it is time for the website to go to the developer. The developer
starts to build the website on a production server so you can view the site online without it being
viewable to the public. During that time, you can work with the copywriter and other people in
the agency to nail down the voice, content, and graphics. This is usually the longest part of the
process, but it is the most important!

Step 4: Test

Once your website has been coded by the developer and you've settled on all of your content, it
is time to review your new site on the test server. You'll receive a link to view the website and
share with your company and decision-makers. Usually there are a few tweaks that need to be
made at this stage before the site is finalized.

Step 5: Launch!

At long last, your new site is ready to launch! Once you give the go-ahead, the developer will
start the launch process. This includes setting up hosting and getting the domain pointed. It will
also take some time to propagate. Be patient — it will be worth it! After a few hours, your site
should be live and ready for you and the rest of the world to enjoy!
PRINCIPLES OF GOOD WEBSITE
DESIGN
1. WEBSITE PURPOSE
1. Describing Expertise
2. Building Your Reputation
3. Generating Leads
4. Sales and After Care

2. SIMPLICITY
Colour
Colour has the power to communicate messages and evoke emotional responses. Keep
the colour selection limited to less than 5 colours. Complementary colours work very
well. Pleasing colour combinations increase customer engagement and make the user
feel good.

Type
Typography has an important role to play on your website. It commands attention and
works as the visual interpretation of the brand voice. Typefaces should be legible and
only use a maximum of 3 different fonts on the website.

Imagery
Imagery is every visual aspect used within communications. This includes still
photography, illustration, video and all forms of graphics. Most of the initial information
we consume on websites is visual and as a first impression, it is important that high-
quality images are used to form an impression of professionalism and credibility in the
visitors’ minds.

3. NAVIGATION
Navigation is the wayfinding system used on websites where visitors interact and find what
they are looking for. Website navigation is key to retaining visitors. If the website navigation
is confusing visitors will give up and find what they need elsewhere. Keeping navigation
simple, intuitive and consistent on every page is key.
4. F-SHAPED PATTERN READING
The F- based pattern is the most common way visitors scan text on a website. Eye-tracking
studies have found that most of what people see is in the top and left areas of the screen. The
F shaped layout mimics our natural pattern of reading in the West (left to right and top to
bottom). An effectively designed website will work with a reader’s natural pattern of
scanning the page.

5. VISUAL HIERARCHY
Visual hierarchy is the arrangement of elements in order of importance. This is done either
by size, colour, imagery, contrast, typography, whitespace, texture and style. One of the most
important functions of visual hierarchy is to establish a focal point; this shows visitors where
the most important information is.

6. CONTENT
An effective website has both great design and great content. Using compelling language
great content can attract and influence visitors by converting them into customers.

7. GRID BASED LAYOUT

Grids help to structure your design and keep your content organised. The grid helps to align
elements on the page and keep it clean. The grid-based layout arranges content into a clean
rigid grid structure with columns, sections that line up and feel balanced and impose order
and results in an aesthetically pleasing website.

8. LOAD TIME
Waiting for a website to load will lose visitors. Nearly half of web visitors expect a site to
load in 2 seconds or less and they will potentially leave a site that isn’t loaded within 3
seconds. Optimising image sizes will help load your site faster.

9. MOBILE FRIENDLY
More people are using their phones or other devices to browse the web. It is important to
consider building your website with a responsive layout where your website can adjust to
different screens.

https://www.feelingpeaky.com/9-principles-of-good-web-design/
HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes
to:

Example
<a href="https://www.w3schools.com">Visit W3Schools</a>

The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path
to the image to be displayed:

Example
<img src="img_girl.jpg">

HTML Formatting Elements

Formatting elements were designed to display special types of text:

 <b> - Bold text

 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
HTML Colors
HTML colors are specified with predefined color names, or with RGB, HEX, or RGBA values.

In HTML, a color can be specified by using a color name:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

Background Color
You can set the background color for HTML elements:

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">Lorem ipsum...</p>

Text Color
<h1 style="color:Tomato;">Hello World</h1>

<p style="color:DodgerBlue;">Lorem ipsum...</p>

<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

RGB Color Values

In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color with a value between 0
and 255.

This means that there are 256 x 256 x 256 = 16777216 possible colors!

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255),
and the other two (green and blue) are set to 0.

Another example, rgb(0, 255, 0) is displayed as green, because green is set to its highest value
(255), and the other two (red and blue) are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

To display white, set all color parameters to 255, like this: rgb(255, 255, 255).

HTML HEX Colors

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB
(blue) hexadecimal integers specify the components of the color.

HEX Color Values

In HTML, a color can be specified using a hexadecimal value in the form:

#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as
decimal 0-255).

For example, #ff0000 is displayed as red, because red is set to its highest value (ff), and the
other two (green and blue) are set to 00.

Another example, #00ff00 is displayed as green, because green is set to its highest value (ff),
and the other two (red and blue) are set to 00.

To display black, set all color parameters to 00, like this: #000000.

To display white, set all color parameters to ff, like this: #ffffff.

Block-level Elements
A block-level element always starts on a new line, and the browsers automatically add some
space (a margin) before and after the element.

A block-level element always takes up the full width available (stretches out to the left and right
as far as it can).

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML document.

The <p> element is a block-level element.

The <div> element is a block-level element.

Example
<p>Hello World</p>
<div>Hello World</div>

Inline Elements
An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

This is a <span> element inside a paragraph.

Example
<span>Hello World</span>

<a>
<b>
<br>
<em>
<i>
<img>
<input>
<small>
<span>
<strong>
<sub>
<sup>

Comment tag
<!-- Write your comments here -->

HTML Links
<a href="url">link text</a>

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you
must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

 _self - Default. Opens the document in the same window/tab as it was clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window
Absolute URLs vs. Relative URLs
Both examples above are using an absolute URL (a full web address) in the href attribute.

A local link (a link to a page within the same website) is specified with a relative URL (without
the "https://www" part):

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

HTML Links - Use an Image as a Link

To use an image as a link, just put the <img> tag inside the <a> tag:

Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Link to an Email Address

Use mailto: inside the href attribute to create a link that opens the user's email program (to let
them send a new email):

Example
<a href="mailto:[email protected]">Send email</a>

Link Titles
The title attribute specifies extra information about an element. The information is most often
shown as a tooltip text when the mouse moves over the element.
Example
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our
HTML Tutorial</a>

HTML Link Colors

By default, a link will appear like this (in all browsers):

 An unvisited link is underlined and blue

 A visited link is underlined and purple
 An active link is underlined and red

You can change the link state colors, by using CSS:

HTML Links - Create Bookmarks

HTML links can be used to create bookmarks, so that readers can jump to specific parts of a
web page.

Create a Bookmark in HTML

Bookmarks can be useful if a web page is very long.

To create a bookmark - first create the bookmark, then add a link to it.

When the link is clicked, the page will scroll down or up to the location with the bookmark.

Example
First, use the id attribute to create a bookmark:

<h2 id="C4">Chapter 4</h2>

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

Example
<a href="#C4">Jump to Chapter 4</a>
You can also add a link to a bookmark on another page:

<a href="html_demo.html#C4">Jump to Chapter 4</a>

Image Floating
Use the CSS float property to let the image float to the right or to the left of a text:

<img src="feather.jfif" style="float:right"/>

HTML Image Maps

With HTML image maps, you can create clickable areas on an image.

Image Maps
The HTML <map> tag defines an image map. An image map is an image with clickable areas. The
areas are defined with one or more <area> tags.

Example
Here is the HTML source code for the image map above:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
HRML FRAMES
HTML frames are used to divide your browser window into multiple sections where each section
can load a separate HTML document. A collection of frames in the browser window is known as
a frameset. The window is divided into frames in a similar way the tables are organized: into
rows and columns.

Disadvantages of Frames
There are few drawbacks with using frames, so it's never recommended to use frames in your
webpages −
 Some smaller devices cannot cope with frames often because their screen is not big enough
to be divided up.
 Sometimes your page will be displayed differently on different computers due to different
screen resolution.
 The browser's back button might not work as the user hopes.
 There are still few browsers that do not support frame technology.

Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag
defines how to divide the window into frames.
The rows attribute of <frameset> tag defines horizontal frames and
cols attribute defines vertical frames.
Each frame is indicated by <frame> tag and it defines which HTML document shall open into
the frame.
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
HTML Iframes
An HTML iframe is used to display a web page within a web page.

The HTML <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

<!DOCTYPE html>

<html>

<body>

<h1>The iframe element</h1>

<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials">

</iframe>

</body>

</html>

Syntax
<iframe src="url" title="description"></iframe>

Iframe - Set Height and Width

Use the height and width attributes to specify the size of the iframe.

The height and width are specified in pixels by default:

Example
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

Iframe - Target for a Link

An iframe can be used as the target frame for a link.
The target attribute of the link must refer to the name attribute of the iframe:

Example
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

<html>

<head>

<title>iframe hyperlink</title>

</head>

<body>

<h1>

iFrame Hyperlinks

</h1>

<a href="Resume.html" target="mylinks">Click here</a>

<iframe src="hello.html" width="200px" height="250px" name="mylinks">

</body>

</html>

Linked file:

<HTML>

<HEAD>

<TITLE>linked file</TITLE>

</HEAD>

<BODY>

<p>

</p>

<a href="resume.html" target="_parent">

 click here

</a>

</span>

</BODY>

</HTML>

HTML Forms
An HTML form is used to collect user input. The user input is most often sent to a server for
processing.

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/welcome.html">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called
"/welcome.html".</p>

</body>
</html>

file:///D:/ welcome.html?fname=John&lname=Doe
HTML Form Attributes
The Action Attribute
defines the action to be performed when the form is submitted

Usually, the form data is sent to a file on the server when the user clicks on the submit button.

The Target Attribute

specifies where to display the response that is received after submitting the form.

Value Description

_blank The response is displayed in a new window or tab

_self The response is displayed in the current window

_parent The response is displayed in the parent frame

_top The response is displayed in the full body of the window

framename The response is displayed in a named iframe

The default value is _self which means that the response will open in the current window
The Method Attribute
specifies the HTTP method to be used when submitting the form data.

The form-data can be sent as URL variables (with method="get") or as HTTP post transaction
(with method="post").

The default HTTP method when submitting form data is GET.

<form action="/action_page.php" method="get">

GET:

 Appends the form data to the URL, in name/value pairs

 NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)
 The length of a URL is limited (2048 characters)
 Useful for form submissions where a user wants to bookmark the result
 GET is good for non-secure data, like query strings in Google

POST:

 Appends the form data inside the body of the HTTP request (the submitted form data is
not shown in the URL)
 POST has no size limitations, and can be used to send large amounts of data.
 Form submissions with POST cannot be bookmarked

Tip: Always use POST if the form data contains sensitive or personal information!

The Autocomplete Attribute

The autocomplete attribute specifies whether a form should have autocomplete on or off.

When autocomplete is on, the browser automatically complete values based on values that the
user has entered before.

<form action="/action_page.php" autocomplete="on">

The Novalidate Attribute

The novalidate attribute is a boolean attribute.

When present, it specifies that the form-data (input) should not be validated when submitted.

<form action="/action_page.php" novalidate>

<label for="email">Enter your email:</label>

 <input type="email" id="email" name="email"><br><br>

<input type="submit">

</form>

HTML Form Elements

The HTML <form> element can contain one or more of the following form elements:

 <input>
 <label>
 <select>
 <textarea>
 <button>
 <fieldset>
 <legend>
 <datalist>
 <output>
 <option>
 <optgroup>

The <input> Element

 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="number">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">
 <input type="time">
  <input type="url">
 <input type="week">

The <label> Element

The <label> element defines a label for several form elements.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element
to bind them together.

The <select> Element

The <select> element defines a drop-down list:

<label for="cars">Choose a car:</label>

<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

The <option> elements defines an option that can be selected.

To define a pre-selected option, add the selected attribute to the option:

<option value="fiat" selected>Fiat</option>

Group related options with <optgroup> tags:

<select name="cars" id="cars">

<optgroup label="Swedish Cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

</optgroup>

<optgroup label="German Cars">

<option value="mercedes">Mercedes</option>

<option value="audi">Audi</option>

</optgroup>

</select>
Visible Values:

Use the size attribute to specify the number of visible values:

<label for="cars">Choose a car:</label>

<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one value:

<label for="cars">Choose a car:</label>

<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

The <textarea> Element

defines a multi-line input field (a text area):

<textarea name="message" rows="10" cols="30">

The cat was playing in the garden.
</textarea>

The <button> Element

defines a clickable button

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

The <fieldset> and <legend> Elements

The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

The <datalist> Element

specifies a list of pre-defined options for an <input> element.

Users will see a drop-down list of the pre-defined options as they input data

The list attribute of the <input> element, must refer to the id attribute of
the <datalist> element

<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
HTML Styles - CSS
(CSS) is a style sheet language used for describing the presentation of a document written
in a markup language such as HTML or XML

CSS is the language we use to style a Web page.

With CSS, you can control the color, font, the size of text, the spacing between elements, how
elements are positioned and laid out, what background images or background colors are to be
used, different displays for different devices and screen sizes, and much more!

 CSS stands for Cascading Style Sheets

 CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
 CSS saves a lot of work. It can control the layout of multiple web
pages all at once
 External stylesheets are stored in CSS files

Using CSS
CSS is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes.

CSS can be added to HTML documents in 3 ways:

 Inline - by using the style attribute inside HTML elements

 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file

The most common way to add CSS, is to keep the styles in external CSS files. However, in this
tutorial we will use inline and internal styles, because this is easier to demonstrate, and easier
for you to try it yourself.

Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the text color of
the <p> element to red:

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

Internal CSS
An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

The following example sets the text color of ALL the <h1> elements (on that page) to blue, and
the text color of ALL the <p> elements to red. In addition, the page will be displayed with a
"powderblue" background color:

<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

External CSS
An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each HTML page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Here is what the "styles.css" file looks like:

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

Link to External CSS

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

CSS Colors, Fonts and Sizes

CSS Colors
The CSS color property defines the text color to be used.

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">Lorem ipsum...</p>

Text Color
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Border Color
<h1 style="border:2px solid Violet;">Hello World</h1>

CSS Backgrounds
to add background effects for elements.
  background-color
 background-image
 background-repeat
 background-attachment
 background-position
 background (shorthand property)

background-color: lightblue;

opacity: 0.3;

opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 -
1.0. The lower value, the more transparent

Transparency using RGBA

background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */

CSS background-image
background-image: url("paper.gif");

CSS background-repeat
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}

repeats an image both horizontally (background-repeat: repeat-x;) and vertically background-

repeat: repeat-y.

CSS background-repeat: no-repeat

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}

CSS background-position
used to specify the position of the background image.
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

CSS background-attachment
specifies whether the background image should scroll or be fixed

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}

CSS background-size
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-size: 300px 100px; or
background-size: auto;
}

CSS background - Shorthand property

body {
background: #00ffff url("img_tree.png") no-repeat right top fixed;

CSS Border
The CSS border property defines a border around an HTML element.

p {
border: 2px solid powderblue;
}
CSS Border Style
border-style property specifies what kind of border to display

 dotted - Defines a dotted border

 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect depends on the border-color value
 ridge - Defines a 3D ridged border. The effect depends on the border-color value
 inset - Defines a 3D inset border. The effect depends on the border-color value
 outset - Defines a 3D outset border. The effect depends on the border-color value
 none - Defines no border
 hidden - Defines a hidden border

p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

CSS Border Width

border-width property specifies the width of the four borders

p.one {
border-style: solid;
border-width: 5px;
}

border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */

border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */

CSS Border Color

p.one {
border-style: solid;
border-color: red;
}
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left
*/

CSS Border - Individual Sides

border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;

CSS Border - Shorthand Property

border: 5px solid red;

CSS Rounded Borders

border: 2px solid red;
border-radius: 5px;

CSS Fonts
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.

The CSS font-family property defines the font to be used.

font-family: "Times New Roman", Times, serif;

The second and third fonts are backups, in case the first one is not found

font-style: italic;

The CSS font-size property defines the text size to be used.

font-size: 30px;

font: italic small-caps bold 12px/30px Georgia, serif;

CSS Padding
The CSS padding property defines a padding (space) between the text and the border.

p {
border: 2px solid powderblue;
padding: 30px;
}

CSS Margin
The CSS margin property defines a margin (space) outside the border.

p {
border: 2px solid powderblue;
margin: 50px;
}

Parallax responsive web templates:

Dogstudio.co

Recapafteruse.co.uk
Styling Links
The four links states are:

 a:link - a normal, unvisited link

 a:visited - a link the user has visited
 a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked

a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */

a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: blue;
}

CSS Styling Images

Rounded Images
Use the border-radius property to create rounded images:

img {
border-radius: 8px;
}

img {
border-radius: 50%;
}

Center an Image
To center an image, set left and right margin to auto and make it into a block element:
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

IMAGE WITH SHADOW:

div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

CSS Shadow Effects

 text-shadow
 box-shadow

h1 {
text-shadow: 2px 2px;
}

h1 {
text-shadow: 2px 2px red;
}

Multiple Shadows
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Border around text!

h1 {
color: coral;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

CSS box-shadow Property

div {
box-shadow: 10px 10px lightblue;
}
div {
background-color: transparent;
}

div {
color: blue;
border: 10px solid currentcolor;
}

CSS Text Effects

CSS Text Overflow, Word Wrap, Line Breaking Rules,
and Writing Modes
CSS Text Overflow
The CSS text-overflow property specifies how overflowed content that is not displayed should
be signaled to the user.

p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}

p.test1:hover {
overflow: visible;
}

CSS Word Wrapping

The CSS word-wrap property allows long words to be able to be broken and wrap onto the next
line.

If a word is too long to fit within an area, it expands outside:

The word-wrap property allows you to force the text to wrap - even if it means splitting it in the
middle of a word:

p {
word-wrap: break-word;
}
CSS Word Breaking
The CSS word-break property specifies line breaking rules.

p.test1 {
word-break: keep-all;
}

p.test2 {
word-break: break-all;
}

CSS Writing Mode

The CSS writing-mode property specifies whether lines of text are laid out horizontally or
vertically.

Some text with a span element with a vertical-rl writing-mode.

The following example shows some different writing modes:

p.test1 {
writing-mode: horizontal-tb;
}

span.test2 {
writing-mode: vertical-rl;
}

p.test2 {
writing-mode: vertical-rl;
}

CSS text-transform Property

The text-transform property controls the capitalization of text.

div.a {
text-transform: uppercase;
}

div.b {
text-transform: lowercase;
}

div.c {
text-transform: capitalize;
}
CSS 2D Transforms
CSS transforms allow you to move, rotate, scale, and skew elements.

CSS 2D Transforms Methods

With the CSS transform property you can use the following 2D transformation methods:

 translate()
 rotate()
 scaleX()
 scaleY()
 scale()
 skewX()
 skewY()
 skew()
 matrix()

The translate() method moves an element from its current position (according to the
parameters given for the X-axis and the Y-axis).

div {
transform: translate(50px, 100px);
}

The rotate() method rotates an element clockwise or counter-clockwise according to a given

degree.

transform: rotate(20deg);

Using negative values will rotate the element counter-clockwise.

transform: rotate(-20deg);

The scale() method increases or decreases the size of an element (according to the parameters
given for the width and height).

transform: scale(2, 3);

transform: scale(0.5, 0.5);

The scaleX() method increases or decreases the width of an element.

transform: scaleX(2);

The scaleY() method increases or decreases the height of an element.

transform: scaleY(3);
The skewX() method skews an element along the X-axis by the given angle.

transform: skewX(20deg);

The skewY() method skews an element along the Y-axis by the given angle.

transform: skewY(20deg);

The skew() method skews an element along the X and Y-axis by the given angles.

transform: skew(20deg, 10deg);

If the second parameter is not specified, it has a zero value.

The matrix() method combines all the 2D transform methods into one.

The matrix() method take six parameters, containing mathematic functions, which allows you to
rotate, scale, move (translate), and skew elements.

The parameters are as follow: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(),

translateY())

transform: matrix(1, -0.3, 0, 1, 0, 0);

CSS 3D Transforms
 rotateX()
 rotateY()
 rotateZ()

The rotateX() method rotates an element around its X-axis at a given degree:
#myDiv {
transform: rotateX(150deg);
}

The rotateY() method rotates an element around its Y-axis at a given degree:
#myDiv {
transform: rotateY(150deg);
}

The rotateZ() method rotates an element around its Z-axis at a given degree:
#myDiv {
transform: rotateZ(90deg);
}

CSS Transitions
CSS transitions allows you to change property values smoothly, over a given duration.

 transition
 transition-delay
 transition-duration
 transition-property
 transition-timing-function

div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}

Change Several Property Values

div {
width: 100px;
 height: 100px;
background: red;
transition: width 2s, height 4s;
}

div:hover {
width: 300px;
height: 300px;
}

Specify the Speed Curve of the Transition

The transition-timing-function property specifies the speed curve of the transition effect.

The transition-timing-function property can have the following values:

 ease - specifies a transition effect with a slow start, then fast, then end slowly (this is
default)
 linear - specifies a transition effect with the same speed from start to end
 ease-in - specifies a transition effect with a slow start
 ease-out - specifies a transition effect with a slow end
 ease-in-out - specifies a transition effect with a slow start and end
 cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function

#div1 {transition-timing-function: linear;}

#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Delay the Transition Effect

The transition-delay property specifies a delay (in seconds) for the transition effect.
div {
transition-delay: 1s;
}

Transition + Transformation
div {
transition: width 2s, height 2s, transform 2s;
}

div {
width: 100px;
 height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
}
CSS Tables
Table Borders
Firstname Lastname
Peter Griffin
Lois Griffin

table, th, td {
border: 1px solid;
}

Full-Width Table
table {
width: 100%;
}

Collapse Table Borders

table, td, th {

border: 5px double;

table {

width: 100%;

}
Using collapse:

table, td, th {

border: 5px double;

table {

width: 100%;

border-collapse: collapse;

Table Width and Height

table {
width: 100%;
}

th {
height: 70px;
}

or

table {
width: 50%;
}

CSS Table Alignment

Horizontal Alignment
The text-align property sets the horizontal alignment (like left, right, or center) of the content
in <th> or <td>.

By default, the content of <th> elements are center-aligned and the content of <td> elements
are left-aligned.

td {
text-align: center;
}

Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the
content in <th> or <td>.

By default, the vertical alignment of the content in a table is middle (for both <th> and <td>
elements).

td {
height: 50px;
vertical-align: bottom;
}

Table Padding
To control the space between the border and the content in a table, use the padding property on
<td> and <th> elements:

th, td {
padding: 15px;
text-align: left;
}

Horizontal Dividers
Add the border-bottom property to <th> and <td> for horizontal dividers:

First Name Last Name Savings

Peter Griffin $100

th, td {
border-bottom: 1px solid #ddd;
}

Hoverable Table
Use the :hover selector on <tr> to highlight table rows on mouse over:

tr:hover {background-color: coral;}

Striped Tables

First Name Last Name Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

For zebra-striped tables, use the nth-child() selector and add a background-
color to all even (or odd) table rows:
tr:nth-child(even) {background-color: #f2f2f2;}

CSS Responsive Table

A responsive table will display a horizontal scroll bar if the screen is too small to display the full
content:

Add a container element (like <div>) with overflow-x:auto around the <table> element to
make it responsive:

<div style="overflow-x: auto;">

 <table>

<tr>

<th>First Name</th>

<th>Last Name</th>

</tr>

<tr>

<td>Jill</td>

<td>Smith</td>

</tr>

</table>

</div>

CSS Lists
HTML Lists and CSS List Properties
In HTML, there are two main types of lists:

 unordered lists (<ul>) - the list items are marked with bullets
 ordered lists (<ol>) - the list items are marked with numbers or letters

The CSS list properties allow you to:

 Set different list item markers for ordered lists

 Set different list item markers for unordered lists
 Set an image as the list item marker
 Add background colors to lists and list items

Different List Item Markers

The list-style-type property specifies the type of list item marker.

ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}

An Image as the List Item Marker

The list-style-image property specifies an image as the list item marker:

ul {
list-style-image: url('sqpurple.gif');
}

Position the List Item Markers

The list-style-position property specifies the position of the list-item markers (bullet points).

"list-style-position: outside;" means that the bullet points will be outside the list item. The start
of each line of a list item will be aligned vertically. This is default:

 Coffee - A brewed drink prepared from roasted coffee beans...

 Tea
 Coca-cola

"list-style-position: inside;" means that the bullet points will be inside the list item. As it is part
of the list item, it will be part of the text and push the text at the start:

 Coffee - A brewed drink prepared from roasted coffee beans...

 Tea
 Coca-cola

ul.a {
list-style-position: outside;
}

ul.b {
list-style-position: inside;
}
Remove Default Settings
The list-style-type:none property can also be used to remove the markers/bullets. Note that
the list also has default margin and padding. To remove this, add margin:0 and padding:0 to
<ul> or <ol>:

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

List - Shorthand property

The list-style property is a shorthand property. It is used to set all the list properties in one
declaration:

ul {
list-style: square inside url("sqpurple.gif");
}