2: CSS

-

CSS

This is a comment in CSS: /**/

You can use CSS in three ways:

  1. Inline CSS
  2. Internal CSS
  3. External CSS

Inline CSS: 

    You have already studied Inline CSS in HTML blog, ie all the style used within the line of HTML code is Inline CSS.

Internal CSS:

    Internal CSS is styling the webpage, when you write the code within the head of the document and it will apply automatically to the whole webpage.
  1. Go in <head></head> tag and add a tag <style></style> and within it whatever property you give, will be applied to the whole page.
  2. Like if you want to make the whole background black, you will use body {background-color: black;} within <head></head> tag.
  3.  If you want to make all paragraphs white, use p {color: white;} within <head></head> tag.
  4. a

External CSS:

    In External CSS, you use an entirely different file to style your webpage. to do this:

1: Make a new CSS file ie style.css and link it to your index.html file.
  • To do this, in the index.html file, use <link rel="stylesheet" href=""> within <head></head> tag, and within href=" " , enter the name of the CSS file.
2: In the CSS file, use the properties like body {background-color: black;} to change the background color and p {color: white;} to change the color of all the paragraphs.

3: If you want to target a specific paragraph on the webpage,
  • Give a specific id to that paragraph in the HTML file by putting id="" within <p> tag and entering a specific id within " " 
  • Now in the CSS file, type # and enter the id and then add { } and enter the property within it.
  • Example:
#p1{
    color: aqua;
}

4: If you want to target a certain group of paragraphs on the webpage,
  • Give a specific class to that paragraph in the HTML file by putting class="" within <p> tag and entering a specific class within " " 
  • Now in the CSS file, type . and enter the class name and then add { } and enter the property within it.
  • Example:
.odd{
    color: aqua;
}

5: Use fonts in CSS:

    If you want to use different fonts in CSS:
  • Open https://fonts.google.com/ and select the font you want.
  • Select Regular 400 option.


  • Now, on the top right corner select the View Selected Families button.
  • Now in the Use on the Web section select the link button and copy the second link.

  • Now paste this link in <head></head> section in HTML file.
  • Copy the text in CSS rule to specify families section 

  • Paste this text in CSS file and save
  • Example:
h1{
    color: antiquewhite;
    font-family: 'Delicious Handrawn', cursive;
}

Note:

    It is recommended to add more than one font style. If one is unsupported by the browser, the second will be applied automatically.
  • To add more than one fonts, open each font in https://fonts.google.com/ and Select Regular 300 in each font.
  • All these fonts will be added to Selected families.
  • Now copy the second link in Use on the Web and paste it into the head of HTML file.
  • Now copy the text in CSS rule to specify families section and paste it into the CSS file.

6: Some properties related to font:

    font-style: italic;
    font-weight: bold;
    text-decoration: aqua dotted underline;
    font-size: 40px;    

7: Add border to HTML element:

    To add the border to an element add the element to which border is to be added in CSS and then in { } write border: ; and in border, you can add different styles like:
  • Some properties of border:
    1. border-style
      • border-style: ;
      • If you add the property ==> border-style: solid dashed dotted double; 
        • all four borders will have different styles and their arrangement will be:
          • top-solid
          • right-dashed
          • bottom-dotted
          • left-double
    2. border-width
      • border-width: 5px;
      • If you add the property ==> border-width: 5px 7px 8 px 9px; 
        • all four borders will have different widths and their arrangement will be:
          • top-5px
          • right-7px
          • bottom-8px
          • left-9px 
    3. border-color
      • border-color: rgb(0, 195, 255);
      • If you add the property ==> border-color: red green blue yellow;
        • all four borders will have different colors and their arrangement will be:
          • top-red
          • right-green
          • bottom-blue
          • left-yellow
    4. rounded border
      • border-radius: 15px;
      • If you add the property ==> border-radius: 15px 5px 10px 8px;
        • all four borders sides will have different rounding and their arrangement will be:
          • top-15px
          • right-5px
          • bottom-10px
          • left-8px
    5. border individual sides
      • border-top-
      • border-right-
      • border-bottom-
      • border-left-
      • You can add different properties to each side like:
        • border-top-width
        • border-top-color
        • border-top-style
        • border-top-radius
    6. border shorthand
      • To shorten the code if you use the property 
      • p {
            border: 2px solid red;
            border-radius: 5px;
            }
      • 2px ----- border width
      • solid ---- border style
      • red ------ border color
        • You can also do this for each individual side:
        • p {
              border-top: 2px solid red;
              border-radius: 5px;

              border-right: 4px dotted green;
              border-radius: 3px;
             
              border-bottom: 2px dashed yellow;
              border-radius: 6px;

              border-left: 3px double blue;
              border-radius: 5px;
              }

