CSS Tutorial

-

 

  • CSS stands for Cascading Style Sheet.
  • CSS is used to design HTML tags.
  • CSS is a widely used language on the web.
  • HTML, CSS and JavaScript are used for web designing. It helps the web designers to apply style on HTML tags.

What is CSS

CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look and formatting of a document written in markup language. It provides an additional feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces. It can also be used with any kind of XML documents including plain XML, SVG and XUL.

CSS is used along with HTML and JavaScript in most websites to create user interfaces for web applications and user interfaces for many mobile applications.


What does CSS do

  • You can add new looks to your old HTML documents.
  • You can completely change the look of your website with only a few changes in CSS code.

Why use CSS

These are the three major benefits of CSS:

1) Solves a big problem

Before CSS, tags like font, color, background style, element alignments, border and size had to be repeated on every web page. This was a very long process. For example: If you are developing a large website where fonts and color information are added on every single page, it will be become a long and expensive process. CSS was created to solve this problem. It was a W3C recommendation.

2) Saves a lot of time

CSS style definitions are saved in external CSS files so it is possible to change the entire website by changing just one file.

3) Provide more attributes

CSS provides more detailed attributes than plain HTML to define the look and feel of the website.

How to add CSS

CSS is added to HTML pages to format the document according to information in the style sheet. There are three ways to insert CSS in HTML documents.

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

1) Inline CSS

We can apply CSS in a single element by inline CSS technique.

The inline CSS is also a method to insert style sheets in HTML document. This method mitigates some advantages of style sheets so it is advised to use this method sparingly.

If you want to use inline CSS, you should use the style attribute to the relevant tag.

Syntax:

<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>

Example:

  1. <h2 style="color:red;margin-left:40px;">Inline CSS is applied on this heading.</h2>  
  2. <p>This paragraph is not affected.</p> 

2) Internal CSS

The internal style sheet is used to add a unique style for a single document. It is defined in <head> section of the HTML page inside the <style> tag.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. body {  
  6.     background-color: linen;  
  7. }  
  8. h1 {  
  9.     color: red;  
  10.     margin-left: 80px;  
  11. }   
  12. </style>  
  13. </head>  
  14. <body>  
  15. <h1>The internal style sheet is applied on this heading.</h1>  
  16. <p>This paragraph will not be affected.</p>  
  17. </body>  
  18. </html> 

3) External CSS

The external style sheet is generally used when you want to make changes on multiple pages. It is ideal for this condition because it facilitates you to change the look of the entire web site by changing just one file.

It uses the <link> tag on every pages and the <link> tag should be put inside the head section.

Example:

  1. <head>  
  2. <link rel="stylesheet" type="text/css" href="mystyle.css">  
  3. </head>  

The external style sheet may be written in any text editor but must be saved with a .css extension. This file should not contain HTML elements.

Let's take an example of a style sheet file named "mystyle.css".

File: mystyle.css

  1. body {  
  2.     background-color: lightblue;  
  3. }  
  4. h1 {  
  5.     color: navy;  
  6.     margin-left: 20px;  
  7. }   

Note: You should not use a space between the property value and the unit. For example: It should be margin-left:20px not margin-left:20 px.

CSS Syntax

A CSS rule set contains a selector and a declaration block.

CSS syntax

Selector: Selector indicates the HTML element you want to style. It could be any tag like <h1>, <title> etc.

Declaration Block: The declaration block can contain one or more declarations separated by a semicolon. For the above example, there are two declarations:

  1. color: yellow;
  2. font-size: 11 px;

Each declaration contains a property name and value, separated by a colon.

Property: A Property is a type of attribute of HTML element. It could be color, border etc.

Value: Values are assigned to CSS properties. In the above example, value "yellow" is assigned to color property.

Selector{Property1: value1; Property2: value2; ..........;}



Comments

Post a Comment

Popular posts from this blog

ડિજિટલ રૂપી શું છે? UPI હોવા છત્તા ડિજિટલ રૂપીની જરૂર કેમ? ભારત સરકારનું ઉદેશ્ય શું છે? જાણો સંપૂર્ણ જાણકારી

