Introduction to CSS Part 3

-

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

  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

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:

  1. There shouldn't be any spelling mistakes in the values of the font-style property.
  2. There shouldn't be any quotations around the value of the font-style property.



4. Font Weight

The CSS

font-weight property specifies how thick or thin characters in text should be displayed.


.main-heading {

font-weight: bold;

}

.paragraph {

font-weight: 200;

}




Note:

  • font-weight property,Values are normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
  • There shouldn't be any spelling mistakes in the values of the font-weight property.
  • There shouldn't be any quotations around the value of the font-weight property.
  • The numerical values given to the font-weight property must be in the range from 100 to 900 and should be the multiples of 100.



5. Text Decoration

The CSS

text-decoration property specifies the decoration added to the text.


.main-heading {

text-decoration: underline;

}

.paragraph {

text-decoration: overline;

}


You can use one of the below values of the

text-decoration Values are underline, line-through, overline


Note

  1. There shouldn't be any spelling mistakes in the values of the text-decoration property.
  2. There shouldn't be any quotations around the value of the text-decoration property.
  3. Ensure that text-decoration and line-through are hyphenated.


HTML:


<!DOCTYPE html>

<html>

 <head></head>

 <body>

  <h1 class="main-heading">Tourism</h1>

  <p class="paragraph">Plan your trip wherever you want to go</p>

 </body>

</html>



CSS:


.main-heading {

font-family: "Times New Roman";

font-size: 36px;

font-style: italic;

font-weight: bold;

text-decoration: underline;

}

.paragraph {

font-family: "Arial";

font-size: 28px;

font-style: normal;

font-weight: 200;

text-decoration: overline;

}


 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