DEV Community

Cover image for CSS {type : kick-off;}
Mohammed Saied
Mohammed Saied

Posted on

CSS {type : kick-off;}

Hello ...what should i call you developer of cascedies whatever.

CSS

A Cascading Style Sheet, commonly known as CSS, is the layer of styling over HTML elements, or in simpler terms, it lets you style the elements (font, size, color, and spacing) of your HTML pages and content by gently applying classes to it. CSS takes care of the presentation and helps you determine how the pages and content that you make with HTML are going to look and display. CSS will be a savior once you have learned to master the code. To master CSS, you first need to understand the different types of CSS.

What CSS offers to WEB?

  1. Consistency
    the changes to the pages of your website. By making one change to your CSS style-sheet, you can consequently make it to each page of your website.

  2. Browser Compatibility
    Browser compatibility is something that is very important and with CSS, it is easy to withhold as it addresses this issue nicely.

  3. Appearance
    it is easy to improve the look-and-feel of the website from one place as it allows you to use a various choices of extensive styles.

  4. Maintainability
    the ability to automatically correct and change every page throughout your website whenever a change is made to your website’s style sheet.

  5. Saves Time
    you only need to specify details of the styling once for any element and it will automatically apply the specified styles whenever that particular element occurs. Hence, it saves a lot of time by not forcing you to rewrite everything again and again.

Example:-
Pure HTML : HTML

Pure HTML

Integration CSS with the HTML : HTML-CSS

CSS with the HTML

CSS file that integrated with HTML is a style space for your HTML (font, size, color, and spacing) properties the scheme that CSS is following in coding.

Selectors

Selectors Scheme

Selector is pointer to specify a item in HTML page to apply this property as the previous example. So,if i want to select all h1 tags from my HTML file and give them font and layout property.

tags

Types of Selector

Element Selector : all <p> elements on the page will be center-aligned, with a red text color.

Element Selector

Id Selector : The CSS rule below will be applied to the HTML element with id="para1".

id Selector

Class Selector : all HTML elements with class="center" will be red and center-aligned

class Selector

So how the the webpages before-time looks like?>

webpages

With Upgrading of HTML/CSS and Browsers and protocols from web 1.0 to web 3.0, right now the world have big business just upon these modern web technologies.

Conclusion
The CSS is brush of the web developer in addition to learning framework like bootstrap and similar frameworks require solid understanding of CSS, and Backdoor. Lastly, CSS is the millstone of the web these days so learning it well be the first stone on your career wall.

Learning materials:-
WEB DEV
W3C
CODECADEMY
DEV MOZILLLA

Top comments (0)