HTML/ CSS
<body> Contains all the Main Contents of Your Web Page
<body> </body>
height The height and width properties are used to set the height and width of an element. The height and width can be set to auto (this is default. Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent (%) of the containing block.
div { height: 100px; width: 500px; background-color: powderblue; }
width The height and width properties are used to set the height and width of an element. The height and width can be set to auto (this is default. Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent (%) of the containing block.
div { height: 200px; width: 50%; background-color: powderblue; }
font-size the font-size property sets the size of the text. Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs. Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs. The font-size value can be an absolute, or relative size. Absolute size: Sets the text to a specified 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: Sets the size relative to surrounding elements Allows a user to change the text size in browsers
h1 { font-size: 40px; } h2 { font-size: 30px; } p { font-size: 14px; }
float The float property is used for positioning and layout on web pages. The float property can have one of the following values: left - The element floats to the left of its container right- The element floats to the right of its container none - The element does not float (will be displayed just where it occurs in the text). This is default inherit - The element inherits the float value of its parent
img { float: right; }
text-align To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container. The element will then take up the specified width, and the remaining space will be split equally between the two margins:
.center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; }
<!DOCTYPE html> Tells the Computer that This is a Document Written in HTML
<!DOCTYPE html>
HTML Stands for Hypertext Markup Language and Is Used to Create what you see on a webpage
<!DOCTYPE html> <html> <!-- Created 2010-01-01--> <head> <title> sample </title> </head> <body> <p> my name is tyler. </p> </body> </html>
HTML Tag Special Information that Shows the Computer Where to Put Things on the Page
<a href="https://www.w3schools.com">Visit W3Schools.com!</a>
Hyperlink HTML links are hyperlinks. You can click on a link and jump to another document. When you move the mouse over a link, the mouse arrow will turn into a little hand.
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
color Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
<h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem ipsum...</p>
<head> Contains Information (Sometimes Called "Metadata") About Your Web Page
<head> </head>
<html> Indicates the Beginning of Your Code Written in HTML
<html> </html>
HTML Element A Section a Website that Includes an Opening <html> and a Closing </html>
<html></html>
Image In HTML, images are defined with the <img> tag. The <img> tag is empty, it contains attributes only, and does not have a closing tag. The src attribute specifies the URL (web address) of the image:
<img src="img_chania.jpg" alt="Flowers in Chania">
List item What's in between li's <li>Coffee</li>
<li>Coffee</li>
Ordered List An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default:
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
<p> Tag Is Placed Around Text to Indicate That it is part of a Paragraph
<p> </p>
Unordered List Unordered List is the one with bullets An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default:
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
<h2> A title or a summary in big font
Big
<h1> A title or summary for a document or section of a document. In Biggest Font
Biggest
Website content The Information found on the Page Including Pictures Text and Background
Content, Search Engine, Browsers, World Wide Web, Internet, Networks and Computers
<h3> A title or a summary in Medium Big font
Medium Big
<h4> A title or a summary in Medium Small Font
Medium Small
<h5> A title or a summary in Small Font
Small
<h6> A title or a Summary in Smallest Font
Smallest
Website Structure The Job of Different Pieces of Information on the Webpage Used to Create the Page for the Computer
Styles.css-= where you decorate it index html-=home page
text-decoration The text-decoration property is used to set or remove decorations from text. The value text-decoration: none; is often used to remove underlines from links:
a { text-decoration: none; }
background color The background-color property specifies the background color of an element. The background color of a page is set like this:
body { background-color: lightblue; }
border-radius The border-radius property is used to add rounded borders to an element:
p { border: 2px solid red; border-radius: 5px; }
font - family The CSS font properties define the font family, boldness, size, and the style of a text. In CSS, there are two types of font family names: generic family - a group of font families with a similar look (like "Serif" or "Monospace") font family - a specific font family (like "Times New Roman" or "Arial")
p { font-family: "Times New Roman", Times, serif; }
margin All the margin properties can have the following values: auto - the browser calculates the margin length - specifies a margin in px, pt, cm, etc. % - specifies a margin in % of the width of the containing element inherit - specifies that the margin should be inherited from the parent element Tip: Negative values are allowed. The following example sets different margins for all four sides of a <p> element:
p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; }
border-style The CSS border properties allow you to specify the style, width, and color of an element's border. The border-style property specifies what kind of border to display. The following values are allowed: 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 The border-style property can have from one to four values (for the top border, right border, bottom border, and the left 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;}
border-color The border-color property is used to set the color of the four borders. The color can be set by: name - specify a color name, like "red" Hex - specify a hex value, like "#ff0000" RGB - specify a RGB value, like "rgb(255,0,0)" transparent The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border). If border-color is not set, it inherits the color of the element.
p.one { border-style: solid; border-color: red; } p.two { border-style: solid; border-color: green; } p.three { border-style: solid; border-color: red green blue yellow; }
border-width The border-width property specifies the width of the four borders. 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-width property can have from one to four values (for the top border, right border, bottom border, and the left border).
p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: medium; } p.three { border-style: solid; border-width: 2px 10px 4px 20px; }