Introduction to Basic CSS

Posted by admin at March 22, 2020

CSS Overview

Initially, websites were written primarily with HTML, before web designers adopted CSS. The W3C (The World Wide Web Consortium) invented CSS in 1996 to complement the content function of HTML. CSS started to become popular around 2000 with users looking for more style in the websites they were visiting. Up to this point, web designers had been focused on content; now users were expecting visually appealing websites as well.

The popularity of CSS grew because it provided a direct way for web designers to separate a web page’s appearance from its content and underlying structure. This separation allowed web designers to control the aesthetic elements of their web pages, specifically, a web page’s fonts, colors, and layout.

Web designers use CSS to easily customize websites and control all aspects of presentation, while reducing the amount of bandwidth needed for a website. In addition, CSS requires that web designers only use one style sheet instructing the print parameters of a page instead of having to code each page individually. Style sheets describe how documents are presented on screens, in print, or perhaps how they are pronounced. By attaching style sheets to structured documents on the Web via HTML, web designers can influence the presentation of documents without sacrificing device-independence or adding new HTML tags.

The benefits of using CSS include:

  • Providing a consistent look and feel to a website
  • Using one or two stylesheets to maintain a website’s consistent colors, fonts, links, and other elements without having to hard code the same information on each and every page of the website
  • Saving time by quickly implementing global changes across a website via the style sheet
  • Creating websites that can respond to varying screen sizes

Cascading Style Sheets (CSS) tell the browser how to display the text and other content that you write in HTML.

Note that CSS is case-sensitive so be careful with your capitalization.

CSS has been adopted by all major browsers and allows you to control:

  • color
  • fonts
  • positioning
  • spacing
  • sizing
  • decorations
  • transitions

There are three main ways to apply CSS styling. You can apply inline styles directly to HTML elements with the style attribute. Alternatively, you can place CSS rules within style tags in an HTML document. Finally, you can write CSS rules in an external style sheet, then reference that file in the HTML document. Even though the first two options have their use cases, most developers prefer external style sheets because they keep the styles separate from the HTML elements. This improves the readability and reusability of your code.

The idea behind CSS is that you can use a selector to target an HTML element in the DOM (Document Object Model) and then apply a variety of attributes to that element to change the way it is displayed on the page

Syntax:

body{
   background-color:#ccc;
   color:#f4f4f4;
   font-size:14px;
   font-family: 'Poppins', sans-serrif;
}
h1{
  font-size: 18px;
  font-weight:bold;
  color: #5555;
}


Comments

Write a Reply or Comment