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

-

 

HTML Elements

1. Container Element

The HTML div element defines a container.

<div>

  <h1>Tourism</h1>

  <p>Plan your trip wherever you want to go</p>

  <button>Get Started</button>

</div>


CSS Properties

2. Syntax

selector {
  property1: value1;
  property2: value2;
}

3. Text Align

The CSS text-align property specifies the horizontal alignment of the text in an HTML element.

.h-center {
  text-align: center;
}





example:-

HTML Code:-

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

CSS Code:-

.h-center {
  text-align: center;
}

Output:-




Comments

Post a Comment

Popular posts from this blog

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...
Read more