8: Background:

1: Background gradient:

  1. There are three types of background gradients:
    • linear-gradient
    • radial-gradient
    • conical-gradient
  2. Linear-gradient:
    • Syntax:
    • body{
          background: linear-gradient(direction, color-stop1, color-stop2, ...);
      }
    • Example:
    • body{
          background: linear-gradient();
          background-repeat: no-repeat ;
          background-attachment: fixed;
      }
    • Within conical-gradient( ) you can write:
      • Different colors name ***(Each separated by a comma , )***
      • Position ***(Position must be added before colors and is separated from colors via comma , )*** 
        • to right ie from left to right
        • to left ie from right to left
        • to bottom ie from top to bottom
        • to top ie from bottom to top
    • The function no-repeat is to cancel the repetition after every element, if this is not done, the background will repeat itself after the last element.
    • After using no-repeat, there will be a white screen after the last element on the webpage. So the function fixed is added to fix this. 
  3. Radial-gradient:
    • Syntax:
    • body{
          background: radial-gradient(shape size at position, start-color, ..., last-color);
      }
    • Example 1:
    • body{
          background: radial-gradient(circle, lightblue ,lightgreen);
          background-repeat: no-repeat ;
          background-attachment: fixed;
      }
    • Example 2:
    • body{
          background: radial-gradient(circle, lightblue 15%,lightgreen );
          background-repeat: no-repeat ;
          background-attachment: fixed;
      }
  4. Conical-gradient:
    • ...???...
2: Background Image:
  1. You can do everything discussed in background in background-image. Just use background-image: ; and add all the properties discussed earlier.
  2. To add an image as background use:
    1. body{
          background-image: url(images/park.jpg);
          background-repeat: no-repeat;
          background-attachment: fixed;
          background-position: center;
          background-size: cover;
      }
      • Between url( ) add the path of the image or its URL.
      • background-size: cover; is used so that when the size of screen is changed, image will be resized simultanously.

9: Padding and Margin:

Padding:
    Padding is the space between text and the border. You can add this by adding padding: 10px; 
and changing the px value.
Browser:


Margin:
    Margin is the space around an element. By default, the body element has a margin of 8px but you can also change it manually through margin: 8px; and changing the value of px.
  1. Margins of all sides:
    • .one {
          margin-top: 50px;
          margin-bottom: 30px;
          margin-left: 20px;
          margin-right: 20px;
      }
  2. Margin shorthand:
    • .one {
          margin: 50px 40px 30px 20px;
      }
    • The arrangement is : margin: top right bottom left ;
  3. All sides same Margin:
    • .one {
          margin: 50px;
      }   /*All side would have same margin. No need top enter Margin of every side*/
  4. Stick element to the center of the window:
    • To stick the element to the center of the window, you can use 
    • .box1{
          margin: auto;
      }
    • browser
  5. Stick element to the left side of the window:
    • .box1{
          margin-left: auto;
      }
    • browser
  6. Stick element to the right side of the window:
    • .box1{
          margin-right: auto;
      }
    • browser

10: Float:

    The float property is used to position the element to the left or right side of the container.
