HTML-CSS

22 flashcards · Programming Languages · by Alex Konischev

1. HTML validators

   HTML validator HTML validator.

2. generate lorem ipsum for you

   lorem

3. new comment, convert any line to a comment, or uncomment any line:

   Windows and Linux Users: Ctrl + /

4. HTML-tags

   The <strong> element makes text bold The <em> element makes text italic comment with <!-- and --> tags.

5. Unordered lists are created using the <ul>

   <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

6. Open link in the same document

   <a href="https://www.theodinproject.com/about">click me</a>

7. Opening links in a new tab

   <a href="https://www.theodinproject.com/about" target="_blank" rel="noopener noreferrer">click me</a>

8. rel="noopener noreferrer">

   The noopener value prevents the opened link from gaining access to the webpage from which it was opened. The noreferrer value prevents the opened link from knowing which webpage or resource has a link (or ‘reference’) to it. It also includes the noopener behaviour and thus can be used by itself as well.

9. By adding ./ you are specifying to your code that it should start looking for the file/directory relative to the current directory.

   <a href="./pages/about.html">About</a>

10. images

    <img src="./images/dog.jpg">

11. most basic level, rules of CSS

    selector and list of declarations

12. CSS Legal Color Values

    https://www.w3schools.com/cssref/css_colors_legal.php

13. font-family can be a single value or a comma-separated list of values

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

14. font-size property name suggests, set the size of the font

    font-size: 22px has no space between “22” and “px”.

15. font-weight affects the boldness of text, assuming the font supports the specified weight

    font-weight: 700 font-weight: bold

16. text-align will align text horizontally within an element

    text-align: center

17. By default, an <img> element’s height and width values will be the same as the actual image file’s height and width. If you wanted to adjust the size of the image without causing it to lose its proportions, you would use a value of “auto” for the height property and adjust the width value:

    img { height: auto; width: 500px; }

18. Linking CSS and HTML separate file for the CSS linking inside of an HTML’s opening and closing <head> tags with a self-closing <link> element The rel attribute is required, and it specifies the relationship between the HTML file and the linked file.

    <!-- index.html --> <head> <link rel="stylesheet" href="styles.css" /> </head> /* styles.css */ div { color: white; background-color: black; }

19. Internal CSS

    <head> <style> div { color: white; background-color: black; } p { color: red; } </style> </head> <body> ... </body>

20. Inline CSS

    <body> <div style="color: white; background-color: black;">...</div> </body>

21. lazy - images

    <img src="hero_800x400.jpg" alt="" width="800" height="400" loading="lazy">

22. use aspect-ratio

    <style> img { width: 100%; height: auto; aspect-ratio: attr(width) / attr(height); } </style> <img src="hero_image.jpg" alt="" width="500" height="500">