MyBlogHelp– A Blog for Digital Marketing, Affiliate Marketing, Organic Lead Generation.
  • Home
  • About
  • Contact
  • Privacy
  • Sitemap
  • BLOG
  • AFFILIATE MARKETING
    • LeadsArk
  • MORE
    • MAKE MONEY
      • ONLINE BUSINESS
      • ADSENSE
      • AFFILIATE MARKETING
    • BLOGGING
      • SEO
      • BlogSpot
      • WORPRESS
      • GOOGLE
      • COMPUTER TIPS
    • WEB DESIGN
      • HTML
      • CSS
      • BOOTSTRAP
      • JAVASCRIPT
      • JQUERY
    • WEB DESIGN
      • HTML
      • CSS
      • BOOTSTRAP
      • JAVASCRIPT
      • JQUERY
    • WEB DEVELOPMENT
      • PHP
      • WORDPRESS
  • DOWNLOADS
    • Blogger Template
    • Wordpress Theme
    • PDF

Wednesday, January 23, 2019

What is CSS? CSS Tutorial 01

 MyBlogHelp     January 23, 2019     css     3 comments   

what is css



  1. What is CSS?
  2. Advantages of CSS(Cascading stylesheet)
  3. Applying CSS (Cascading stylesheet)
    • Inline stylesheet
    • Internal stylesheet
    • External stylesheet


1. What is CSS?

CSS (Cascading Style Sheet) is a designing language. It is used to make web pages even more beautiful. You can apply 'designing' on HTML tags by using CSS. CSS can be implemented in three ways.

* Inline CSS - In this method, you can define CSS only in HTML tags. You can do this by using the style attribute.

* Internal CSS - In this method, you can define CSS with the help of the <style> tag in the <head> tag instead of defining it in the HTML tags. 

* External CSS - Your CSS file and HTML file will differ in this method. In the HTML file, you add the CSS file through the <link> attribute.

You can control the presentation of web pages with CSS. It gives you complete control over the design of the webpage. You can set text color, font family, background, margin, padding and position of the webpage by using CSS.

CSS is a very powerful technology. With the help of this, you can control the presentation of the complete HTML page. CSS works in the context of property and value. For example, if you want to change the background color of the web page then the “background-color” will be property and the value you will give for the property that will be "value".

                                 property: value;

As I mentioned above in the inline style sheet, you can use the style attribute but selectors are used in the <style> tag for internal and external CSS. A selector is the name of the tag, id or class on which you want to apply the CSS. More about the selector is explained in the next tutorial.

2. Advantages of CSS

1. Using CSS will save you time. You can create a CSS file and apply it to several HTML documents. You can fix a style for every HTML tag and apply it to as many web pages as you want.

2. you can decorate the webpage through the HTML attributes, each element has to define the attribute and value separately but by doing so, the code gets too much and the pages are loaded slowly. But when you use CSS, you can define styles only once for all the tags that are used in that webpage. Doing so, your code will reduce and your pages load fast.

3. It is very easy to maintain a webpage through CSS. For example, if you want to change the color of all the headings then just change the CSS and it will apply to all the headings.

4. CSS provides you with more style options than HTML. In comparison to HTML, you can design more attractive web pages with CSS.

5. With CSS you can configure the same webpage for multiple devices. For example, different styles can be used for mobile phones, tab, and desktop.

6. Now, the use of HTML attributes is very less. Using CSS has now become a global standard.

3. Applying CSS (Cascading stylesheet)

     a. Inline stylesheet

You can notice the following example. The style attribute has been defined in the body tag. After that, property and value are defined in the style attribute which is called inline stylesheet.


<!DOCTYPE html>
<html>
<head>
 <title> Example of Inline CSS </title>
</head>
<body style = "background-color: red; color: white;">
<h1> Inline CSS </h1>
<p> This is an example of inline CSS where background of webpage is define in red color and text in white. </p>
</body>
</html>



The above script will generate the below output.


Inline CSS Example

      b. Internal stylesheet

