Module 2 Practice


Video 2-1 : What is CSS, syntax, Inline, internal and external css

What is CSS, Syntax, Inline, Internal and External CSS

CSS= Cascading Style Sheet

Purpose make website colorful

  1. embaded or internal style
  2. inline style
  3. External style

Video 2-2 : Color, Measuring Unit, font size, font-weight, height, width, alignment

Color, Measuring Unit, font size, font-weight, height, width, alignment:


Video 2-3 : Simple CSS selectors, id, class, tag, universal, ID vs class

Simple CSS selectors, id, class, tag, universal, ID vs class:


Video 2-5 Border, border radius, margin, width, different ways to set margin

**Border, border radius, margin, width, different ways to set margin:**
border: width-style-color= shorthand
Margin= 10px== All side; margin=10px 20px==top+bottom===left+right
Margin⇒ top right bottm left
When 3 values⇒ top left/right left
margin= 10px 20px 30px 40px== top right bottom left


Video 2-6 : CSS Box model, Margin, padding, border, content, height, width

**CSS Box model, Margin, padding, border, content, height, width:**
padding is internal and margin is external


Video 2-7 : Inline, internal and external css

Inline, Internal and External CSS:


Video 2-8: Background image, repeat, position, size, relative image path

Background image, repeat, position, size, relative image path.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum neque aliquid aperiam aut sequi ad, sed possimus laboriosam nobis consequuntur?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit cumque excepturi, quas rem accusamus rerum repudiandae mollitia ipsam inventore, esse totam, ex voluptates voluptatem voluptatum error temporibus nihil hic vitae aliquam distinctio eos minus! Labore aperiam non possimus rem architecto eum autem ducimus nulla eligendi, debitis mollitia amet veritatis adipisci.
Module o1

Video 2-9 : Display none, inline, block, inline-block, attribute selector, decoration, shadow

                **Display none, Inline, block, inline-block, attribute selector, decoration, shadow.**

                text-decoration: underline/dashed/line-through/overline wavy green;

                Inline elements:  strong, anchor,

                ul li {color: purple; display: inline;}

                span { border: 1px solid purple}  inline element not taking width but taking margin top if gives display: block and taking height.==inline-block.

                .block{ background-color: pero; box-shadow: 50px 50px gray}

                Sereach google: CSS box shadow mdn

Video 2-10: Basic CSS Summary, Mission, Goal

                **Basic CSS Summary, Mission, Goal.**

                Types of CSS: 1. Inline css (Use style=”” attribute)  2. Internal CSS ( use <style> tag to write) 3. External css9 use .css file to write).

                Name color, hexa decimal color, rgb, rgba color.
                5 Selector:  1. Universal selector *   2. Element selector= p, h1 

                3. id selector = start # 4. class selector  =start . 5. attribute selector: input, sodu, etc.

                Margin 2 value= top-bottom, left-right; 

                 value top, left+right, bottm

                 values  top right bottom left   

                padding is same format

                Box model margin, padding, border, width… content.

QUIZ

Question 01: What is the meaning of CSS?
Ans: Cascading style sheet.

Question 02: Which tag will you use to add style on your website?
Ans: <style></style>

Question 03: How will you add blue color to all paragraph tags? Hints: Write four parts of a style rule. Ans: p{ color: blue; }

Question 04: ### How would you set a purple background color to an element?
Ans: background-color: purple;

Question 05: Which property is nearest to the element, as per the box model?
Ans: padding.

Question 06: The # symbol specifies that the selector is? Ans: id.

Question 07: How do you add a comment in a CSS file? Ans: /* this is a comment */

Question 08: How can we add multiple classes to an HTML element? Ans: Separate class names by a whitespace.

Question 09: How to apply a 2px and yellow color border that is solid for the elements with cow class?
Ans: .cow{ border: 2px solid yellow; }

Question 10: How many values a margin style rule cannot have? Ans: Seven