HTML and CSS
©
© is a character code, which web browsers interpret as the copyright symbol: ©.
Div
A block level container (or 'division' of the web page) for content with no semantic meaning. Syntax: <div>This is a div element.</div>
Attribute selectors
HTML elements are also able to be selected by their attributes. Example: img[src] Selects <img src="myimage.png"> but not <img> Example: a[href="http://codecademy.com"] { color: purple; } /* HTML Selected: <a href="http://codecademy.com"> */ Example: input[type="text"] { width: 100px; } /* HTML Selected: <input type="text"> */ Example: input[required] { border: 1px red solid; } /* HTML Selected: <input type="text" required> */
How does external stylesheet css syntax?
Example code: h1 { color: red; }
Inline css: How to change more than one thing about an attribute
Just add a semi-colon between each bit. For example: <h2 style="color: green; font-size:12px"> Some Text </h2>
text-decoration
Links have a lot of the same properties as regular text: you can change their font, color, size, and so on. But links also have a property, text-decoration, that you can change to give your links a little more custom flair. Text decoration is what gives the link the underline. Example code: a { text-decoration: none; }
target_blank
Load the result into a new unnamed browsing context.
base href
The base URL to be used throughout the document for relative URL addresses. This attribute specifies the URL of the linked resource. A URL might be absolute or relative. If this attribute is specified, this element must come before any other elements with attributes whose values are URLs. Absolute and relative URLs are allowed. It can be a link to another website when used in the form a href.
external stylesheet css: border
The border property can be used to visually define a page element's outer edge. In CSS, the border property's value requires three parts: thickness: Sets the thickness of the border, using pixels, ems, or rems. type: Sets the border type. Common options are solid, dotted, and dashed. There are many others. color: sets the border's color, using named colors, HEX, or RGB values. The CSS below gives a paragraph element a solid black border that is 2 pixels thick Example code: p { border: 2px solid black; }
link title
The title attribute has special semantics on the <link> element. When used on a <link rel="stylesheet"> it defines a preferred or an alternate stylesheet. Incorrectly using it may cause the stylesheet to be ignored.
link rev
The value of this attribute shows the relationship of the current document to the linked document, as defined by the href attribute. The attribute thus defines the reverse relationship compared to the value of the rel attribute. Link types values for the attribute are similar to the possible values for rel.
Properties
Ways in which you can style a given HTML element. (In this case, color is a property of the p elements.) In CSS, you choose which properties you want to affect in your rule.
Element selectors
You are able to select HTML elements first by simply using the name of the element. It selects all HTML element(s) of the specified type. Example: body { background-color: #333; } Example: h1 { color: blue; } Example: a { text-underline: none; }
Class name selectors
You can also select HTML elements by their Class name. Unlike ID selectors, Class selectors select all elements with a matching class. Example: .my-class Selects <p class="my-class"> and <a class="my-class"> Example: a.link { font-size: 12px; } /* HTML Selected: <a href="http://google.com" class="link">, <a href="http://codecademy.com" class="link jumbo"> */ Example: .jumbo { text-size: 1000px; } /* HTML Selected: <a href="http://codecademy.com" class="link jumbo">, <span class="jumbo"> */
Selecting multiple elements with css
You can also select multiple types of elements and apply a single rule set to all of them. Include multiple selectors separated by commas. Example: p,li,h1 { color: red; }
What is main.css?
main.css is an external style sheet. Using external stylesheets is one of the most popular ways to write CSS. Inline CSS is another method.
width
width (of an element) Example: body { width: 600px }
How do you type elements?
<element> </element>
span
<span> allows you to control styling for smaller parts of your page, such as text. For example, if you always want the first word of your paragraphs to be red, you can wrap each first word in <span></span> tags and make them red using CSS! Example code: <span style="color: red">Word</span>
Declaration
A single rule like color: red; specifying which of the element's properties you want to style.
Pseudo class selectors
Pseudo Selectors can be used to narrow down a selection with certain rules. Example: li:first-child { color: red; } /* This selects only <li> elements that have no elements before them <ul> <li>Selected; will be red</li> <li>Not selected</li> <li>Not selected</li> </ul> */ li:last-child { color: red; } /* This does the opposite; only the last <li> will be red. */ Example: a:hover { text-decoration: underline; } /* Will underline all links when the user puts their mouse over them */ a:active { font-weight: bold; } /* Will make all links bold while the user is clicking on them. */
Selectors
Selectors are used in CSS to select the parts of the HTML that are being styled. You can use several different methods for selecting an element like element selectors, class name selectors etc.
text-shadow
sets a drop shadow on the text inside an element
class
A class element groups elements together into sections of the web page, such as a navigation bar, the main body, and the footer. HTML elements can have one or more classes, separated by spaces. You can style elements using CSS by selecting them with their classes. Classes are useful when you have a bunch of elements that should all receive the same styling. Rather than applying the same rules to several selectors, you can simply apply the same class to all those HTML elements, then define the styling for that class in the CSS tab. Classes are assigned to HTML elements with the word class and an equals sign, like so: <div class="square"></div> <img class="square"/> <td class="square"></td> Classes are identified in CSS with a dot (.), like so: .square { height: 100px; width: 100px; } This allows you to take elements of different types and give them the same styling. Example: <div class="big-box yellow-box">This is a big yellow box.</div>
crossorigin "use-credentials"
A cross-origin request (i.e. with Origin: HTTP header) is performed with credential is sent (i.e. a cookie, a certificate and HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials: HTTP header), the image will be tainted and its usage restricted.
crossorigin "anonymous"
A cross-origin request (i.e. with Origin: HTTP header) is performed. But no credential is sent (i.e. no cookie, no X.509 certificate and no HTTP Basic authentication is sent). If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin: HTTP header) the image will be tainted and its usage restricted.
base target
A name or keyword indicating the default location to display the result when hyperlinks or forms cause navigation, for elements that do not have an explicit target reference. It is a name of, or keyword for, a browsing context (for example: tab, window, or inline frame). The following keywords have special meanings: _self, _blank, _parent, _top. Example code: <base target="_blank" href="http://www.example.com/page.html">
pseudo class selector
A pseudo-class selector is a way of accessing HTML items that aren't part of the document tree. For example, we saw we could change a link's text-decoration property to make it something other than blue and underlined. Using pseudo selectors, you can control the appearance of unvisited and visited links—even links the user is hovering over but hasn't clicked! If there is a space between the selector and the pseudo class selector, then the code will not work. The CSS syntax for pseudo selectors is selector:pseudo-class_selector { property: value; } Example code: a:hover { color: #cc0000; font-weight: bold; text-decoration: none; }
Children
An element that is an immediate descendent of another element or nested within another element is called a child. These become useful when using CSS child selectors and psuedo-elements. Example: <ul id="parent"> <li id="child">I'm a child of parent!</li> </ul>
attribute
Attributes contain extra information about the element which you don't want to appear in the actual content. An attribute should always have: A space between it and the element name (or the previous attribute, if the element already has one or more attributes.) The attribute name, followed by an equals sign Opening and closing quote marks wrapped around the attribute value.
Inline css: background-color
Background-color is the color behind an element's content and padding. The style attribute is used again, and you set it equal to "background-color: red" (or whatever color you want). For example, here's how to change the background color of a the <body> tag to red: <body style="background-color: red;">Hello!</p>
What does CSS contribute to web pages?
CSS is used to control the design and layout of the page.
Resizing your browser
Click ctrl + 0
Comments in CSS
Comments in CSS are signified by a forward-slash and asterisk. Example: /* This is a single line comment */ Example: /* This is a multi-line comment */
link integrity
Contains inline metadata, a base64-encoded cryptographic hash of a resource (file) you're telling the browser to fetch, that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation.
Defining many properties
Each CSS rule can have as many properties as you like. Each of them applies to the elements that the selector applies to. Example: h1 { font-size: 24px; font-weight: bold; border: 1px solid black; color: pink; } /* This will make all <h1> headers big, bold, pink, and inside of a thin black rectangle! */
What does the external stylesheet do?
External Stylesheet: CSS file that styles an HTML file externally via the HTML link element.
position:fixed
Finally, fixed positioning anchors an element to the browser window—you can think of it as gluing the element to the screen. If you scroll up and down, the fixed element stays put even as other elements scroll past.
external stylesheet css: flex
Flex is a display value that allows us to easily align multiple page elements vertically or horizontally. Example code: { display: flex; }. We can make sure no element moves off the page by using flex-wrap: wrap; Finally, to center rows of elements, we can use justify-content: center; .parent { display: flex; flex-wrap: wrap; justify-content: center; }
external stylesheet css: font-size
Font-size can either be in px, rem, or em. Example code: h1 { font-size: 60px; }
What are the two programming languages used in web pages?
HTML and CSS
What does HTML contribute to web pages?
HTML is used to establish a page's structure. It also lets us add text, links and images.
HTML
HTML stands for Hyper Text Markup Language. It is the language used to create all websites.
Lists
HTML supports two kinds of lists: ordered lists and unordered lists. Within lists each individual list item has its own tag.
Headings
Heading elements like <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> are six levels of document headings, ranging from largest to smallest, that allow you to break up the document into logical sections. For example, the word 'Headings' above is wrapped in a <h2> tag. Syntax: <h1> This is a header! </h1>
ID selectors
ID selectors are used to select only a single item on a page. Like the term ("identification") indicates, ID selectors will ONLY select the first element with a matching ID. The element on the page with the specified ID (on a given HTML page, you're only allowed one element per ID). Example: #my-id Selects <p id="my-id"> or <a id="my-id"> Example: #thatThingINeededToStyle { color: blue; font-size: 24px; } /* HTML Selected: <span id="thatThingINeededToStyle"> */ Example: a#codecademy { color: purple; } /* HTML Selected: <a href="http://codecademy.com" id="codecademy"> */
id
IDs, on the other hand, are great for when you have exactly one element that should receive a certain kind of styling. IDs are assigned to HTML elements with the word id and an equals sign: <div id="first"></div> <div id="second"></div> <p id="intro"></p> IDs are identified in CSS with a pound sign (#): #first { height: 50px; } #second { height: 100px; } #intro { color: #FF0000; } This allows you to apply style to a single instance of a selector, rather than all instances. An id attribute can only be used once because the id is unique to the element it is assigned to. Ids have greater specificity than classes. If an HTML element is using both id and class attributes, the CSS rule for the id will take precedence over that of the class. Below we will use an id selector to style a single HTML element differently than others of that kind on the webpage. Any HTML element can have an id attribute to identify it. id elements should always be unique to that single element, and each element should never have more than one id. Example: <div id="my-box">This is my box! Put your text in some other box.</div>
position:static
If you don't specify an element's positioning type, it defaults to static. This just means "where the element would normally go." If you don't tell an element how to position itself, it just plunks itself down in the document.
Commands overriding each other
If you say p { font-family: Garamond}, all 'p's will have the font Garamond. BUT if you say li p {font-family: Verdana}, 'p's outside of 'li's will be in Garamond, and 'p's INSIDE 'li's will be in Verdana. The more specific your selectors are, the higher importance CSS gives to the styling you apply! Greater specificity makes CSS prioritize that particular styling.
element{ clear: /*right, left, or both*/}
If you tell an element to clear: left, it will immediately move below any floating elements on the left side of the page; it can also clear elements on the right. If you tell it to clear: both, it will get out of the way of elements floating on the left and right!
>
If you want to grab direct children—that is, an element that is directly nested inside another element, with no elements in between—you can use the > symbol, like so: div > p { /* Some CSS */ } This only grabs <p>s that are nested directly inside of <div>s; it won't grab any paragraphs that are, say, nested inside lists that are in turn nested inside <div>s.
external stylesheet css: background-image
In CSS, the background-image property sets a background image of your choice for a given selector, as seen below. Example code: h1 { background-image: url("https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-2/bg.jpg"); }
Padding-top
Individually setting the top padding
external stylesheet css: font-family
It changes font type. Example code: h1 { font-family: Georgia, serif; } Above, the font-family property of the h1 selector is set to the value of Georgia, with serif as a fallback font. Fallback fonts are included in case a visitor's web browser does not support the first font. Sometimes, more than one fallback font is included.
external stylesheet css: color
It changes something's color. Example code h1 { color: red; }. CSS comes equipped with 140 named colors, such as red, used above. For many situations, these named colors will suffice. However, web developers who want to get even more exact with their color choices can use hexadecimal and RGB color values. Hexadecimal color (#RRGGBB): Hexadecimal values that represent mixtures of red, green and blue. For example, red can be expressed with the hexadecimal value of #FF0000: the value ff represents red, 00 represents green, and 00 represents blue. RGB (Red, Green, Blue) colors: Color created by three numbers representing red, green, and blue. When mixed together, the three values create a specific color. For example: purple can be represented as rgb(128,0,128).
external stylesheet css: background-size
It controls the size of the chosen background image. Example code: h1{ background-size: cover; }
*
It is a very special selector you can use to apply CSS styling to every element on the page. For example, if you type: * { border: 2px solid black; } You'll create a two-pixel wide solid black border around every element on the HTML page.
first-child
It is another useful pseudo-class selector. It's used to apply styling to only the elements that are the first children of their parents. For instance: p:first-child { color: red; } Would make all paragraphs that are the first children of their parent elements red.
alt
It is short for the alternative attribute. In this attribute, you specify descriptive text for users who cannot see the image, because they are visually impaired, or if something goes wrong causing the image not to display the alt text will replace the image. The key words about alt text are "descriptive text". In the alt text you write should provide the reader with enough information to have a good idea of what the image conveys. Example: <img src="images/firefox-icon.png" alt="My test image">
th colspan
It makes a title on a table that spans across all the rows. By default, table cells take up 1 column. If we want a table cell to take up the space of 3 columns instead of 1, we can set the colspan attribute to 3. Example code: <th colspan="3">3 columns across!</th>
padding: value
It will give you padding the same value on all sides for example: padding: 10px will give your HTML element 10 pixels of padding on all sides.
target_parent
Load the result into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
target_self
Load the result into the same browsing context as the current one. This value is the default if the attribute is not specified.
target_top
Load the result into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
Inline css: text-align
Often it is nice to be able to move the text around. To do so, we again use the style attribute. And then we use "text-align:left" (or right, or center) to determine the location of the text. <h1 style="text-align:center"> Some Text </h1>
Paragraphs
One of the most common tags in HTML - it denotes a paragraph of text. It often has other elements nested inside of it, such as <img/>, <a>, <strong> and <em>. You can use heading tags: <h1> through <h6> to change the size of the text in the paragraph. You could also use CSS to change the size of the text. Syntax: <p>This is paragraph text!</p>
Ordered Lists
Ordered lists' items are denoted with numbers. Example: My numbered list <ol> <li>First item!</li> <li>Second item!</li> <li>Last item!</li> </ol>
position:relative
Relative positioning is more straightforward: it tells the element to move relative to where it would have landed if it just had the default static positioning. If you give an element relative positioning and tell it to have a margin-top of 10px, it doesn't move down ten pixels from any particular thing—it moves down ten pixels from where it otherwise would have been.
How to pick colors using hex numbers
Search for "hex color palette" or "hex color picker" with your favorite web browser to find a bunch of options!
Inline css: font-family
Syntax <h1 style="font-family: Arial">Title</h1>
Tags and Elements
Tags are basic labels that define and separate parts of your markup into elements. They are comprised of a keyword surrounded by angle brackets <>. Content goes between two tags and the closing one is prefixed with a slash (Note: there are some self-closing HTML tags, like image tags). Tags also have attributes, which are Syntax: <tag attribute='value'>content</tag keyword>
Tables
The <table> tag. Tables are very useful to store tabular data so it is easy to read! It is used when you want to present information neatly in a table with rows and columns. You can make rows in the table by using the <tr> tag/table row tag. The <td> elements adds table data. The <head> HTML tag contains information about a web page (e.g. its title), and in the same way, the <thead> tag can be thought of as containing information about a table. The <body> tag contains the contents of the web page. The <tbody> tag contains the tabular data. You add text to a <thead> similar to a <tbody>, like this: <thead> <tr> <th> Name </th> <th> Favorite Color </th> </tr> </thead> First we have an opening <thead> tag for the table head. Then we have an opening <tr> tag for the row. (to start the row) After that, a <th></th> cell for the Name column heading. Notice that we use <th></th> for the table heading cells instead of<td></td>. Then another <th></th> cell for the Favorite Color column heading. Finally, we close the row element with a closing </tr> tag, and close out the table heading element with a closing </thead> tag. Example: <tbody> <tr> <td>Banana</td> <td>$56.75</td> </tr> <tr> <td>Yogurt</td> <td>$12.99</td> </tr> </tbody> <tfoot> <tr> <td>Total</td> <td>$69.74</td> </tr> </tfoot> </table>
external stylesheet css: position
The CSS position property enables you to position HTML elements in exact locations on a webpage. One useful value for this property is relative. This value positions page elements on a webpage relative to where they would normally appear. By first setting position: relative;, you can then use the CSS properties top, left, bottom, and right to shift an element away from where it would have normally appeared on the page. The code snippet below moves a div with the class container 10px away from the up and 20px away from the left side of the page. .container { position: relative; top: 10px; left: 20px; }
<base>
The HTML <base> element specifies the base URL to use for all relative URLs contained within a document. There can be only one <base> element in a document. The base tag has no content inside it/it is an empty element. There is no closing tag for the base element. The permitted parent elements of a base tag is any <head> that doesn't contain any other <base> elements. It can have to forms: base href= or base target=. Example: <base href="http://www.example.com/page.html"> <base target="_blank" href="http://www.example.com/page.html">
Horizontal rules
The HTML <hr> element represents a thematic break between paragraph-level elements (for example, a change of scene in a story, or a shift of topic with a section). In previous versions of HTML, it represented a horizontal rule. It may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms. This tag creates a black line one pixel thick that runs the all the way across its container. It can be styled to look differently with CSS. It has no permitted content, because it is an empty element. It must have start tag, but must not have an end tag. It can be placed in any element that accepts flow content. Example: This text is divided <hr> ...from this text!
<meta>
The HTML <meta> element represents any metadata information that cannot be represented by one of the other HTML meta-related elements (<base>, <link>, <script>, <style> or <title>). It has no permitted content/it is an empty element. There is no ending tag. It's permitted parent elements are <meta charset>, <meta http-equiv>: a <head> element. Depending on the attributes set, the kind of metadata can be one of the following: If name is set, it is document-level metadata, applying to the whole page. If http-equiv is set, it is a pragma directive, i.e. information normally given by the web server about how the web page should be served. If charset is set, it is a charset declaration, i.e. the charset used for the serialized form of the webpage. If itemprop is set, it is user-defined metadata, transparent for the user-agent as the semantics of the metadata is user-specific.
profile
The URIs of one or more metadata profiles, separated by white space.
external stylesheet css: display
The display property that determines how the selected element will be arranged in relation to other HTML elements on the page. Two types of display. Block: each HTML element appears on its own line on the webpage. Or the elements can be displayed inline. While being displayed inline the elements appear on the same line as their neighboring elements on the webpage.
external stylesheet css: float
The float property is used to float HTML elements left or right of neighboring elements. Example code: p { float: left; }
font-family
The font-family property sets the font of an HTML element's text. Syntax: p { font-family: Arial, Helvetica, sans-serif; }
external stylesheet css: margin
The margin element sets the amount of space between an HTML element and the next nearest element(s). The CSS below ensures 2rems of space between elements with the class answer and surrounding page elements. .answer { margin: 2rem; }. The margin property creates space on all sides of a page element. It's also possible to set separate margin spacings on each side of an element. Additional margin properties: margin-top: Sets the top margin. margin-bottom: Sets the bottom margin. margin-left: Sets the left margin. margin-right: Sets the right margin.
Margin
The margin is the space around the element. The larger the margin, the more space between our element and the elements around it. We can adjust the margin to move our HTML elements closer to or farther from each other. Here, the div with id 'box' will get 10px of margin above and below it, and 5px of margin to the left and right. Example: #box { margin: 10px 5px 10px 5px; }
external stylesheet css: padding
The padding element sets the amount of space between an element's content and its border. Example code: p { padding: 20px; }
Padding
The padding is the spacing between the content and the border (edge of the element.). We can adjust this value with CSS to move the border closer to or farther from the content. Here, the div with id 'box' will get 10px of padding all around it. Example: #box { padding: 10px; }
Universal selector
The universal selector (*) may be used to select all the elements in a particular range. Be aware that the universal selector is the most performance taxing selector, and should be used sparingly. Example: * { background-color: blue; } /* Selects ALL HTML elements in the page */ Example: body * { color: red; } /* Selects ALL children of the body */ Example: div > * { color: red; } /* Selects ALL first-level children of all divs on the page */
link methods
The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the title attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4.
Video
The video element adds a video to the webpage. The video elements is composed of many parts. width and height: Set the size of the screen that displays the video. controls: Adds play, pause and volume control. source src: Sets the URL of the video to play. type: Specifies different video formats. Example: <video width="320" height="240" controls> <source src="video-url.mp4" type="video/mp4"> </video>
Semantic Formatting
These tags are similar to the previously mentioned formatting tags which have fallen out of favor. The difference is that these tags have semantic value (meaning). <strong> is used for something that is important. Example: <p><strong><strong>Warning:</strong>Acid can cause severe burns</strong> </p>
meta charset
This attribute declares the character encoding used of the page. It can be locally overridden using the lang attribute on any element. This attribute is a literal string and must be one of the preferred MIME names for a character encoding as defined by the IANA. Though the standard doesn't request a specific character encoding, it gives some recommendations: Authors are encouraged to use UTF-8. Authors should not use ASCII-incompatible encodings (i.e. those that don't map the 8-bit code points 0x20 to 0x7E to the Unicode 0x0020 to 0x007E code points) as these represent a security risk: browsers not supporting them may interpret benign content as HTML Elements. This is the case of at least the following charsets: JIS_C6226-1983, JIS_X0212-1990, HZ-GB-2312, JOHAB, the ISO-2022 family, and the EBCDIC family. Authors must not use CESU-8, UTF-7, BOCU-1 and SCSU, also falling in that category and not intended to be used on the web. Cross-scripting attacks with some of these encodings have been documented. Authors should not use UTF-32 because not all HTML5 encoding algorithms can distinguish it from UTF-16.
link charset
This attribute defines the character encoding of the linked resource. The value is a space- and/or comma-delimited list of character sets as defined in RFC 2045. The default value is iso-8859-1.
link sizes
This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the rel contains the icon link types value. It may have the following values: any, meaning that the icon can be scaled to any size as it is in a vectorial format, like image/svg+xml. a white-space separated list of sizes, each in the format <width in pixels>x<height in pixels> or <width in pixels>X<height in pixels>. Each of these sizes must be contained in the resource.
meta content
This attribute gives the value associated with the http-equiv or name attribute, depending on the context.
link hreflang
This attribute indicates the language of the linked resource. It is purely advisory. Allowed values are determined by BCP47. Use this attribute only if the href attribute is present.
link type
This attribute is used to define the type of the content linked to. The value of the attribute should be a MIME type such as text/html, text/css, and so on. The common use of this attribute is to define the type of style sheet linked and the most common current value is text/css, which indicates a Cascading Style Sheet format.
link disabled
This attribute is used to disable a link relationship. In conjunction with scripting, this attribute could be used to turn on and off various style sheet relationships.
link rel
This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of the link types values. The most common use of this attribute is to specify a link to an external style sheet: the rel attribute is set to stylesheet, and the href attribute is set to the URL of an external style sheet to format the page. WebTV also supports the use of the value next for rel to preload the next page in a document series.
link media
This attribute specifies the media which the linked resource applies to. Its value must be a media query. This attribute is mainly useful when linking to external stylesheets by allowing the user agent to pick the best adapted one for the device it runs on.
<meta charset="utf-8">
This element sets the character set your document should use to utf-8, which includes most characters from all known human languages. Essentially it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.
link crossorigin
This enumerated attribute indicates whether CORS must be used when fetching the related image. CORS-enabled images can be reused in the <canvas> element without being tainted. The allowed values are: "anonymous", and "use-credentials". When not present, the resource is fetched without a CORS request (i.e. without sending the Origin: HTTP header), preventing its non-tainted used in <canvas> elements. If invalid, it is handled as if the enumerated keyword anonymous was used.
display: inline-block
This makes the element a block box, but will allow other elements to sit next to it on the same line.
display: block
This makes the element a block box. It won't let anything sit next to it on the page! It takes up the full width.
display: none
This makes the element and its content disappear from the page entirely!
display: inline
This makes the element sit on the same line as another element, but without formatting it like a block. It only takes up as much width as it needs (not the whole line).
Line breaks
This tag is used in a block of text to force a line break. This is to be used for things which are a single paragraph, but where this formatting is necessary such as poems or addresses. To separate paragraphs, separate each paragraph into a separate element instead. The resulting element on a web page will look like: Example: <p> Some text <br/> that spans two lines </p>
Title
This tag tells the browser what to display as the page title at the top and tells search engines what the title of your site is. It goes inside <head> tags. Try and make your page titles descriptive, but not overly verbose. It is the fourth line of code in a website. Example: <title> HTML Glossary </title>
margin:auto
This tells the document to automatically put equal left and right margins on our element, centering it on the page.
Inline css: color
To change the color of text, simply add the style attribute in the opening tag, then make the style equal to "color:blue" (or whatever color you like). For example: <h2 style="color:red"> Some text </h2>
Property value
To the right of the property, after the colon, we have the property value, to choose one out of many possible appearances for a given property (there are many color values besides red).
Unordered lists
Unordered lists are just lists whose items are denoted with bullet points. <Ul> elements are unordered lists. <li> elements are each bullet points in the unordered list. Usually unordered lists are used in the navigation bar elements are used in the navigation bar Example: Shopping list <ul> <li>Dish soap</li> <li>Kitty litter</li> <li>Tomato sauce</li> </ul>
Inline css: font-size
We use the style attribute. We make it equal to font-size, followed by a colon, the size you want, and end it with px (short for "pixels"). For example: <p style="font-size: 40px"> Some text </p>
nth-child
Well done! You can actually select any child of an element after the first child with the pseudo-class selector nth-child; you just add the child's number in parentheses after the pseudo-class selector. For example, p:nth-child(2) { color: red; } Would turn every paragraph that is the second child of its parent element red. The element that is the child goes before :nth-child; its parent element is the element that contains it.
position:absolute
When an element is set to position: absolute, it's then positioned in relation to the first parent element it has that doesn't have position: static. If there's no such element, the element with position: absolute gets positioned relative to <html>.
negative margin
When you give CSS a positive padding or margin value, it puts that space between the element and its reference: for instance, if you have a <div> and you give it a margin-left of 20px, it puts twenty pixels between the left margin of that <div> and the side of the screen. This effectively moves the <div> twenty pixels to the right. If you want to move an element in the other direction, you can give CSS a negative value: margin-left: -20px will move the element twenty pixels to the left.
padding: value value value value
You can also set an element's margins all at once: you just start from the top margin and go around clockwise (going from top to right to bottom to left). For instance, margin: 1px 2px 3px 4px; will set a top margin of 1 pixel, a right margin of 2, a bottom of 3, and a left of 4.
Child selectors
You can also use multiple selectors to get the exact elements you want, by using parental nesting. By using the "greater-than" symbol (>), you can select only the direct children of an element, going down only one level. Example: ul > li { display: inline-block } /* Selects only the first-level list items in all unordered lists in the HTML */ Example: ul a { text-underline: none; } /* Selects all anchors which have an unordered list their ancestry */ Example: ul + span { display: inline; } /* Selects only spans that directly follow an unordered list */ Example: a ~ h1 { color: blue; } /* Selects all h1 elements that are in the general vicinity of an anchor */
How do you change how much space a element takes up?
You can change it with the <height> and <width> elements.
Basic formatting/How to make things bold, italicized, and underlined
You can easily format text to be bold, italic, or underlined using simple formatting tags. Example: This text is <b>bold</b>, <i>italicized</i>, and <u>underlined</u>. You can also use <strong>Text </strong> tags to make something bold. You can use <em>Text</em> tags to make something italicized.
What do you do if you are uncertain that a users computer can use the font-family you coded for?
You can write this: p { font-family: Tahoma, Verdana, sans-serif; } CSS will first try to apply Tahoma to your paragraphs. If the user's computer doesn't have that font, it will try Verdana next, and if that doesn't work, it will show a default sans-serif font.
How do you make an image a link?
You create an <a> tag, and instead of putting text in the <a> tag you put an image tag there.
So what if you want to grab <p>s that are inside two <div>s, and not all <p>s?
You select those in the CSS tab like this: div div p { /*CSS stuff!*/ }
pseudo class selector for links
a:link: An unvisited link. a:visited: A visited link. a:hover: A link you're hovering your mouse over.
How do you view a webpage's source code
ctrl + U
em
em: A relative value that changes in proportion to the size of the parent element. For example, if a parent element has font-size: 20px;, child elements with font-size: 1em; would be equivalent to 20px. Child elements with font-size: 0.5em; would be equivalent to 10px (a halving) and so on.
px
px stands for pixels. Pixels is a standard unit of measurement for sizing fonts and other HTML elements.
rem
rem: Represents the default font size for the web browser. Rems can be used to ensure that HTML elements scale in proportion to each other on various web browsers and screen sizes. On most web browsers, 1rem is equivalent to 16px, 2rem is equivalent to 32px (a doubling), 3rem is equivalent to 48px (a tripling) and so on.
Padding-left
Individually setting the left padding
Padding-right
Individually setting the right padding
Padding bottom
Individually setting the bottom padding