In the internal stylesheet, you can’t define style inside the tag. The <style> tag is defined in the head section. After that, you can define the styles while using selectors. In this way, HTML code and CSS code are defined in the same HTML document.



<!DOCTYPE html>
<html>
<head>
 <title>Example of Internal Style </title>
<style>
         body {
              background-color: pink;
              color: green;
         }
</style>
</head>
<body>
       <h1> internal CSS </h1>
       <p> This is an example of internal stylesheet where background of webpage is define in pink color and text in green. </p>
</body>
</html>

The above script will generate the below output.


Internal CSS Example

     c. External stylesheet

In the context of External stylesheet, CSS will be in another file. That file will be linked to the HTML file by <link> tag. You do not need to write CSS again and again for external stylesheets.

You can apply the same CSS file to the several HTML files. For this, you have to create a folder and in this folder, you have to create two files for HTML and CSS separately. Such as index.html and style.css.

An example of this is given below.

index.html File



<!DOCTYPE html>
<html>
<head>
 <title> Example of External Style </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1> External CSS </h1>
<p> This is an example of External stylesheet where background of webpage is define in green color and text in white. </p>
</body>
</html>

style.css File

body {
background-color: green;
color: white;
}

The above scripts will generate the below output.


External CSS Example



            <<-- PREVIOUS                                                   NEXT -->>






  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

3 comments:

  1. maniFebruary 27, 2019 at 7:14 PM

    This is a very amazing post for cheap web hosting services. in this post, you have provided all the basic information regarding.

    website builder for reseller

    ReplyDelete
    Replies
      Reply
  2. YogeshMay 20, 2019 at 2:18 PM

    I admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much.
    WordPress development company in Chennai

    ReplyDelete
    Replies
      Reply
  3. Allevi8 MarketingFebruary 5, 2020 at 11:47 AM

    iop

    ReplyDelete
    Replies
      Reply
Add comment
Load more...

Thank you for reading this post. Please do not enter any spam link in the comment box.

Followers

Blog Archive

  • ►  2020 (4)
    • ►  October (1)
    • ►  September (1)
    • ►  August (2)
  • ▼  2019 (52)
    • ►  December (1)
    • ►  November (2)
    • ►  October (1)
    • ►  August (1)
    • ►  July (1)
    • ►  May (11)
    • ►  April (10)
    • ►  March (6)
    • ►  February (3)
    • ▼  January (16)
      • What is bootstrap and its major advantages of crea...
      • What is CSS? CSS Tutorial 01
      • How to use input attributes in html5?
      • How to use input type in html5?
      • How to use output tag in html5?
      • How to use keygen tag in html5?
      • How to use datalist tag in html5?
      • How to use svg tag in html5?
      • How to use canvas tag in HTML5?
      • How to use the track tag in html5?
      • How to use source tag in html5?
      • How to use embed tag in html5?
      • How to use the main tag in html5?
      • How to use Ruby tag in html5?
      • How to use html5 mark tag to highlight text?
      • How to use html5 footer tag?
  • ►  2018 (54)
    • ►  December (27)
    • ►  November (5)
    • ►  May (5)
    • ►  April (4)
    • ►  February (3)
    • ►  January (10)
  • ►  2017 (17)
    • ►  December (9)
    • ►  November (8)

Popular Posts

  • How to use the main tag in html5?
  • How to use keygen tag in html5?
  • How to use html5 mark tag to highlight text?
  • How to start Online Business without money from home?
  • What is a search engine?

Contact Us

Name

Email *

Message *

About MyBlogHelp

Most of the posts, we share on this blog related to Affiliate Marketing, Organic Lead Generation, Digital Marketing, Social Media Marketing, Make Money Online, SEO, and web design.

Featured Post

LeadArk - Affiliate Marketing | Qualified Organic Lead Generation | LeadsArk Review

Copyright © MyBlogHelp– A Blog for Digital Marketing, Affiliate Marketing, Organic Lead Generation.
Design by Md. Abdussamad | MyBlogHelp.com