Introduction with CSS and CSS3

Category: Web Development & Approved by devanshchakravarti83@gmail.com On January-11-2021 13:02:51

Starting with CSS and CSS3



What is CSS?
Cascading Style Sheets, is referred as CSS, it’s generally a design language through which web pages are made presentable. You should start learning after HTML. You can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. You can use to write CSS code in normal Notepad or different available IDE software like Notepad++, Visual code, NetBeans, and others.

Advantages of CSS

  • CSS saves time - You can write CSS once and then reuse the 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.

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

  • Easy maintenance - To make a global change, simply change the style, and all the elements in all the web pages will be updated automatically.

  • Superior styles to HTML - CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.

  • Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cellphones or for printing.

  • Global web standards – Now HTML attributes are being deprecated and it is being recommended to use CSS. So it’s a good idea to start using CSS in all the HTML pages to make them compatible with future browsers.



CSS ─ Syntax
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 a 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, border, etc.

  • Value: Values are assigned to properties. For example, color property can have the value either red or #F1F1F1 etc.


CSS Style Rule Syntax as follows:
selector { property: value; }

The Basis Of Comparison Between CSS vs CSS3


  • Compatibility
    CSS: CSS1 is not compatible with CSS3. Its main focus was on providing various formatting features. They also added positioning capabilities for texts and objects. But all this were gradually updated to CSS3. Hence we can say that CSS has risen to CSS3.
    CSS3: CSS3 is backward compatible with CSS1. It will not make any code written in CSS1 as invalid. It makes the look and feel of a web page even better. They load faster and the time required to build a page is even less.

  • Rounded corners and Gradients
    CSS: Before CSS3 was launched developers used to design images which looked like rounded corners to different structures and background gradients. The process included the developer designing the particular border, uploading this design over the server, placing the image on the web page and in the end CSS had to correctly position this border.
    CSS3: From the time CSS3 has been introduced the developer just needs to write the code like “.roundBorder{border-radius:10px;}”. Tada! It’s done. The user need not place the code on the server and perform the other activities. The gradients can be set by using code like “.gradBG{background: liner-gradient(white,black);}”

  • Animation and Text Effects
    CSS: Animations in CSS were written in JavaScript and JQuery. CSS did not have features in the design layer and the page elements also could not have special effects like text shadowing, text sections, etc.
    CSS3: Using CSS3 a developer can add text shadow to make it easier to read. They can also add visual effects to break lines and longer words so that they fit properly inside the columns and word wraps. Other features also include a continuous change of size and color of text. The time of change can be set. Even an action like hovering a mouse can be set for the change.

  • Lists
    CSS: CSS allows a user to :

    1. Set different lists for ordered lists.

    2. Set different lists for unordered lists.

    3. Set an image for a list item marker.

    4. Add background colors to list and list items.


    The different list item markers are list-style-type.These can be set as circle, square, etc.
    CSS3:To use a list in CSS3 the ‘display’ property must have list item defined in it. The list item has a counter and is directly affected by counter increment and counter reset properties. CSS3 does not support numbering system and hence might ignore it being used. The list style image property in CSS3 enables that an image is set against the list item marker. Once the image is available it will be set to list style type marker.
    It also has the list style position property which will specify the position of marker box in a principal box. It can be set as either inside the box or outside the box.

  • Pseudo-Classes
    CSS: Pseudo-classes are used to specially define a state of an element.


    Syntax:

    selector: pseudo-class {
    property: value;
    }
    It provides different properties like Hover on(), Simple tooltip hovers (). The: first-child pseudo class matches the first child of any element.

    CSS3: Pseudo-classes in CSS3 are pretty similar to CSS. But they have some additional features that make it easier and famous to use. These include:

    1. :root target which document’s root element.

    2. :nth-child(n) uses numeric values within (n) to target child elements with respect to their position in the parent. For instance, you could use this to add alternating background colors to blog comments

    3. :empty targets elements that do not have text or children, like empty elements such as






Note: content are taken from various documentation files



Comments

Share your thoughts about this post
web counter