Introduction to CSS

introduction

• Introduction to CSS
• How and where to write CSS?
• CSS Selectors
• Size and Other Units of Measurement
• CSS colors
• Other uses of colour

Formatting Text

• CSS Fonts
• Text formatting

Box Model

• Borders
• Margins
• Paddings
• Height and width
• The box model
• Outline

Advanced selectors

• Combinators
• Pseudo–classes
• Pseudo Elements

More about CSS

• Linking style sheets to a page
• Applying CSS
• CSS comments
• Background
• Overflow
• Float
• Opacity

What is CSS?

CSS is the language we use to style an HTML document. Cascading Style Sheets(CSS) is a style sheet language that allows you to control the appearance of your webpages. It is generally used with HTML to change the style of web pages and user interfaces. CSS is used along with HTML and JavaScript in most websites to create user interfaces for Web applications and user interfaces for many mobile applications. For example,

body{
  background-color: green;
}
h1{
  font-size: 1rem;
}

Styling a site means giving a set of instructions that tell the browser which font, color, size to your text, how much white space around different parts of the page, and so on. Simply Cascading Style Sheets have properties and values. Most properties have intuitive names like font-size, color, background, etc., values are specified using keywords or concepts that you are likely familiar with. For example pixels, RGB, HSL color formats. If you don’t know the color RGB value, don’t worry you can directly give the color name. We add look and feel to our HTML documents as the way we want. By using css we can give uniqueness to our website.

Why should we use CSS?

There are three major benefits with CSS

1. Solving big problems: Some HTML elements repeatedly occur in HTML. For that if we want to give styles no need to write repeatedly. By selecting that HTML element we can give styles at one place only. It will apply all over the HTML document wherever the selected element is. 
2. Saves a lot of time: By writing style definitions externally, it will reduce the confusion to screen readers. It is a time saving process.
3. Provide more attributes: CSS provides more detailed attributes than plain HTML to define the look and feel of the website. CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.