Basic concepts of CSS

-

Css :-

Css is a language that describes the style of an HTML document. Css describes how to HTML elements should be displayed , is a simply designed language intended to simplify the process making web -pages presentable.

  • CSS stands for Cascading Style Sheets. CSS allows you to apply styles to web pages. 

  • More importantly CSS enables you to do this independent of the HTML that makes up each web-page.

  • CSS control the layout of multiple web-pages all at once. It save a lot of work.

# Types of  CSS with their Syntax 

Move to types of CSS ,so there are Three types of CSS;
  • Inline CSS 

  • Internal or Embedded CSS

  • External CSS

# Inline CSS :-

Inline CSS applied directly to HTML elements  using the Style attribute.

For example :- 


Output is : 


Output is :

# Internal or Embedded CSS :-
 
When using Internal CSS , we must add a new tag ,<style> , inside the <head> tag.

For example :- 
 

Output is : 
# External CSS  :-

  • External CSS should not contain any HTML tags. It is used to apply CSS as on multiple pages.

  • Work with  External CSS , you need to take two files:- an HTML file and a CSS file.

 1.  Create the CSS file :- create a file using any text editor and save it with ( .css ) extension (like., style.css).
This file should contain CSS elements or rules only .

Example:- style.css file :-



 2.  Link this CSS file to the HTML file :
  •  In the <head> section , use the <link>  tag to reference the external CSS file.

  •  HTML file:-


Output is :-


# Attribute :
  • rel="stylesheet" :- This attribute tells the browser about the relationship between an HTML file and the linked file.
  • href="style.css" :- This attribute specifies the path to your CSS file.

#Advantages of CSS:-

  • CSS allows you to separate your HTML content from style. Making code easier to manage.

  • CSS provides greater style options like transitions , CSS 2D transforms, keyframes , for looking website creative and attractive.

  • CSS also saving your time effort. It can be reused across multiple pages.

Comments

Post a Comment

Popular posts from this blog

WEBSITE DEVELOPMENT USING HTML AND CSS

-
What is website ? A website is a collection of publicly accessible, interlinked web pages that share a single domain name . Websites, can be created and maintained by an individual, group, business or organisation to serve a variety of purpose. Websites come ina nearly endless variety, including educational sites , news sites , forums , social media sites , e-commerce sites , and so on.  The page within a website are usually a mix of text and other media. That said, there are no rules dictating the form of  a website. Examples of website are: Bing.com    wikipedia.org ,    google.com , amazon.com   etc. Languages used for website development ; The most common programming languages used to develop website are : HTML (Hyper Text Markup Language) JavaScript   CSS (Cascading Style Sheets) PHP: Hypertext Preprocessor Note:- Some of these can be used as an extension of the existing languages but some can be used entirely separate from the other language...
Read more

Introduction to CSS ✍️

-
Image
  Basics About CSS ✍️ Cascading style sheets (CSS) describe how documents are presented on screens, in print, or perhaps how they are pronounced. Cascading style sheets (CSS) provide easy and effective alternatives to specify various attributes for the HTML tags . Using CSS, you can specify s number of style properties for a given HTML element . Each property has a name and a value, separated by a colon (:).  Each property declaration is separated by a semi-colon (;). Advantages of CSS : CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many web pages as you want. Superior styles to HTML - CSS has a much wider array of attributes than HTML so you can give far better look to your HTML page in comparison of HTML attributes. SEO Benefits - Faster loading times and mobile-friendliness, both facilitated by CSS, are important factors for search engine rankings , which can hel...
Read more

Advanced properties of CSS

-
Image
  In this article you will see how you can display your content better on your website with the help of using Css's properties like, text-shadow and box-shadow. #Whenever you want to apply Text-Shadow on your website in html with using CSS values .  Firstly ,  you should know that t ext -shadow accept four values like ; text-shadow:h-shadow v-shadow blur- radius  color ; h-shadow :- It is  horizontal offset of the shadows , in this positive values move the shadow to the right and the negative values move the shadow to the left. v-shadow :- It is vertical offset of the shadows , in this positive values move the shadow down and the nagative values move the shadow up. blur-radius :- The blur radius works optionally in the text-shadow . A large value makes the shadow more dispersed. Color :- This provides colour to the text-shadow. Example :- Here is how you would use the CSS text -shadow property in a HTML file to add a simple shadow to an <h1> element :...
Read more