css fonts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Fonts</title>
        <link href="https://fonts.googleapis.com/css2?family=Tenali+Ramakrishna&display=swap" rel="stylesheet">
    <style>
        h3{
            font-family:'Tenali Ramakrishna', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
        p{
            font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            font-size: 35px; /* 1px= 1/96th of an inch */
            line-height: 1.3em; 
        }
        span{
            font-weight: bold;
            font-style: italic;
        }
        /* font-family adjusts the font type of the text written.  */
        /* we can add fonts online as well. like the one did in heading.for this, goto google fonts. select whatever font type you like and when you open the embed page, you can see its link and font-family required for it to work. copy and paste both of them.  */
        /* line height means the no. of lines between the font lines.  */
    </style>
</head>
<body>
    <h3>CSS Fonts</h3>
    <p>
        lets play with <span>fonts</span>. it is very exciting.
    </p>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

css tutorial

<! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > CSS Tutorial </ title >      < style >          p {              color :blue;              background-color : seagreen  !important ;         }          </ style >      <!-- this is how internal css is to be added  -->      < link   rel = "stylesheet"   href = "tut13.css" > <...
Read more

css selectors

<! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > CSS Selectors </ title >      < style >          p {              border :  2px  solid red;         }          /* id selector */          #bgblue {              color : yellow;              background-color : blue;         }  ...
Read more

developer tools

<! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > Developer Tools </ title >      < style >          p {              color :purple;              font-style : italic;              background-color : rosybrown;         }          .bgprimary {              background-color :#60a0bb;         }...
Read more