Posts

Showing posts from October, 2023

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

Introduction to CSS Box Model | Part 2

Image
Introduction to CSS Box Model | Part 2 | Cheat Sheet 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. eg: .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. eg: .button { border-radius: 20px; } You can use the below CSS properties to round a specific corner of an HTML element. Property: 1. border-top-left-radius 2. border-top-right-radius 3. border-bottom-right-radius 4. border-bo...

Introduction to CSS Box Model part 1

Image
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: The background image takes the height of the content of an HTML element if you don't specify the height to it. 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 s...

Introduction to CSS Part 3

Image
Introduction to CSS | Part 3 | Cheat Sheet 1. Font Family The CSS font-family property specifies the font for an element. .main-heading { font-family: "Arial"; } .paragraph { font-family: "Times New Roman"; }   go online for more font-family values. 2. Font Size The CSS font-size property specifies the size of the font. .main-heading { font-size: 36px; } .paragraph { font-size: 28px; } Note You must add px after the number in the value of the font-size property. There shouldn't be any space between the number and px. There shouldn't be any quotations around the value of the font-size property. 3. Font Style The CSS font-style property specifies the font style for a text. You can use one of the below values of the font-style Values are normal, italic, oblique. .main-heading { font-style: italic; } .paragraph { font-style: normal; } Note: There shouldn't be any spelling mistakes in the values of the font-style property. There shouldn't be ...