Scribd
Upload
1 views

HTML5 CSS5

The document provides an overview of HTML5 and CSS5, covering key elements such as doctype, meta tags, semantic structure, media elements, and new input attributes. It also discusses CSS positioning, flexbox layout, pseudo-classes and pseudo-elements, and the differences between block and inline elements. Additionally, it introduces Sass features like nested syntax, mixins, and variables, along with various types of CSS styling methods.

Uploaded by

michaelscf107
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1 views

HTML5 CSS5

The document provides an overview of HTML5 and CSS5, covering key elements such as doctype, meta tags, semantic structure, media elements, and new input attributes. It also discusses CSS positioning, flexbox layout, pseudo-classes and pseudo-elements, and the differences between block and inline elements. Additionally, it introduces Sass features like nested syntax, mixins, and variables, along with various types of CSS styling methods.

Uploaded by

michaelscf107
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

HTML5 CSS5:

1.Doctype:
 It gives the instruction to the web browser about the HTML version.

2.metaTag:
 The meta tag is information about data. Metadata will not be displayed on the
application,
 <head>
 <title>Meta Tags Example</title>
 <meta name = "keywords" content = "HTML, Meta Tags, Metadata"
/>
 <meta name = "description" content = "Learning about Meta Tags."
/>
 <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
 <meta name="viewport" content="width=device-width, initial-
scale=1.0">
 </head>

3.semantic & structural

 It gives meaning to both the browser and the developer.


 Examples of non-semantic elements: <div> and <span> - Tells nothing
about its content.
 Examples of semantic elements: <form>, <table>, and <article> - Clearly
defines its content.
 <article>

 <aside>

 <details>

 <figcaption>

 <figure>

 <footer>

 <header>

 <main>
 <mark>

 <nav>

 <section>

 <summary>

 <time>

4.media element

5.new input attr
 color
 date
 datetime-local
 email
 month
 number
 range
 search
 tel
 time
 url
 week

<form> <label for="mycolor">Select Color:</label> <input type="color"


value="#00ff00" id="mycolor"> </form>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
6.html form

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<form onSubmit={handleSubmit(onSubmit)}> /// react

7.design a div with header footer

8.canvas vs svg

9.session and local storage and cookies


10.geoplocation API
11.

Css:
1.position
 position: static|absolute|fixed|relative|sticky|initial|
inherit;
 static:
o Default value.
o The left, right, top, bottom and z-index properties do not affect
an element with position: static
 Relative:
o Elements with position: relative remain in the normal flow of the
document.
o based on the values of left, right, top and bottom properties, is applied
to the element relative to itself.
 Absolute:
o Elements with position: absolute are positioned relative to
their parent elements,(if parent are non-static)
o No space is created for the element in the page layout.
o
 Fixed
o One thing to note is that fixed elements are not affected by
scrolling. They always stay in the same position on the screen.
o They are also removed from the normal flow of the document

 Sticky
o position: sticky is a mix of position:
relative and position: fixed
o acts like a relatively positioned element until a certain scroll
point and then it acts like a fixed element

2.flux
o CSS flexbox layout allows you to easily format HTML and Flexbox makes it simple to
align
o Container:

o flex-direction
o flex-wrap
o flex-flow
o justify-content
o align-items
o align-content
o
3.sudo class & sudo element
Pseudo-Elements

o Style the first letter, or line, of an element


o p::first-line {
o p::first-letter {
o h1::before {
Pseudo Classes
 :active
 :disabled
 :checked
 :empty
 :first-child
 :hover
 :focus

4.block vs inline
o Block element its start in new line also occupies extra space to the
element like: margin
o <div><p>all semantic element
o Inline element take only the element space,
o <span><a><b><button><label>
5.display: none vs visibility: hidden
o None: will take space
o Hidden: will not take space
6.

Sass:
1.advantage
o Nested syntax
o mixins: reusable code @mixes
o variable declaration $primary-color
o https://learning-zone.github.io/css-interview-questions/scss-
questions.html

2.

Excesses :
1.Form
2.make div center
3.float the div (flex)
4.media query
5.optacity
6.

@mixin reset-list {
margin: 0;
padding: 0;
list-style: none;
}

@mixin horizontal-list {
@include reset-list;

li {
display: inline-block;
margin: {
left: -2px;
right: 2em;
}
}
}

nav ul {
@include horizontal-list;
}

Variable :
$base-spacing: 20px !default;

margin-left: $base-spacing

types of style:
 Inline CSS.
 Internal or Embedded CSS.
 External CSS.

display: inline-block allows to set a width and height on the element. Also, with display:
inline-block , the top and bottom margins/paddings are respected, but with display: inline they
are not.

You might also like