CSS: Beginner’s Guide

Introducing CSS, font attributes, color and background attributes, text attributes, border attributes, margin related attributes, list attributes, Using class and span tag, External Style Sheets.

What is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes. 

A simple mechanism for controlling the style of a Web document without compromising its structure.

It allows you to separate visual design elements (layout, fonts, colors, margins, and so on) from the contents of a Web page.

Allows for faster downloads, streamlined site maintenance, and global control of design attributes across multiple pages.

CSS vs. just HTML
What can we do with CSS that we can’t do with HTML?
Control of backgrounds.
Set font size to the exact height you want.
Highlight words, entire paragraphs, headings or even individual letters with background colors.
Overlap words and make logo-type headers without making images.
Precise positioning.
Linked style sheets to control the look of a whole website from one single location.
And more.

CSS Syntax
Selector: Selector indicates the HTML element you want to style. It could be any tag like <h1>, <title> etc.
Declaration Block: The declaration block can contain one or more declarations separated by a semicolon. For the above example, there are two declarations:
1.color: yellow;
2.font-size: 11 px;
Each declaration contains a property name and value, separated by a colon.
Property: A Property is a type of attribute of HTML element. It could be color, border etc.
Value: Values are assigned to CSS properties. In the above example, value “yellow” is assigned to color property.

Selector{Property1: value1; Property2: value2; ……….;}  

CSS Selector

CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.
There are several different types of selectors in CSS.
CSS Element Selector
CSS Id Selector
CSS Class Selector
CSS Universal Selector
CSS Group Selector

studymumbai

StudyMumbai.com is an educational resource for students, parents, and teachers, with special focus on Mumbai. Our staff includes educators with several years of experience. Our mission is to simplify learning and to provide free education. Read more about us.