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

Basic Concept on HTML and CSS

Avatar for Ram Sapkota Ram Sapkota
October 23, 2018
65

Basic Concept on HTML and CSS

Avatar for Ram Sapkota

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