Learn How to Make Basic CSS Stylesheet in Notepad


Basic CSS stylesheet in Notepad

Often over the course of time, you need to make some tweaks to your website or a blog. These tweaks often require changing the css of your blog but it is a very difficult task altering the template of blog again and again. So we need an offline editor for our websites in this way we can immediately preview the changes. The quite simple way to do that is by creating a css stylesheet in Notepad. We can easily write css and html in Notepad and create our different css stylesheets.

Let's take a look on how to make css stylesheets in Notepad:

What is CSS?

CSS is the short form of Cascading Style Sheets. CSS is basically used for displaying webpages with different styling like font size, font color and layouts. It has made it very simple for us to handle the layout of various webpages all at once!

It describes how the elements of markup languages like HTML will be displayed on the screen. You can easily master CSS by learning its simple tutorials from W3schools!

Where HTML was used to tell the content of the page like "this is a heading" or "this is a paragraph" then before CSS we had to define fonts with <font> tag for every single webpage but then CSS came and now we don't have to define layout for every single page.

Make CSS Stylesheet in Notepad:

I told you a little about CSS and now it's time to make a basic CSS stylesheet in your Notepad. For this, follow the simple steps below:
  • On your desktop right click somewhere and select NEW from the drop down menu.
  • Then click on TEXT DOCUMENT.
  • Name the file and double-click to open it!
  • Now the syntax we will use throughout to make css stylesheets in Notepad will be

    <style>

    WE WILL WRITE OUR CSS HERE

    </style>

    AND HTML GOES HERE


  • Now click on FILE , select Save As and save it as an HTML file means in .HTML format.
  • Next open the file in any browser and you will be able to see your own created css stylesheet in Notepad! 

Play with the code:

Now let's play with the code and see how could we make various stylesheets using Notepad. I am taking how to use hover effect in bullet list as an example, see live demo below and hover your mouse over the list!

  • We will put the following css code inside opening <style> and ending </style> tags.

    <style>
    ul {
    liststyle:none; }
    ul li {
    list-style-type: disc;
    color:green; }
    ul li:hover {
      color: blue;
     list-style-type: disc; }
    </style>



  • And put our html just after ending style tag!

    <ul>
    <li>
    TOPEARNINGBOY</li>
    <li>
    TOPEARNINGBOY</li>
    <li>
    TOPEARNINGBOY</li>
    <li>
    TOPEARNINGBOY</li>
    <li>
    TOPEARNINGBOY</li>
    </ul>
  • Put above codes whole in Notepad and open the file in your browser after saving it in .HTML format! This is how it will look.
Basic CSS stylesheet in Notepad


Bottom Line:

Notepad serves as an offline css stylesheet editor so by doing small tweaks to your sheet and finalizing it, just go to you blog and place the css just above ]]></b:skin>. Hope my article was good enough to guide you all how to create basic css stylesheet in Notepad! Comment below if you still have any query.  

No comments:

Powered by Blogger.