Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Basic Concept on HTML and CSS

Ram Sapkota
October 23, 2018
62

Basic Concept on HTML and CSS

Ram Sapkota

October 23, 2018
Tweet

Transcript

  1. What are HTML & CSS? • HTML is standard markup

    language for creating web page. • HTML elements and tags go hand to hand. • CSS is a presentation language. • CSS is used to design HTML elements.
  2. Elements • Elements are designators that define the structure and

    content of objects within a page. • Eg: <h1>,<a>, <div>, <span>, <strong>, and <em> • Elements are identified by the use of less-than and greater-than angle brackets, < >, surrounding the element name. Thus, an element will look like the following:
  3. Tags • Brackets surrounding an element creates tags • An

    opening tag marks the beginning of an element. Consists less-than sign followed by an element’s name, ends with greater-than sign; for example, <div>. • A closing tag marks the end of an element. Consists less-than sign followed by forward slash and element’s name, ends with greater-than sign; for example, </div>.
  4. Attributes • Attributes are properties used to provide additional information

    about an element. • Attributes are defined within opening tag, after element’s name. • Generally attributes include a name and a value. • For example, an <a> element including an href attribute would look like the following:
  5. Setting Up the HTML Document Structure • HTML documents are

    plain text documents saved with an .html file extension. • Content from text editor. • All HTML documents have a required structure that includes the following declaration and elements: <!DOCTYPE html>, <html>, <head>, and <body>. • Document type declaration, or <!DOCTYPE html> tells the version to the browser.
  6. Self closing elements • <br> • <embed> • <hr> •

    <img> • <input> • <link> • <meta> • <param> • <source> • <wbr>
  7. Selectors • Selector specifies the target element of HTML document.

    • May include a combination of different qualifiers to select unique elements • Selectors generally target an attribute value, such as an id or class value, or target the type of element, such as <h1> or <p>. • The selector here is targeting all <p> elements.
  8. Properties • Determines style to the selected element. • Property

    names fall after a selector, within the curly brackets, {}, and immediately preceding a colon, :. • EG: background, color, font-size, height width and many more.
  9. Type Selectors • Type selectors target elements by their element

    type. • For example, should we wish to target all division elements, <div>, we would use a type selector of div. HTML CSS
  10. Class Selectors • Class selectors allow us to select an

    element based on the element’s class attribute value. • Selects particular group of elements element of one type. • Allows us to add same styles to different elements at once. • Within CSS, classes are denoted by a leading period, .followed by the class attribute value.
  11. ID Selectors • ID selectors are even more precise than

    class selectors. • Target one specific element.
  12. Using CSS Reset • Every browser has its own default

    styles. • We need to rest those styles. • To universalize css styles we use CSS Resets • You can use Normalize.css as reset css.
  13. Summary • The difference between HTML and CSS • Getting

    acquainted with HTML elements, tags, and attributes • Setting up the structure of your first web page. • Getting acquainted with CSS selectors, properties, and values • Working with CSS selectors • Referencing CSS in your HTML • The value of CSS resets