HTML
HTML
HTML
ctrl+T=new tab.
ctrl+shift+j=inspect
ctrl+end=end of page.
ctrl+home=home of page.
ctrl+u=html page.
ctrl+h=history.
ctrl+enter
ctrl+l=address bar.
alt+tsb.
<h1> to <h6> are haeding tags. <h1> is the largest heading tag and
become smaller as go towards <h6>
<br> used to break the line.Next sentence will start on new line.
<a> tag used to define link.(it will open link on the same page).
<title> This tag display title of your document on the browser(top of the
browser).
<pre> This tag will show the data in the same sequence in which it is
written.
<ins> insert text. Shows that this text was not written before but it is
written after file made. means changed text. text inserted later
<del> delete. shows the cut bar at text. that shows that the text was
first written but now has been deleted.
<body>
<sub>2</sub>
<body>
WWW.
<sup>(1)</sup>
</body>
Table tag are defined with table tag. <tr> used for table row and <td>
used for table data.<th> used for table heading.
option tag is used to add captions. It is used inside the <select> tag.
<ul> is used for ordered list. <ol> is used for unordered list.
<span> element is inline used as container for some text. Can also be
used to style some part of text.
example
<address> usually renders in Italic. Browser add line break before and
after the element.
<cite> title of creative work(book, poem, song., e.t.c). Not person name.
CSS
CSS(Coding Style Sheets). Used for colors and styles. Three ways to use
CSS.
Internal(Using <style> tag in head tag of Html file). For one Html page
External(Create a seperate CSS file and link it with Html. File must be
saved with .css extension). For many pages
font-family
font-size
text-align
content-align
justify-content
position
align-items
hover
focus
active
The border-style property can have from one to four values (for the top
border, right border, bottom border, and the left border).
The width can be set as a specific size (in px, pt, cm, em, etc) or by using
one of the three pre-defined values: thin, medium, or thick:
The border-color property is used to set the color of the four borders.
Example
border-color: red green blue yellow; /* red top, green right, blue
bottom and yellow left */
In CSS, there are also properties for specifying each of the borders (top,
right, bottom, and left):
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
Border Shorthand:
background-color: lightgrey;
border-radius: 5px;
The CSS margin properties are used to create space around elements,
outside of any defined borders.
With CSS, you have full control over the margins. There are properties
for setting the margin for each side of an element (top, right, bottom,
and left).
inherit - specifies that the margin should be inherited from the parent
element
With CSS, you have full control over the padding. There are properties
for setting the padding for each side of an element (top, right, bottom,
and left).
inherit - specifies that the padding should be inherited from the parent
element
eg
The height and width properties are used to set the height and width of
an element.
The height and width properties may have the following values:
auto - This is default. The browser calculates the height and width
Note: If you for some reason use both the width property and the max-
width property on the same element, and the value of the width
property is larger than the max-width property; the max-width property
will be used (and the width property will be ignored).
In CSS, the term "box model" is used when talking about design and
layout.
The CSS box model is essentially a box that wraps around every HTML
element. It consists of: margins, borders, padding, and the actual
content.
Content - The content of the box, where text and images appear
outline-style
outline-color
outline-width
outline-offset
outline
The outline-style property specifies the style of the outline, and can
have one of the following values:
The outline-width property specifies the width of the outline, and can
have one of the following values:
thin (typically 1px)
<script> tag used inside the head of Html file to define the javascript.
Javsscript makes Html page more dynamic and interactive.
Text Color
The color property is used to set the color of the text. The color is
specified by:
Text Alignment
The following example shows center aligned, and left and right aligned
text (left alignment is default if text direction is left-to-right, and right
alignment is default if text direction is right-to-left):
Text Direction
Text Decoration
h1 {
text-decoration: overline;
h2 {
text-decoration: line-through;
h3 {
text-decoration: underline;
Text Transform
Letter Spacing
Line Height
Word Spacing
Text Shadow
In its simplest use, you only specify the horizontal shadow (2px) and the
vertical shadow (2px):
Note: If the font name is more than one word, it must be in quotation
marks, like: "Times New Roman".
Font Style
oblique - The text is "leaning" (oblique is very similar to italic, but less
supported)
Font Size
Absolute size:
Does not allow a user to change the text size in all browsers (bad for
accessibility reasons)
Absolute size is useful when the physical size of the output is known
Relative size:
Note: If you do not specify a font size, the default size for normal text,
like paragraphs, is 16px (16px=1em).
Google Fonts
If you do not want to use any of the standard fonts in HTML, you can
use Google Fonts.
Google Fonts are free to use, and have more than 1000 fonts to choose
from.
Just add a special style sheet link in the <head> section and then refer
to the font in the CSS.
CSS Icons
The simplest way to add an icon to your HTML page, is with an icon
library, such as Font Awesome.
Add the name of the specified icon class to any inline HTML element
(like <i> or <span>).
All the icons in the icon libraries below, are scalable vectors that can be
customized with CSS (size, color, shadow, etc.)
<script src="https://kit.fontawesome.com/yourcode.js"
crossorigin="anonymous"></script>
Bootstrap Icons
To use the Bootstrap glyphicons, add the following line inside the
<head> section of your HTML page:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap
.min.css">
CSS Links
When setting the style for several link states, there are some order
rules:
a:hover MUST come after a:link and a:visited
CSS Lists
CSS Tables
Table Borders
The example below specifies a black border for <table>, <th>, and <td>
elements:
Full-Width Table
The table above might seem small in some cases. If you need a table
that should span the entire screen (full-width), add width: 100% to the
<table> element:
If you only want a border around the table, only specify the border
property for <table>:
The width and height of a table are defined by the width and height
properties.
The example below sets the width of the table to 100%, and the height
of the <th> elements to 70px:
To create a table that should only span half the page, use width: 50%:
Horizontal Alignment
The text-align property sets the horizontal alignment (like left, right, or
center) of the content in <th> or <td>.
Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom,
or middle) of the content in <th> or <td>.
The following example sets the vertical text alignment to bottom for
<td> elements:
Table Padding
To control the space between the border and the content in a table, use
the padding property on <td> and <th> elements:
Horizontal Dividers
Add the border-bottom property to <th> and <td> for horizontal
dividers:
Hoverable Table
Use the :hover selector on <tr> to highlight table rows on mouse over:
Table Color
The example below specifies the background color and text color of
<th> elements:
Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too
small to display the full content:
The display property is the most important CSS property for controlling
layout.
Block-level Elements
A block-level element always starts on a new line and takes up the full
width available (stretches out to the left and right as far as it can).
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>
Inline Elements
An inline element does not start on a new line and only takes up as
much width as necessary.
<span>
<a>
<img>
Display: none;
However, the element will still take up the same space as before. The
element will be hidden, but still affect the layout:
The position property specifies the type of positioning method used for
an element.
static
relative
fixed
absolute
sticky
Elements are then positioned using the top, bottom, left, and right
properties. However, these properties will not work unless the position
property is set first. They also work differently depending on the
position value.
position: sticky;
Overlapping Elements
hidden - The overflow is clipped, and the rest of the content will be
invisible
scroll - The overflow is clipped, and a scrollbar is added to see the rest
of the content
Note: The overflow property only works for block elements with a
specified height.
overflow: visible
You can use the overflow property when you want to have better
control of the layout. The overflow property specifies what happens if
content overflows an element's box.
overflow-x and overflow-y
The CSS clear property specifies what elements can float beside the
cleared element and on which side.
The float property is used for positioning and formatting content e.g. let
an image float left to the text in a container.
none - The element does not float (will be displayed just where it occurs
in the text). This is default
The following example specifies that an image should float to the left in
a text:
The clear Property
The clear property specifies what elements can float beside the cleared
element and on which side.
both - No floating elements allowed on either the left or the right side
The opacity property is often used together with the :hover selector to
change the opacity on mouse-over:
Navigation Bars
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Content
The layout in this section, often depends on the target users. The most
common layout is one (or combining them) of the following:
With the CSS transform property you can use the following 2D
transformation methods:
skew()
CSS 3D Transforms
With the CSS transform property you can use the following 3D
transformation methods:
rotateX(The rotateX method rotates an element around its X-axis at a
given degree:)
CSS Transitions
transition
transition-delay
transition-duration
transition-property
transition-timing-function
Note: If the duration part is not specified, the transition will have no
effect, because the default value is 0.
Notice that when the cursor mouses out of the element, it will
gradually change back to its original style.
CSS Animations
@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
You can change as many CSS properties you want, as many times as you
want.
To use CSS animation, you must first specify some keyframes for the
animation.
Keyframes hold what styles the element will have at certain times.
When you specify CSS styles inside the @keyframes rule, the animation
will gradually change from the current style to the new style at certain
times.
In the example above we have specified when the style will change by
using the keywords "from" and "to" (which represents 0% (start) and
100% (complete)).
It is also possible to use percent. By using percent, you can add as many
style changes as you like.
ease - Specifies an animation with a slow start, then fast, then end
slowly (this is default)
linear - Specifies an animation with the same speed from start to end
Center an Image
To center an image, set left and right margin to auto and make it into a
block element:
Transparent Image
The opacity property can take a value from 0.0 - 1.0. The lower value,
the more transparent
Change the color of all images to black and white (100% gray):
img {
filter: grayscale(100%);
The value of the box-reflect property can be: below, above, left , or
right.
Here is where the object-fit property comes in. The object-fit property
can take one of the following values:
fill - This is default. The image is resized to fill the given dimension. If
necessary, the image will be stretched or squished to fit
contain - The image keeps its aspect ratio, but is resized to fit within the
given dimension
cover - The image keeps its aspect ratio and fills the given dimension.
The image will be clipped to fit
CSS Button
CSS Resizing
To resize: Click and drag the bottom right corner of this div element.
div{ coloumn-count:3;}
h2 {
column-span: all;
var(--name, value);
This means: When you set the width/height of an element, the element
often appears bigger than you have set (because the element's border
and padding are added to the element's specified width/height).
Before the Flexbox Layout module, there were four layout modes:
To start using the Flexbox model, you need to first define a flex
container.
The flex-wrap property specifies whether the flex items should wrap or
not.
The flex-flow property is a shorthand property for setting both the flex-
direction and flex-wrap properties.
The flex-start value aligns the flex items at the beginning of the
container (this is default):
The flex-end value aligns the flex items at the end of the container:
The space-around value displays the flex items with space before,
between, and after the lines:
The space-between value displays the flex items with space between
the lines:
<noscript> provide alternate content for user that have disable script in
browser or have browser that does not support client-side scripting.