CSS (Cascading Style Sheets) is the language used to style and lay out web pages. CSS describes how HTML elements should be displayed. A CSS rule contains a selector that identifies the element(s) to style, and a declaration block that contains properties and values to apply styles like color, font, size, and layout. Common CSS properties include color, font-size, margin, and padding. CSS rules can be defined within HTML using inline or internal stylesheets, or in external .css files linked via HTML. The box model represents elements as boxes that may include borders, padding, and margins. CSS can position elements and create page layouts using properties like float, clear, and box-sizing.

1. What is CSS?
 CSS stands for Cascading Style Sheets and it is the language
used to style the visual presentation of web pages.
 CSS is the language that tells web browsers how to render the
different parts of a web page.
 Every item or element on a web page is part of a document
written in a markup language.
 In most cases, HTML is the markup language, but there are
other languages in use such as XML.

2. CSS Syntax
CSS syntax includes selectors, properties, values, declarations,
declaration blocks, rulesets, at-rules, and statements.
 A selector is a code snippet used to identify the web page element or
elements that are to be affected by the styles.
 A property is the aspect of the element that is to be affected. For
example, color, padding, margin, and background are some of the
most commonly used CSS properties.
 A value is used to define a property. For example, the property color
might be given the value of red like this: color: red;.
 The combination of a property and a value is called a declaration.
 In many cases, multiple declarations are applied to a single selector.
A declaration block is the term used to refer to all of the declarations
applied to a single selector.
 A single selector and the declaration block that follows it in
combination are referred to as a ruleset.

3. An Example of CSS Syntax
h1 { color: red; font-size: 3em; text-decoration: underline; }
By using h1 as the selector, we are saying that every level 1 heading on the web
page should follow the declarations contained in this ruleset.
The ruleset contains three declarations:
 color:red;
 font-size: 3em;
 text-decoration: underline;
color, font-size, and text-decoration are all properties. There are literally
hundreds of CSS properties you can use, but only a few dozen are commonly
used.
We applied the values red, 3em, and underline to the properties we used. Each
CSS property is defined to acceptvalues formatted in a specific way.
When to Use Classes
 Use classes when there are multiple elements on a single web page that
need to be styled.
 For example, let’s say that you want links in the page header and footer to
be styled in a consistent manner, but not the same way as the links in the
bodyof the page.
 To pinpoint those links you could add a class to each of those links or the
container holding the links.
 Then, you could specify the styles using the class and be sure that they
would only be applied to the links with that class attribute.
When to Use IDs
 Use IDs for elements that only appear once on a web page.
 For example, if you’re using an HTML unordered list for your site
navigation, you could use an ID such as nav to create a unique hook for
that list.

4. Here’s an example of the HTML and CSS codefor a simple navigation bar for a
basic e-commerce site.
<style>
#nav {
background: lightgray;
overflow: auto;
}
#nav li {
float: left;
padding: 10px;
}
#nav li:hover {
background: gray;
}
</style>
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">Shop</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
Inline Styles
 Inline styles are applied to specific HTML elements.
 The HTML attribute style is used to define rules that only apply to that
specific element. Here’s a look at the syntax for writing inline styles.

5. <h1 style="color:red; padding:10px; text-
decoration:underline;">Example Heading</h1>
Internal Stylesheets
 An internal stylesheet is a block of CSS added to an HTML document
head element.
 The style element is used between the opening and closing head tags, and
all CSS declarations are added between the style tags.
We can duplicate the inline styles from the codeabove in an internal stylesheet
using this syntax.
<head> <style> h1 { color: red; padding: 10px; text-decoration: underline; }
</style> </head> <body> <h1>Example Heading</h1> </body>
External Stylesheets
 External stylesheets are documents containing nothing other than CSS
statements.
 The rules defined in the document are linked to one or more HTML
documents by using the link tag within the head element of the HTML
document.
To use an external stylesheet, first create the CSS document.
/************************************************* Save with a name
ending in .css suchas styles.css
*************************************************/
h1 { color: red; padding: 10px; text-decoration: underline; }
Cascading Inheritance
Why are CSS styles called cascading?
 When multiple rules are written that conflict with each other, the last rule
written will be implemented.
 In this way, styles cascadedownward and the last rule written is applied.
Let’s look at an example. Let’s write two CSS rules in an internal stylesheet that
directly contradict each other.

6. <head> <style> p {color: red;} p {color: blue;} </style> </head> <body>
<p>What color will the text of this paragraph be?</p> </body>
Uses Of CSS
CSS can be used to turn an HTML document into a professional, polished
design. Here are a few of the things you can accomplish wish CSS:
 Create a flexible grid for designing fully responsive websites that render
beautifully on any device.
 Style everything from typography, to tables, to forms, and more.
 Position elements on a web page relative to one another using properties such as
float, position, overflow, flex, and box-sizing.
 Add background images to any element.
 Create shapes, interactions, and animations.
The Box Model
If you plan to use CSS to build web page layouts, one of the first topics to
master is the box model. The box model is a way of visualizing and
understanding how each item on a web page is a combination of content,
padding, border, and margin.

7. CSS Layout - float and clear
The CSS float property specifies how an element should float.
The CSS clear property specifies what elements can float beside the
cleared element and on which side.
The float Property
The float property is used for positioning and formatting content e.g. let an
image float left to the text in a container.
The float property can have one of the following values:
 left - The element floats to the left of its container
 right- The element floats to the right of its container
 none - The element does not float (will be displayed just where it
occurs in the text). This is default
 inherit - The element inherits the float value of its parent

8. In its simplest use, the float property can be used to wrap text around
images.
Example - float: right;
The following example specifies that an image should float to the right in a
text:
img {
float: right;
}
Example - float: left;
The following example specifies that an image should float to the left in a
text:
img {
float: left;
}
Example - No float
In the following example the image will be displayed just where it occurs in
the text (float: none;):
img {
float: none;
}

9. The clearfix Hack
If an element is taller than the element containing it, and it is floated, it will
"overflow" outside of its container:
Then we can add overflow: auto; to the containing element to fix this
problem:
.clearfix {
overflow: auto;
}
Grid of Boxes / Equal Width Boxes

10. * {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc)
*/
padding: 50px; /* if you want space between the images */
}
What is box-sizing?
You can easily create three floating boxes side by side. However, when you
add something that enlarges the width of each box (e.g. padding or borders),
the box will break. The box-sizing property allows us to include the padding
and border in the box's total width (and height), making sure that the
padding stays inside of the box and that it does not break.
Images Side By Side
.img-container {
float: left;
width: 33.33%; /* three containers (use 25% for four, and 50% for two,
etc) */
padding: 5px; /* if you want space between the images */
}