Sunday 16 August 2020

Quick Tips #4: What structure should your website have ?

website files structure

 The most common Things we'll have on any website project we create an index HTML file and folders to contain images , style , files and script files .

Some common files and folder  :

  1. index.html : This fill will generally contain your homepage content , i.e. the text and images that people see when they first go to your site . 
  2. images folder : This folder will contains all the images that you us on your site.
  3. styles folder : This folder will contains  the CSS code used to style your content.
  4. scripts folder :This folder will contains all the JavaScript code used to add interactive functionally to your site .

πŸ“ŒIt is good practice to organize your files .😊
πŸ“ŒIt helps  when you link your file with HTML.😎




=======================================================================



Keep Learning and practice , practice and practice.. !!!

Follow me on Codepen πŸ”—https://codepen.io/arwazkhan189

LIKE , COMMENT , SHARE , SUBSCRIBE  the Blog!

Wednesday 12 August 2020

Quick Tips #3: How to link external Style Sheet in Codepen ?

Four simple Steps to link external style sheet in Codepen

Step 1 :- Create two separate pen for HTML and CSS file .

Step 2 :- Now Copy the CSS file link.

Step 3 :- Open HTML file click on setting button on the top bar , now click to  CSS option and scroll down and paste the CSS file link .




Step 4:- Click to Save & Close button .   

=======================================================================



Keep Learning and practice , practice and practice.. !!!

Follow me on Codepen πŸ”—https://codepen.io/arwazkhan189

LIKE , COMMENT , SHARE , SUBSCRIBE  the Blog!

#9.2 Standard CSS used in HTML - Internal and External CSS

❗Here we are discussing Standard CSS used in HTML. The major part of CSS will be discussed later in CSS Blog.


Internal CSS 

An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <head> section of an HTML page, within a  <style> element.


⭐Example of a sample HTML document with an Internal CSS:

Sample HTML document with internal CSS

Output of above Code
πŸ“ŒHere is Codepen link of above examples :- πŸ”—https://codepen.io/arwazkhan189/pen/qBZOvpM

External CSS 

An external style sheet is used to define the style for many HTML pages. To use an external style sheet, add a link to it in the <head> section of each HTML page.

External style sheet can be referenced with a full URL or with a path relative to the current web page.

Example:-

  • Example uses a full URL to link a style sheet. <link rel="stylesheet"href="https://www.example.com/...../styles.css">

  • Example link to a style sheet located in css folder on the current website. <link rel="stylesheet"href="/css/styles.css">

  • Example link to a style sheet located in the same folder as the current page. <link rel="stylesheet"href="styles.css">

  • Example link to a style sheet located in previous folder on the current page. <link rel="stylesheet"href="../styles.css">



⭐Example of a sample HTML document with an External CSS:
Sample HTML document link with External Style Sheet

Output of above Code



πŸ“ŒHere is Codepen link of above examples:- 

⭐Example of a sample HTML document with an Internal CSS with Colors, different fonts and font-size,Borders, paddings , margins etc...



πŸ“ŒHere is Codepen link of above examples:-πŸ”— https://codepen.io/arwazkhan189/pen/gOraJOX


=======================================================================



Next we will learn about HTML Links  ...

Keep Learning and practice , practice and practice.. !!!

Follow me on Codepen πŸ”—https://codepen.io/arwazkhan189

LIKE , COMMENT , SHARE , SUBSCRIBE  the Blog!

#9.1 Standard CSS used in HTML - Inline CSS

 CSS stands for Cascading Style Sheets. CSS describe how HTML elements are to be displayed on screen, paper, or in other media.

With CSS , we can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors to be used, different displays for different devices and screen sizes, and much more!


CSS can be added to HTML documents in 3 ways:

  • Inline - by using the style attribute inside HTML elements.
  • Internal - by using a <style> element in the <head> section.
  • External - by using a <link> element to link an external CSS file.

❗Here we are discussing Standard CSS used in HTML. The major part of CSS will be discussed later in CSS Blog.

Inline CSS 

An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element.


Background Color 

We can set the background color for HTML elements like in Text , images , heading, block , section etc..

Example:

  • <h1 style="background-color:yellow;">Background Color used in a heading tag</h1>

  • <p style="background-color:orange;">This is a paragraph with orange background color.</p>

  • <div>hello ,how are you!!!
            <div style="background-color: rgba(238,93,72,0.8);">
                    This is a div with background color.
            </div>
    </div>

Text Color 

We can set the color of text in HTML.

Example:
  • <h3 style="color:blue">This is an example of Text Color in heading tag.</h3>
  • <p style="color:grey">This is an example of Text Color in paragraph tag. </p> 
     

Border Color 

We can set the color of borders in HTML.
❗Border values and styles we will learn in CSS Blog with more Examples.

Example:

  • <h2 style="border: 2px solid green">Hello Friends</h2>
  • <h2 style="border: 2px dashed tomato">Hello Friends</h2>
  • <h2 style="border: 1px dotted orange">Hello Friends</h2>

❗Internal CSS and External CSS  are discussed in next blog. 


=======================================================================

πŸ“ŒHere is Codepen link of above examples :- πŸ”—https://codepen.io/arwazkhan189/pen/BaKovqm?editors=1000

Next we will learn about Internal CSS and External CSS  ...

Keep Learning and practice , practice and practice.. !!!

Follow me on Codepen πŸ”—https://codepen.io/arwazkhan189

LIKE , COMMENT , SHARE , SUBSCRIBE  the Blog!