Welcome to WebmasterServe!

FREE TO JOIN! Join us now to engage in informative and friendly discussions about Webmastering, SEO, SEM, Internet Marketing, Programming, Graphic Design, Online Jobs and more. What are you waiting for? Ready to join our friendly community? It takes just one minute to register.

Dismiss Notice

Join WebmasterServe Forums 
Join the discussion! Have a better idea or an opinion? It takes just one minute to register Click Here to Join

Tutorial Basic Tutorial To Understand Css

Discussion in 'CSS and CSS3 Coding Discussions' started by Swati Mishra, Jan 21, 2016.

  1. Swati Mishra

    Yellow Belt

    Joined:
    Dec 28, 2015
    Messages:
    644
    Ratings:
    +105 / -0
    CSS are very important topic of html (hyper text markup language).

    CSS stands for Cascading style sheets. CSS are used for style and colors; we can change the color and style. We can use the various types of style these are describing below.

    [​IMG]
    • Inline style: We are using Style attribute in html element, in this we are change the color which we want add color.

    Example will describe how to change the color by using Inline style.

    Code:
    Select All
    Heading in red color

    • Internal style: In Internal style we will define a style for one html page. <style> element is defined in between the <head> section.

    By example we will describe the internal style in the html page:


    Code:
    Select All
    <html> <head> <style> body {background-color: pink;} h1 {color:black;} p {color: red;} </style> </head> <body> <h1> heading is black</h1> <p> paragraph is red.</p> </body> </html>


    In above example we have change the colour of background, colour of heading, and the colour of paragraph.

    • External style: External style is used for change the color of number of pages in html. We can change the look of whole webpage through external style sheet.


    We will discuss the external style in the example:

    Code:
    Select All
    <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1> heading is here</h1> <p> paragraph is here.</p> </body> </html>

    In above example we add a link in the <head> section of the html page.
    We can write an external style sheet in any text editor. Html tag is not shall in the file. And important thing is that the style sheet file is compulsory to save with a .css extension.
    Example with the .css extension is describing:


    Code:
    Select All
    body { background-color: pink; } h1 { color: black; } p { color: red; }

    CSS fonts:

    The Css colour is used to change the text colour for the html element. The Css font-family is used to change the font for the html element. The css font-size property is used to define the size of text for the html element
    Example for the define CSS font is described below:


    Code:
    Select All
    <html> <head> <style> h1 { color: red; font-family: Times new roman; font-size: 400%; } p { color: green; font-family: calibri(body); font-size: 120%; } </style> </head> <body> <h1> Heading is here</h1> <p> Paragraph is here .</p> </body> </html>

    In above example we have described the css font for heading and paragraph in <style>body.


    Css box model:

    [​IMG]

    For creating the visible border around the html element we use the border property, every html element has invisible box around it.
    Example of border property:

    Code:
    Select All
    p { border: 2px solid black; }
    For creating a space inside the border we use the CSS Padding property.
    Example for padding property describe below:

    Code:
    Select All
    p { border: 2px solid black; padding: 20px; }

    For creating a space outside the border we use the CSS margin property.

    Example of css margin property describe below:

    Code:
    Select All
    p { border: 2px solid black; padding: 20px; margin: 40px; }


    The ID attributes:


    For creating a special style for special element, we have to add an id attribute to the element.
    Code:
    Select All
    <p id="p01">different style </p>
    Then after define the style element.

    Example is described below:

    Code:
    Select All
    p#p01 { color: red; }
    The classes attribute:
    For define style the special style for special class we define the class attribute.

    Code:
    Select All
    <p class="error"> different class</p>
    Then we define the all element with special class style example describe below:
    Code:
    Select All
    p.error { color: blue; }
     
  2. steve taylor

    Yellow Belt

    Joined:
    Feb 12, 2016
    Messages:
    769
    Ratings:
    +25 / -0
    Nice Tutorial. I have Learned HTML(Hyper text markup language) and CSS (Cascading Style Sheet ) concept but I have lack of practice so I not able to use the concepts in the real time project very efficiently . So I am revising those concepts again with practical approach . This tutorial help me to clear some concept .
     

Share This Page