Introduction to CSS ✍️

-

 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 help boost a website's visibility in search results.

  • Page load faster- If you are using CSS, you do not need to write HTML tag attribute every time. Just write one CSS rule of a tag and apply to all the occurrences of that tag. So less code means faster download times.

  • 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.
You know that you can use CSS in three ways in your HTML document:

  • Internal style sheet - Define style sheets rules in header section of the HTML document using <style> tag.

  • Inline style sheet - Define style sheet rules directly along with the HTML elements using style attribute.

CSS properties: border, margin, padding :

CSS syntax - selectors :

A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts:
  • Selector: A selector is an HTML tag at which style will be applied. This could be any tag like <h1> or <table> etc.

  • Property: A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color or border etc.

  • Value: Values are assigned to properties.

The Class Selectors

You can define style rules based on the class attribute of the elements. All the elements having that class will be formatted according to the defined rule.

Example :

.black{
color:#000000;
}

This rule renders the content in black for every element with class attribute set to black in our document. You can make it a bit more particular.

For example:

h1.black{
color:#000000;}

The ID  Selectors 

You can define style rules based on the ID attribute of the elements. All the elements having that is will be formatted according to the defined rule.

For example:

#black{
color: #000000;
}

The Difference between ID and Class;
  • The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.
 ID's are unique 
  • Each element can have only one ID
  • Each page can have only one element with that ID.
 Classes are Not unique 
  • You can use the same class on multiple elements.
  • You can use multiple classes on the same element.

CSS Rules overriding :

Here is the rule tono override any Style Sheet Rule.
  • Any inline style sheet takes highest priority. So, it will override any rule defined in<style>...</style> tags or rules defined in any external style sheet file.

  • Any rule defined in <style>...</style> tags will override rules defined in any external style sheet file.

  • Any rule defined in external style sheet file takes lowest priority and rules defined in this file will be applied only when above two rules are not applicable.

CSS Borders:

CSS border property allow you to specify the style, width, and color of an element border.

This property specifies this kind of border to display;
  • Solid border 

  • Dotted border 

  • Dashed border 

  • Double border

  • Groove border

  • Ridge border

  • Inset border 

  • Outset border

  • None or hidden 

Let us understand this border styles with some examples:-




Output is:


Output is:

# CSS Margins;

The CSS margin properties are used to create space around elements, outside of any defined borders.

Example:


Output is:



# CSS Padding;

The CSS padding properties are used to generate space around an elements content, inside of any defined borders.

With CSS, you have full control over the padding for each side of an element (top, right, bottom, and left)

Example :-


Output is :

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

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