Skip to content

# HTML & CSS.md

Latest commit

 

History

History
113 lines (88 loc) · 1.83 KB

# HTML & CSS.md

File metadata and controls

113 lines (88 loc) · 1.83 KB

HTML & CSS

HTML: bones CSS: skin

HTML

Hypertext Markup Language

in hello.html

<!DOCTYPE HTML>
<html>
    <head>
        <title>Title!</title>
    </head>
    <body>
        <h1>Heading!</h1>
        <p>Paragraph!</p>
    </body>
</html>
is opening tag is closing tag
Nesting

boxes cannot intersect with one another

: the background information of your website include the element which display the text that shows up in the tab bar on browser
Basic HTML Tags
  • Root of HTML Document
  • Info about Document
  • Document Body

  • ,

    ,

    Header Tags

  • Paragraph tag

  • Generic block section tag

Inserting Links MachineWJQ

Inserting Images of self closing tag

more organized: 

<!DOCTYPE HTML>
<html>
    <head>
        <title>Title!</title>
    </head>
    <body>
        <div>
            <h1>Heading!</h1>
            <p>Paragraph!</p>
        </div>
</html>

MDN Web Docs

should be used only when no other semantic element (such as or ) is appropriate

Dont just use

!

CSS

Its the rules that tell your browser how stuff looks Not just structure

CSS ruleset

div{
    color: red;
    font-family: Arial;
    font-size: 24pt;
}

In this case, this rule would be used onto all the divs on website.

<div class="info">Info</div>

.info{
    color: red;
    font-family: Arial;
    font-size: 24pt;
}

<div id="unique">Info</div>

#unique{       
    color: red;
    font-family: Arial;
    font-size: 24pt;
}

Diff of ID and Class:

  • An element can have only one ID && multiple classes
  • "#"for id && "."for class

Better to use Class in CSS only