All web pages require certain styles, and Cascading Style Sheets (CSS) are the first level of page style. It is a powerful tool for web developers to change the layout and control of web pages and how they should be displayed. It is supported by all browsers and is primarily designed to separate document content from document presentation.
CSS is a basic version and does not support responsive layouts. Cascading Style Sheets third version (CSS3) is the latest version and supports responsive design.

The CSS file allows you to separate your websites HTML content into its own style. Normally you use your HTML file to edit content, but all presentations (fonts, colors, backgrounds, borders, text formatting, link effects and more ...) are accomplished within CSS.

The selector is the HTML object you want to style. Property is the real theme of a place, and the amount of style you use in that place. Each selector can have multiple locations, and each item within the selector may have individual values. The asset and the value are separated from the colony and contained in italics. Many buildings are divided into smaller colonies. Most values within an asset are denoted by commas, and if one value contains more than one word you are surrounded by quotation marks.Ad Link

Partitioning is a HTML-level block feature used to define parts of an HTML file. A section may contain all the components that make up your website. Includes additional divisions, spans, photos, text and more.

tags: Although you may want to add some style to it. You can do this in the following way: The CSS file contains the following: Now everything in that section will be embedded in the "container" style rule, I defined within my CSS file. Separation creates an automatic line break. You can use both classes and IDs with a split tag in the style sections of your website. The panels are very similar in splits except that they are linear compared to the block level. No line break is performed when the time is announced. padding: 20px; border: 1px solid #FFF; background: #0000FF; } The CSS file contains this: #container{ width: 70%; margin: auto; padding: 20px; border: 1px solid #FFF; background: #0000FF; } Now everything in that section will be embedded in the "container" style rule, I have defined within my CSS file. Separation creates an automatic line break. You can use both classes and IDs with a split tag in the style sections of your website.

Prerequisites

Basic computer literacy, including basic software, basic knowledge of working with files, and HTML basics
Tools: Notepad ( Windows ), Notepad++, Sublime Text 3, TextEdit ( Mac )
Understand the basics of linking a CSS document to an HTML file, and be able to create simple text formatting with CSS
Passion for learning!!!

Three terms of styles

< ! -- Three terms for describing styles- Rules, Selectors, and Properties -- >
< ! -- selector- { } -- >
< ! -- declaration- property: value; -- >
< ! -- rule- { property: value; } -- > selector { property: value; }

Selectors

Selectors select Hyper Text Markup Language elements based on its id, class, type, attribute etc. This is used to target one or more HTML elements to apply our CSS rules.

Type / Element Selector Body, p, h1, ul { declaration } ID Selector
< ! -- Identifies any tag of HTML page exactly for linking CSS or JS file -- >
< ! -- ids using the # symbol -- > #logo { declaration } Class Selectors
< ! -- Identifies separately various similar tags within a HTML page -- >
< ! -- Classes are identified using the . symbol -- > .class { declaration } Multiple Classes
< ! -- If you want two classes on one element, do it this way -- > .class.time { declaration } Descendant Selector
< ! -- The space between two selectors indicates a descendant selectors -- >
< ! -- selects all paragraph elements inside class content elements -- >
.content p { declaration }

Properties

Text Properties: color: olive; text-align: right; [ For more use- left, center ] text-indent: 50px; letter-spacing: 5px; word-spacing: 50px; text-decoration: overline; [ For more use- line-through, underline, none ] text-transform: upercase; [ For more use- lowercase, capitalize ] text-shadow: 2px 2px 8px orange; white-space: pre; Background Properties: background-color : yellow; background-image: url( " rasel.png " ); background-repeat: no-repeat; background-position: 100px; background-attachment: fixed; overflow: auto;

Link

 a {
color: green;
}

< ! -- a:link- A normal, unvisited link -- >
< ! -- a:visited- A link the user has visited -- >
< ! -- a:hover- A link when the user mouses over it -- >
< ! -- a:active- A link the moment it is clicked / Selected link -- >

a:link
a:visited
a:hover
a:active

Box Model

