Posts

Showing posts from November, 2021

Introduction to Bootstrap | Part 2 | Build Your Own Static Website | Cheat Sheet

-
Image
  Flexbox Properties 1. Flexbox Container The Bootstrap class name d-flex defines a Flexbox Container. The direct HTML elements in the Flexbox Container are called flex items . <div class="d-flex">   <div>     <h1>Tourism</h1>     <p>Plan your trip.</p>     <button>Get Started</button>   </div> </div>  The HTML container element with the class="d-flex" is a Flexbox Container. The HTML container element div in Flexbox Container is a flex item. Because it is directly inside the Flexbox Container. The HTML main heading, paragraph, and button elements are not flex items. Because these elements are not directly inside the Flexbox Container. Note:- Wrapping HTML elements in the Flexbox Container is mandatory to apply other flex properties.   2. Flex Direction The Flex Direction specifies the direction of the flex items in the Flexbox Container.   ...
Post a Comment
Read more

Introduction to Bootstrap | Build Your Own Static Website | Cheat Sheet

-
Image
  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 {   width: 138px;   height: 36px;   border-width: 0px;   border-radius: 10px; } .button-green {   background-color: #8cc63f; } HTML Code:- <button class="button button-green">Get Started</butto...
Post a Comment
Read more

Introduction to CSS Box Model | Part 2 | Build Your Own Static Website | Cheat Sheet

-
Image
  CSS Box Properties   1. Border Width The CSS border-width property specifies the width of the border for all four sides of an HTML element. .button {   border-width: 2px; } The CSS Property and value pair border-width: 0px; removes the border of an HTML element. Warning:- Specifying the CSS border-style property for an HTML element is mandatory. Otherwise, the CSS properties like border-color , border-width will not appear in the browser. The HTML button element is an exception as it appears with a border in the browser by default.     2. Border Radius The CSS border-radius property specifies the roundness of the corners of an HTML element. .button {   border-radius: 20px; } You can use the below CSS properties to round a specific corner of an HTML element.     Quick Tips:- Specifying the background color for an HTML element makes the border radius more visible. 3. Border Color The CSS border-color property specifies the color of ...
Post a Comment
Read more

Introduction to CSS Box Model | Part 1 | Build Your Own Static Website | Cheat Sheet

-
Image
  CSS Box Properties 1. Height The CSS height property specifies the height of an HTML element. .card {   height: 200px; } 2. Width The CSS width property specifies the width of an HTML element. .card {   width: 250px; } CSS Background Properties 1. Background Image The CSS background-image property specifies the background image of an HTML element.  .card {   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. .card {   background-size: cover; } Note:- Aspect Ratio is the ratio of the width and height (width/height) of an image. Example:- HTML Code:- <!DOCTYPE html...
Post a Comment
Read more

Introduction to CSS | Part 3 | Build Your Own Static Website | Cheat Sheet

-
Image
1. Font Family The CSS font-family property specifies the font for an element. .main-heading {   font-family: "Roboto"; } .paragraph {   font-family: "Roboto"; } You can use one of the below values of the font-family property, Value Note:- 1. To use font families, you need to import their style sheets into your CSS file. 2. There shouldn't be any spelling mistakes in the values of the  font-family  property. 3. There must be quotations around the value of the  font-family  property. 2. Font Size The CSS  font-size  property specifies the size of the font. .main-heading {   font-size: 36px; } .paragraph {   font-size: 28px; } Note:- 1.  You must add  px  after the number in the value of the  font-size  property. 2.  There shouldn't be any space between the number and  px . 3.  There shouldn't be any quotations around the value of the  font-size  property. 3. Font Style The CSS  ...
Post a Comment
Read more

Introduction to CSS | Part 2 | Build Your Own Static Website | Cheat Sheet

-
Image
  1. Color The CSS  color  property specifies the color of the text. .main-heading {   color: blue; } .paragraph {   color: grey; } Sample Colors 2. Background Color The CSS background-color property specifies the background color of an element. .card {   background-color: lightblue; } example:- HTML Code:- <!DOCTYPE html> <html>   <head></head>   <body>     <div class="card">       <h1 class="main-heading">Tourism</h1>       <p class="paragraph">Plan your trip wherever you want to go</p>     </div>   </body> </html> CSS Code:- .main-heading {   color: blue; } .paragraph {   color: grey; } .card {   background-color: lightblue; } Output:-
Post a Comment
Read more