This is usually used for wrapping the text around the images.  
  • HTML
  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Website</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="block">one</div>
        <div class="block">two</div>
        <div class="block">three</div>

        <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero labore ab quod facilis necessitatibus dicta, saepe odit nulla vitae nobis, pariatur eum! Est quasi fugiat sunt suscipit corporis vel ullam.</div>
        <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero labore ab quod facilis necessitatibus dicta, saepe odit nulla vitae nobis, pariatur eum! Est quasi fugiat sunt suscipit corporis vel ullam.</div>
        <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero labore ab quod facilis necessitatibus dicta, saepe odit nulla vitae nobis, pariatur eum! Est quasi fugiat sunt suscipit corporis vel ullam.</div>
    </body>
    </html>
  • CSS
  • .block{
        border: 1px solid cyan;
        width: 75px;
        height: 55px;
        text-align: center;
        font-size: 33px;
        float: right;
    }
  • browser before float:  

  • browser after right float: Wrapping will be from right to left and top to bottom in case of right float.

  • browser after left float: Wrapping will be from left to right and top to bottom in case of left float
If you want just to align the images or blocks and not the text, you can clear the float element by clearing it from that text.
  • CSS
  • .block{
        border: 1px solid cyan;
        width: 75px;
        height: 55px;
        text-align: center;
        font-size: 33px;
        float: left;
    }
    .p{
        clear: both;
    }
  • Here, in clear you can write left for left float and right for right float or just both for both of them.
  • browser













Location: 212 Steuben St, Brooklyn, NY 11205, USA

Comments

Post a Comment

Popular posts from this blog

Javascript whole in one

-
Image
 Table of contents Link .js to .html and error Commands Variables Get element by id Taking input from the user Type conversion Math functions Calculate Hypoteneus (practice program) Counter (practice program) Random number generator String methods and functions Slice Method chaining If, else if, else If else (Practice Program) Switch Statement Logical Operators (&&, ||, ! ) Loops Break and continue Nested Loops Functions, nested functions, function expression, and arrow function Template Literals VAR vs LET Number guessing game Temperature converter Array Maps Objects This keyword Class Static variables and functions Inheritance Super Keyword Getters and Setters Instanceof operator Passing Object to function Array to Objects Anonymous Objects Simple Garage System Error handling setTimeout( ) setInterval( ) Date Object Simple Clock Program Synchronous and Asynchronous Code Console.time( ) Important Points: If  indexof () ; returns  - 1 , it means this  elemen...
Read more

3: HTML blog's visual content with source code

-
Image
  1: Text sizes Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 2: Hyperlink with hower text and open in new tab or same C++ 3: New page hyperlink and open in same or new tab HTML 4: Different text formating tags This is normal text This is centered text Ittalics Bold Big Small This is  Subscript  text This is  Superscript  text inserted deleted mark 5: Unorderes list: Things I like are: Macaroni Burgers Pizza Pizzas types are: Peperoni Cheese Fagita Crown 6: Ordered list: With numbers: First Second Third Fourth With Uppercase Alphabet First Second Third Fourth With Lowercase Alphabet First Second Third Fourth With Uppercase Roman First Second Third Fourth With Lowercase Roman First Second Third Fourth 7: Discription list: HTML: This adds structure CSS: This adds design Javascript: This adds fucntionality 8: Basic Table: 9: Table with design: Align center, table outines black, row 1 grey center aligned and height 50 row 2 lightgrey center aligned and...
Read more

Bootstrap whole in one

-
Bootstrap Grid: In  col-md-4 ,  -4  means each column will take 4/12 of row and  -md  means this property will be applied till md breakpoint. <! DOCTYPE html > < html lang =" en "> < head >     < meta charset =" UTF-8 ">     < meta name =" viewport " content =" width=device-width, initial-scale=1.0 ">     < title > Document </ title >     < link rel =" stylesheet " href =" node_modules/bootstrap/dist/css/bootstrap.css ">     < link rel =" stylesheet " href =" style.css ">     < style >         body {             background-color : # 292d3e ;         }         . c {             background-color : lightblue ;         }         . cc {             bor...
Read more