< ! -- Content- The text, image, or other media content in the element -- >
< ! -- Padding- The space between the box’s content and its border -- >
< ! -- Border- The line between the box’s padding and margin -- >
< ! – Margin- The space between the box and surrounding boxes -- > width: 300px; border: 15px solid green; padding: 50px; margin: 20px; [ For more use- margin-top, bottom, right, left ] height: 200px; font-size: 32px; font-weight: bold;

Layout

< ! -- The layout consist of headers, menus, content, footer and so on. -- >

< ! -- Block is used for padding, margin, width -- > display: block; [ For more use- inline, inline-block ] float: left; [ right, none ] position: absolute; [ For more use- relative, fixed, static ( default )] < ! -- multiple float -- > float: left float: left float: left; clear: left; [ For more use- right, both ]

Flex

< ! -- flex is a block level container box -- >
< ! -- inline flex is a inline level container box -- >
< ! -- flex is a 1-dimensional system -- >
< ! -- flex is for alignment -- > display: flex; [ For more use- inline-flex ] flex-wrap: nowrap; [ For more use- wrap, wrap-reverse ] flex-flow: row nowrap; [ For more use- column-reverse, column wrap, row-reverse, wrap-reverse ] order: -1; [ For more use- 0, 1 ] justify-content: flex-start; [ For more use- flex-end, center, space-between, space-around, space-evenly ] align-items: flex-start; [ For more use- flex-end, center, baseline, stretch ] align-self: flex-start; [ For more use- flex-end, center, baseline, stretch ] align-content: flex-start; [ For more use- flex-end, center,space-between,space-around,space-evenly,stretch ] flex-grow: 0; [ For more use- 1 ] flex-shrink: 0; [ For more use- 1 ] flex-basis: 30% [ For more use- 50%, content ]

Grid

< ! -- This is a 2-dimensional system, meaning it can handle both columns and rows. It lets you lay content out in rows and columns. -- >
< ! -- grid – generates a block-level grid -- >
< ! -- inline-grid – generates an inline-level grid -- >
< ! -- css grid for layout -- >

display: grid; [ For more use- inline-grid, subgrid ] grid-template-columns: 12px 12px 12px; [ For more use- repeat ( 3, 12px ), 8px auto 8px, 22% 22% auto ] grid-template-rows: 12px 12px 12px; [ For more use- repeat ( 3, auto ), 8px auto 12px, 22% auto 22% ] grid-gap: 1px 9px; [ For more use- 6px ] grid-row-gap: 1px; grid-column-gap: 9px; justify-items: start; [ For more use- end, center, stretch ( default ) ] align-items: start; [ For more use- end, center, stretch ( default ) ] justify-content: start; [ For more use- end, center, stretch, space-around, space-between,space-evenly ] align-content: start; [ For more use- end, center, stretch, space-around, space-between,space-evenly ] grid-auto-flow: row; [ For more use- column, dense ] grid-column: 2/3; [ For more use- 2/span2 ] grid-column-start: 1; [ For more use- span3, 2 ] grid-column-end: 3; [ For more use- 4 ] grid-row: 1/3; [ For more use- 1/span3 ] grid-row-start: 1; [ For more use- span3/2 ] grid-row-end: 3; [ For more use- 4 ] justify-self: start; [ For more use- end, center, stretch ( default ) ] align-self: start; [ For more use- end, center, stretch ( default ) ]

Input style

input[ type = text ]{
		width: 80%;
		padding: 15px 22px;
		margin: 10px 5px;
		box-sizing: border-box;
		}

Rounded Element

• border-radius declaration • smooth out your interfaces • button effects

.box{ border-radius: 8px; }

Gradients/Opacity

• no more background images • transparency

.pic{ opacity: 0.8px; }

Transition

• Animation behavior • Scaling, fading, easing, etc.

body {
-o-transition:all .2s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
transition:all .2s linear;
}

Media Queries

• switch stylesheets based on width and height of viewport • same content, new view depending on device

@media screen and (max-devicewidth:480px) {…mobile styles
here...}

Media Queries in Action

link rel="stylesheet"
type="text/css” media="screen
and (max-device-width:480px) and
(resolution: 163dpi)”
href="media.css" />