Scribd
Upload
59 views

Code Academy HTML Css 1

The document provides information on HTML elements used to structure and style content. It discusses headings, paragraphs, lists, links, images, and comments. It also covers CSS properties for styling text, boxes, borders, padding, margins, and positioning elements. Background images, gradients, and table elements are also summarized.

Uploaded by

GeronimoRomczyk
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
59 views

Code Academy HTML Css 1

The document provides information on HTML elements used to structure and style content. It discusses headings, paragraphs, lists, links, images, and comments. It also covers CSS properties for styling text, boxes, borders, padding, margins, and positioning elements. Background images, gradients, and table elements are also summarized.

Uploaded by

GeronimoRomczyk
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

1.

You can add headings of different sizes using the different headings elements: <h1>
through <h6>.
2. Paragraphs are added with the <p> element.
3. Unordered lists are created with the <ul> element and list items are added using the
<li> element.
4. Ordered lists are created with the <ol> element and list items are added using the
<li> element.
5. You can add links to your web page using the <a> element - don't forget the href
attribute!
6. Images can be added with the <img> element - don't forget the src attribute!
7. Images help support visually impaired users when <img> elements include the alt
attribute.
8. You can turn anything into a link by wrapping it with an <a> element.
9. White space in the HTML file does not affect the positioning of elements in the
browser.
10. The W3C recommends 2 spaces of indentation for nested HTML elements.
11. Comments are used to take notes inside of an HTML file. You can add a comment
with <!-- This is a comment -->.

1. The font-family property changes the typeface of text.


2. Serif fonts have extra details on the ends of each letter. Sans-Serif fonts do not.
3. Fallback fonts are used when a certain font is not installed on a user's computer.
4. Google Fonts provides free fonts that can be used in an HTML file with the <link>
element.
5. Font size can be specified using pixels, ems, or percentages.
6. The vertical spacing between lines of text can be modified with the line-spacing
property.

7. The horizontal spacing between words can be modified with the word-spacing
property.
8. The spacing between letters, the kernel, can be modified with the letter-spacing
property.
9. Text can appear bold with the font-weight property.
10. Text can appear in italics with the font-style property.
11. Text can appear in all uppercase or all lowercase with the text-transform
property.
12. Text can be aligned with the text-align property.

1. All HTML elements are contained within a box.


2. Boxes have two dimensions: a width and a height. These dimensions can be
modified with the width and height properties.
3. Width and height dimensions can be set using one of three units of measurement:
pixels, ems, or percentages.
4. A minimum and maximum width or height can be set for a box. This helps ensure
that content remains legible when a user shrinks or expands their browser window.
5. If an element's box becomes too small, the content may overflow. The overflowed
content can be controlled with the overflow property.

1. You can style the borders of an element's box.


2. The border-width property allows you to set the thickness, or width, of a border.
3. The border-style property allows you to change the style of border used.
4. The border-color property allows you to change the color of a border.

5. Individually setting the style, thickness, and color of a border can bloat code. It's
more efficient to use the shorthand border property and specify all three properties
at once, in that order.
6. Box borders don't have to be square. Their corners can be rounded with the borderradius property.

1. Padding is the spacing between a box's content and the borders of the box.
2. Padding can be set equally on all sides of the content, or can be set specifically for
certain sides of the content only.
3. Margin is the spacing directly outside of a box's borders.
4. Margins can be set equally on all sides of a box, or can be set specifically for certain
sides of the box only.
5. The display changes the default behavior of HTML elements.
6. The visibility property hides an element, but does not remove the amount of
space the element takes up on the page. If you want to hide that element and remove
the empty space, use the display property instead.

1. In the default box model, box dimensions are affected by border thickness and
padding.
2. The box-sizing property controls the box model used by the browser.
3. The default value of the box-sizing property is content-box.
4. The value for the new box model is border-box.
5. The border-box model is not affected by border thickness or padding.

1. The position property allows you to specify the position of an element in three
different ways.
2. When set to relative, an element's position is relative to its default position on the
page.

3. When set to absolute, an element's position can be pinned to any part of the web
page, but the element will still move out of view the page is scrolled.
4. When set to fixed, an element's position can be pinned to any part of the web page.
The element will remain in view no matter what.
5. The z-index of an element specifies how far back or how far forward an element
appears should appear on the page.
6. The float property can move elements as far left or as far right as possible on a
web page.
7. You can clear an element's left or right side (or both) using the clear property.

1. Image dimensions are set using the width and height properties.
2. A background image can be added to any element using the background-image
property.
3. A background image's repetition is controlled with the background-repeat
property.
4. The position of a non-repeating image can be controlled using the backgroundposition property.
5. The background property is a shorthand way of setting an image, repetition, and it's
position.
6. The background-image also supports color gradients.

This exercise will focus on two of the most common values of the background-size
property:
1. cover - expands the image as large as possible to cover the full width or height of a
container. If the dimensions of the container (say, a div) are larger than the
dimensions of the image, the image will become distorted. This value is best for
images that don't communicate important content to the user, like background
images.
2. contain - expands the image as large as possible, but the image will be letterboxed,
which means it won't cover the full width or height of a container.

The background-attachment property can take one of two values:


1. scroll - this value allows the image to move up and down as a user scrolls on the
web page (this is the default value).
2. fixed - this value pins the image's position on the page.

The background-image property can be set to the following value:


1. -webkit-linear-gradient() - this value accepts two arguments: the two colors
the linear gradient will transition to and from. The colors are usually specified as
hex color codes

1. The <table> element creates a table.


2. The <tr> element adds rows to a table.
3. To add data to a row, you can use the <td> element.
4. Table headings clarify the meaning of data. Headings are added with the <th>
element.
5. Table data can span columns using the colspan attribute.,
6. Table data can span rows using the rowspan attribute.
7. Tables can be split into three main sections: a head, a body, and a footer.
8. A table's head is created with the <thead> element.
9. A table's body is created with the <tbody> element.
10. A table's footer is created with the <tfoot> element.
11. All the CSS properties you learned about in this course can be applied to tables and
their data.

You might also like