-
Image
  ભારતમાં અત્યારે અબજો ટ્રાન્ઝેક્શન  UPI  દ્વારા થાય છે અને UPI એ ભારતમાં ડિજિટલ પેમેન્ટની ક્રાંતિ લાવી છે. હવે UPI ની આટલી મોટી સફળતા બાદ ભારત સરકારે હવે “ડિજિટલ રૂપી (Digital Rupee)” ની રજૂઆત કરી છે. UPI આટલું સરસ ચાલી રહ્યું છે તો ભારત સરકારે કેમ ડિજિટલ રૂપી લોન્ચ કર્યું? ડિજિટલ રૂપી શું છે? તે કેવી રીતે કામ કરે છે? આવા ઘણા સવાલ છે જે આજે આપણે જાણીશું. ચાલો જાણીએ ડિજિટલ રૂપી વિશે માહિતી. Table of Contents ડિજિટલ રૂપી શું છે? – What is Digital Rupee? જે રીતે આપણે ભૌતિક સ્વરૂપમાં રૂપિયાના સિક્કા અને 100, 200, 500 રૂપિયાની નોટ કેશમાં રાખીએ છીએ એ જ રીતે ડિજિટલ રૂપી પણ આ કેશ નોટ અને સિક્કાઓનું એક ડિજિટલ રૂપ છે. ડિજિટલ રૂપી આપણાં ભારતીય રૂપિયાનું એક ડિજિટલ રૂપ છે. આ ડિજિટલ રૂપીને ભારતીય રિઝર્વ બેંક દ્વારા પ્રદાન કરવામાં આવશે. આ ડિજિટલ રૂપી  બ્લોકચેન ટેક્નોલોજી  ઉપર આધારિત છે જેના દ્વારા ખૂબ જ સુરક્ષિત રીતે આ ડિજિટલ રૂપીને સ્ટોર કરવામાં આવશે. આ ડિજિટલ રૂપીને  સેંન્ટ્રલ બેન્ક ડિજિટલ કરન્સી (Central Bank Digital Currency)  પણ કહેવામાં આવે છે. સેંન્ટ્રલ બેન્ક...
Read more

HTML માં એલિમેંટ (Element) એટલે શું? | Element in HTML

-
Image
  આજની પોસ્ટમાં આપણે  HTML  માં આવતા  એલિમેંટ (Element)  વિશે માહિતી મેળવીશું. HTML Element Void Element અથવા Empty Element Nested Element HTML Element HTML ડોકયુમેંટમાં  "એલિમેંટ (Element)"  એટલે  <>   શરૂઆતના ટેગથી </>   અંતિમ ટેગ  સુધીનું પૂરું કન્ટેન્ટ. એટલે  Starting tag  થી લઈને  Closing tag  સુધી તેની વચ્ચે આવતું પૂરું કન્ટેન્ટ. એલિમેંટ  વેબ બ્રાઉઝર ને HTML પેજનું સ્ટ્રક્ચર સમજાવે છે જેના દ્વારા વેબ બ્રાઉઝર તે એલિમેંટ સમજીને તે પેજને  Render  કરે છે. ઉદાહરણ તરીકે ઉપર જે તમને દેખાય છે તે બધા જ અલગ-અલગ  એલિમેંટ  છે. જેમાં શરૂઆતમાં  Starting tag <>  છે, પછી ટેગની વચ્ચે આવતી  સામગ્રી (Content)  છે અને અંતમાં  Closing tag </>  છે. આ બધા એલિમેંટ છે. Void Element અથવા Empty Element HTML માં ઘણા એવા ટેગ હોય છે જેમાં આપણને  </> Close tag  નથી જોવા મળતો. જેમ કે  <br>  અને  <hr>  જેવા ટેગ....
Read more

મેમરી એટલે શું? | Computer Memory વિશે માહિતી..!!

-
Image
  મિત્રો આપણે કોઈ પણ વસ્તુ વાંચીએ છીએ, સાંભળીએ છીએ કે જોઈએ છીએ તે આપણને યાદ રહે છે કારણ કે આપણી પાસે એક  મેમરી (Memory)  છે જેમાં આ બધી જ માહિતી અથવા ડેટા સ્ટોર થાય છે. જેવી રીતે માણસ પાસે મેમરી હોય છે તેવી જ રીતે એક  કમ્પ્યુટર  પાસે પણ પોતાની મેમરી હોય છે. કમ્પ્યુટરમાં મેમરી એક ખૂબ જ મહત્વનો ભાગ હોય છે કારણ કે તેમાં જ  ઓપરેટિંગ સિસ્ટમ  પણ સ્ટોર હોય છે અને મેમરીને કારણે આપણું  OS  કમ્પ્યુટરમાં ચાલુ થાય છે. આજે આપણે કમ્પ્યુટર મેમરી વિશે જાણીશું કે આ  મેમરી એટલે શું?  તેના પ્રકાર વગેરે જેવી માહિતી જાણીશું. કમ્પ્યુટર મેમરી એટલે શું? - Computer Memory in Gujarati કમ્પ્યુટર મેમરીના પ્રકાર - Types of Computer Memory in Gujarati પ્રાથમિક મેમરી (Primary Memory) પ્રાથમિક મેમરીના ઉદાહરણ ગૌણ મેમરી (Secondary Memory) ગૌણ મેમરીના ઉદાહરણ કમ્પ્યુટર મેમરી એટલે શું? - Computer Memory in Gujarati “મેમરી (Memory) એટલે કમ્પ્યુટરમાં આવેલું એક એવું ડિવાઇસ જેનો ઉપયોગ કમ્પ્યુટરમાં માહિતીને સ્ટોર કરવા માટે થાય છે અને માહિતીની લેવડ-દેવડ માટે થાય છે.” કમ્પ્યુ...
Read more