Introduction to CSS Box Model part 1

-

Introduction to CSS Box Model | Part 1 | Cheat Sheet

CSS Box Properties

1. Height

The CSS height property specifies the height of an HTML element.

eg:
.height {
    height: 200px;
}

2. Width

The CSS width property specifies the width of an HTML element.

eg:
.width {
    width: 250px;
}

CSS Background Properties

1. Background Image

The CSS background-image property specifies the background image of an HTML element.

eg:
.image {
    background-image: url("https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/ocean.jpg");
}

warning:
  1. The background image takes the height of the content of an HTML element if you don't specify the height to it.
  2. The URL given to the 
    background-image
     must be a valid URL to display the image


2. Background Size

The CSS background-size property specifies the size of the background image of an HTML element.

eg:
.background {
    background-size: cover;
}

NOTE:

cover = Scales the image to the smallest size while maintaining the same aspect ratio (width/height) and covers the entire width and height even if the image is cropped.


HTML:

<!DOCTYPE HTML>
<HTML>
<head></head>
< body>
        <div class="card">
               <h1>Tourism</h1>
               <p>Plan your trip wherever you want to go</p>
               <button>Get Started</button>
        </div>
</body>
</html>

CSS:
.bg-style{

background-image: url("https://d1tgh8fmlzexmh.cloudfront.net/ccbpstatic-website/ocean.jpg");

background-size: cover;
width: 250px;
 height: 200px;
}

OUTPUT:


Viewport

The browser's viewport is the area of the window in which web content can be seen.

1. Viewport Height

The CSS Viewport Height

vh
Unit equals to 1% of the height of the Viewport (browser window size).

eg:

.viewport {
    height: 50vh;
}

NOTE:

The height 
100vh
 sets an HTML element to the entire height of the Viewport (browser window size).


2. Viewport Width

The CSS Viewport Width

vw
Unit equals to 1% of the width of the Viewport (browser window size).

eg:

.viewport {
    width: 50vw;
}

NOTE:
The width 
100vw
 sets an HTML element to the entire width of the Viewport (browser window size).

HTML:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div class="card">
      <h1>Tourism</h1>
      <p>Plan your trip wherever you want to go</p>
      <button>Get Started</button>
    </div>
  </body>
</html>

CSS:

.card {
  background-image: url("https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/ocean.jpg");
  width: 100vw;
  height: 50vh;
}

OUTPUT:


Comments

Post a Comment

Popular posts from this blog

WEB PAGE Task 1

-
Image
 WEB PAGE Task 1:   Build the below web page with same or different background image, make sure the text or theory should be same with the learned concepts.   URL for above image: https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/todolistbg.png
Read more

Introduction to Programming with Python Software

-
PYTHON NOTES Intro to Programming with Python Software Software is a set of instructions to the hardware. Programming Programming means writing the instructions to create a software. Code The instructions that we write to create software is called Code. Syntax Similar to Grammar rules in English, Hindi, each programming language has a unique set of rules. These rules are called the Syntax of a Programming Language. Why Python? Python is an easy to learn, powerful programming language. With Python, it is possible to create programs with minimal amount of code. Look at the code in Java and Python used for printing the message "Hello World" Java code for Hello World program : class Main { public static void main(String[] args) { System.out.println("Hello World"); } } Python code for Hello World program: print("Hello World") PYTHON: Applications of Python: Python is a versatile language which has applications in almost every field Artificial intellige...
Read more

Introduction to Bootstrap part-1

-
Image
Introduction to Bootstrap | Cheat Sheet 1 . Reusability of CSS Rulesets: If we want the same style for multiple HTML elements, we can write the CSS Ruleset once and use it for different HTML elements. CSS Code: .button { width: 138px; height: 36px; border-width: 0px; border-radius: 10px; } HTML Code: <button class="button">Get Started</button> <button class="button">Visit Now</button> 2. Multiple class names as an HTML attribute value We can provide multiple class names separated by space as a value to the HTML class attribute. Syntax: <tag class = "name1 name2 name3 name4 ...">Content</tag> HTML attribute value: name1 name2 name3 name4 ... class names: name1 , name2 , name3 , and name4 CSS Code: .button-green {  background-color: #8cc63f; } .button-orange {  background-color: #f7931e; } .button {  width: 138px;  height: 36px;  border-width: 0px;  border-radius: 10px; } HTML Code:   <!DOCT...
Read more