Getting Started With

HTML and CSS

powered by



Click here to begin!

Introduction

HTML is used to provide the content(words, images, audio, video, and so on) to the web pages. CSS is then used to improve the presentation of the content. All you need is a text editor to make html files. Just remember to save them with “.html” extension! To view the page open the file with a web browser. Sample HTML code looks like this:
<!DOCTYPE html> <html> <head> </head> <body> This is sample text...<br> You are beginning to learn HTML. <!-- We use this syntax to write comments --> <!-- Page content and rest of the tags here.... --> <!-- This is the actual area that gets shown in the browser --> </body> </html>

The file when opened in a web browser appears as

HTML is a tag based language. They are defined within the angle brackets. Description and definition of tags used in the above example is given in next section.

Tags, Attributes and Elements

Basic HTML just contains plain text. All the awesome things are included using the following things:
Tags

Meaning to the plain text of HTML is applied using tags. i.e. tags define all elements of the document.
Most of the tags have opening and closing. The closing is just the name of the tag with character '/' in the beginning. A tag needs to have a closing tag if it includes some content. Tag with an opening and closing can have any number of tags included within itself! Eg: <html> and </html>.
When a tag doesn't contain any content but is just meant to symbolify something then it doesn't need the closing tag. Eg: <br> is used to give line break in text. It doesn't have any content but just directs the browser to show the remaining content from next line.

Description of the tags used in the previous section is as follows:
  • <!DOCTYPE html> tells the browser that the file being displayed contains HTML5
  • <html> and </html> meant to contain all the html data
  • <head> and </head> provides information about the document
  • <title> and </title> provides a title for the document
  • <body> and </body> contains all the things visible on the web page

NOTE: You might come across “self-closing” tags, whereby a br tag, for example, will look like “<br />” instead of simply “<br>”. This is a remnant of XHTML, a form of HTML based on another markup language called XML. HTML5 is much more chilled out than XHTML and will be happy with either format. Some developers prefer one way, some prefer the other.


Attributes

Attributes control tag behaviour.They are present in the opening tags. They consist of two parts: First is the name of attribute and second is its value which is enclosed within double inverted commas.Example:

<tag_name attribute_name="value_value">Content Enclosed</tag_name>

Elements

Elements are the things that actually make up the web page. Tags just define the beginning and end of the elements. Everything that a web page includes is an HTML element.

Page Title

Head of a document is the place where information about the document is written. The title of the document is mentioned in the head using the <title> tag.

<!DOCTYPE html> <html> <head> <title>This is the Title</title> </head> <body> <!--Syntax for the body goes here--> </body> </html>

This is rendered as:

Notice the title of the page appears as the name of the tab!

Paragraphs

Paragraphs are blocks of text separated from each other by some space. They are defined using the <p> and </p> tags. When p tag ends, the next thing appears in next line.

<!DOCTYPE html> <html> <head> <title>p tag</title> </head> <body> <p>This is line 1.</p> <p>This is line 2.</p> <p>This is line 3.</p> <br> <!-- trying to format the text without using p-tag --> This is line 1. This is line 2. This is line 3. </body> </html>

It appears on a web browser like this:

This is line 1.

This is line 2.

This is line 3.


This is line 1. This is line 2. This is line 3.

When formating without p-tag, new lines are appended on the current line. This happens because the browser doesn’t see to the formatting of text. You have to use appropriate tags for formatting the text. More on formatting text would be there later in this tutorial.

Headings

There are tags in HTML to mark some content as headings. In fact, there are six different levels of headings h1, h2, h3, h4, h5 and h6. Among them h1 is the mightiest i.e. it is the largest heading and h6 is the smallest level heading.

<!DOCTYPE html> <html> <head> <title>Heading Levels</title> </head> <body> <h1>Heading level 1</h1> <h2>Heading level 2</h2> <h3>Heading level 3</h3> <h4>Heading level 4</h4> <h5>Heading level 5</h5> <h6>Heading level 6</h6> </body> </html>

The content appears as:

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

Lists

There are three type of lists in html. First two are ordered lists and unordered lists. They both are almost the same. Unordered lists are used when the numbering of items is not required and by default the items are followed by bullets. Whereas in ordered lists the items are displayed by a preceding numbering. The numbering style can be controlled by CSS that you will be learning soon!!

Unordered Lists

They are defined using the <ul> tag and the items are enclosed in the <li> tags.

<!DOCTYPE html> <html> <head> <title>Unordered Lists</title> </head> <body> <h1>Lists</h1> <ul> <li>first item</li> <li>second item</li> <li>third item</li> </ul> </body> </html>

The output is as follows:

Lists

  • first item
  • second item
  • third item

Nesting of lists can be done which means that lists-items can contain sub-lists in them.

<!DOCTYPE html> <html> <head> <title>Unordered Lists</title> </head> <body> <h1>Lists</h1> <ul> <li>first item</li> <li>second item <!-- Look, the closing </li> tag is not placed here! --> <ul> <li>second item first subitem</li> <li>second item second subitem <!-- Same for the second nested unordered list! --> <ul> <li>second item second subitem first sub-subitem</li> <li>second item second subitem second sub-subitem</li> <li>second item second subitem third sub-subitem</li> </ul> </li> <!-- Closing </li> tag for the li that contains the third unordered list --> <li>second item third subitem</li> </ul> </li><!-- Here is the closing </li> tag --> <li>third item</li> </ul> </body> </html>

The output is as follows:

Lists

  • first item
  • second item
    • second item first subitem
    • second item second subitem
      • second item second subitem first sub-subitem
      • second item second subitem second sub-subitem
      • second item second subitem third sub-subitem
    • second item third subitem
  • third item

There is no limitation to the depth of nested lists.


Ordered Lists

They are defined using the <ol> tag and the items are enclosed in the <li> tags.Typically, ordered-list items are displayed with a preceding numbering. The numbering style can be of any kind like like numerals, letters or Romans numerals. The default one is numerals

<!DOCTYPE html> <html> <head> <title>Onordered Lists</title> </head> <body> <h1>Lists</h1> <ol> <li>first item</li> <li>second item</li> <li>third item</li> </ol> </body> </html>

The output is as follows:

Lists

  1. first item
  2. second item
  3. third item

Using the attribute 'start' we can specify from where the numbering starts by giving its value.

<!DOCTYPE html> <html> <head> <title>Onordered Lists</title> </head> <body> <h1>Lists</h1> <ol start="7"> <li>first item</li> <li>second item</li> <li>third item</li> </ol> </body> </html>

Note:Notice that value of the attribute start appeared in double inverted commas.

Lists

  1. first item
  2. second item
  3. third item

Nesting can also be done using ordered lists. Also a combination of ordered and unordered lists can be used!

NOTE:List styles can be changed using CSS, which you will be learning soon.

Images

To add images in the html documents img tag is used. This tag is a self closing tag which means that it doesn’t contain the closing tag. The src attribute is used to mention the source of the image. The source of the image can be a local file or some it can be some url also.
An important attribute is alt. It provides the alternate content for the image for the users who are unable to see the image (if they are visually impaired, for example). Also, if the image fails to load then the alternate content is shown.

Note: images with different extensions like .png, .jpeg can be used. Also gifs can be displayed using the img tag.

An example:

<img src="images/logo.png" alt="Image">

The image appears as

Image

Tables

Tables are used to show the tabular data. To achieve this many tags are used. All the table-data is enclosed within the table tags. After that tr tags enclose table rows. Each row contains a number of data enteries which are enclosed by td tags. td stands for table-data and tr for table row. Number of table-data elements in a row are equal to the number of columns of that table. And the border attribute is used for mentioning the thickness of the borders, if the border attribute is not mentioned then there would be no border.

<table border=1> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> <td>Row 1, cell 3</td> </tr> <tr> <td>Row 2, cell 1</td> <td>Row 2, cell 2</td> <td>Row 2, cell 3</td> </tr> <tr> <td>Row 3, cell 1</td> <td>Row 3, cell 2</td> <td>Row 3, cell 3</td> </tr> <tr> <td>Row 4, cell 1</td> <td>Row 4, cell 2</td> <td>Row 4, cell 3</td> </tr> </table>

The table appears as

Row 1, cell 1 Row 1, cell 2 Row 1, cell 3
Row 2, cell 1 Row 2, cell 2 Row 2, cell 3
Row 3, cell 1 Row 3, cell 2 Row 3, cell 3
Row 4, cell 1 Row 4, cell 2 Row 4, cell 3

Table: Rowspan

To manage the layout of the the tables, two attributes are used. One is rowspan and other is colspan. rowspan is used to mention the number of rows that a particular cell will be occupying. This is done by using the attrtibute in the td tag.

<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> <td>Row 1, cell 3</td> </tr> <tr> <td rowspan="2">Row 2, cell 1, and row 2, cell 2</td> <td>Row 2, cell 2</td> <td>Row 2, cell 3</td> </tr> <tr> <td>Row 3, cell 2</td> <td>Row 3, cell 3</td> </tr> </table>

The output appears as:

Row 1, cell 1 Row 1, cell 2 Row 1, cell 3
Row 2, cell 1, and row 2, cell 2 Row 2, cell 2 Row 2, cell 3
Row 3, cell 2 Row 3, cell 3

Table: Colspan

Attribute colspan is used to mention the number of columns that a particular cell will be occupying. This is done by using the attrtibute in the td tag. Both colspan and rowpan can be used in th tag (table-heading tag), which is used to enclose headings in tables.Example:

<table border=1> <tr> <th>Column 1 heading</th> <th colspan="2">Column_2_and_3_heading</th> <!-- <th>Column 3 heading</th> --> </tr> <tr> <td>Row 2, cell 1</td> <td colspan="2">Row 2, cell 2, also spanning Row 2, cell 3</td> </tr> <tr> <td>Row 3, cell 1</td> <td>Row 3, cell 2</td> <td>Row 3, cell 3</td> </tr> <tr> <td>Row 4, cell 1</td> <td>Row 4, cell 2</td> <td>Row 4, cell 3</td> </tr> </table>

The output appears as:

Column 1 heading Column 2,3 heading
Row 2, cell 1 Row 2, cell 3
Row 3, cell 1 Row 3, cell 2 Row 3, cell 3
Row 4, cell 1 Row 4, cell 2 Row 4, cell 3

Forms Basics

HTML Forms are one of the main points of interaction between a user and a web site or application. Through forms, a user enters the data which is either processed by the browser itself (using Javascript) or the data goes to the servers where it gets processed.
An HTML form may contain a lot of elements like text fields (single line or multiline), select boxes, buttons, checkboxes, or radio buttons. Let us start with just a basic form without any elements:

<form action="/address_to_handle_form" method="post"> </form>

Since the form doesn't contain any element,currently, nothing will appear as output.

NOTE:Notice the attributes action and method. We need to tell the form where it should send the data that is entered, this is done using action attribute. There are many methods to send data to the address mentioned. Most important ones are get, and post. Method get is used when privacy is not a concern and the data is small and the data entered in the form goes to the destination as a part of the address mentioned in the attribute, whereas the post is used to send data more securely.

Input Tag

It is the most important element of the forms. It can take various forms using the type attribute. Here are the examples:

  • <input type="text"> or simply <input> is a standard textbox. This can also have a value attribute, which sets the initial text in the textbox.
  • <input type="password"> is similar to the textbox, but the characters typed in by the user will be hidden.
  • <input type="checkbox"> is a checkbox, which can be toggled on and off by the user. This can also have a checked attribute (<input type="checkbox" checked> - the attribute doesn’t require a value), and makes the initial state of the check box to be switched on, as it were.
  • <input type="radio"> is similar to a checkbox, but the user can only select one radio button in a group. This can also have a checked attribute.
  • <input type="submit">is a button that when selected will submit the form. You can control the text that appears on the submit button with the value attribute, for example <input type="submit" value="Ooo. Look. Text on a button. Wow">.

These were the basics of forms, more will be coming in forms advanced section later!!

HTML vs CSS

Click the button below to start the animation:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Reach us

Plot Number 360, Kohat Enclave, Main Pitam Pura Road, Delhi 110034, Opposite Kohat Metro Station exit 3.

CSS: Getting Started

Cascading Style Sheets(CSS) is a stylesheet language used for the presentation of a document written in a markup language like HTML,XML. It includes adding colors,fonts,layout to our HTML page. CSS code looks like this:

h1 { font-family: monospace; } /*This is a comment in CSS*/ h2 { color: blue; }

It's HTML code is:

<h1>Welcome to Coding Tutorial!</h1> <h2>Where coding is a way of life..</h2>

gives the output..

Welcome to Coding Tutorial!


Where coding is a way of life..

There are three ways of applying it Inline,Internal and External. All these are discussed in the next sections.

CSS: Inline

Inline CSS is applied directly to our HTML code using the style attribute.
Here's the HTML code..

<p style="color:red">Inline CSS</p>

Output Will be..

Inline CSS

also, multiple properties can be added to an element.


HTML code is..

<p style="color:blue;font-size:40px">Inline CSS</p>

Will output the following..

Inline CSS

CSS: External

An External CSS can be applied using a complete different CSS file.
This CSS file must be linked to our HTML file using the link tag. Here's the HTML code..

<head> <link rel="stylesheet" type="text/css" href="Style.css"> </head> <body> <h1>External CSS</h1> <br> <p>This is External CSS.</p> </body>

The external CSS file must be saved with .css extention, e.g."Style.css".Here's how our "Style.css" will look like..

h1 { color: navy; } p { font-size: 30px; color: green; }

Output will be...

External CSS


This is External CSS.

CSS: In Page

An internal or in-page stylesheet holds the CSS code for the webpage in the head section of the particular file.
Internal CSS can be applied using style tag inside the head tag.
Here's the HTML code..

<head> <style> h1 {color:blue;} h2 {color:red;} p {color:green;} </style> </head> <body> <h1>In-page CSS</h1> <h2>OR</h2> <p>INTERNAL CSS</p> </body>

Output generated will be..

In-page CSS


OR

INTERNAL CSS

Selectors, Properties, and Values

A selector points to the HTML element which we want to style.e.g..

p{color: blue;}

In the above code p is the selector.In other words a selector is nothing but a HTML tag use to style that element.

A Property refers to the various CSS styles that can be applied to a selector.For e.g.

h3 { font-size: 30px; color: red; font-family: Monospace,sans-serif; }

font-size, color, font-family are the properties that are applied to the selector h3 in the above code.

A value is given to a property. 30px, red, Monospace, sans-serif are the values given to the property in above code.
Properties and values are seprated by a : (colon).

In general..

Colors

The color property sets the foreground color of an element's text content, and its decorations.

Names.

All modern browsers support 140 different colors named in CSS.

You can apply any of these colors to a website or blog by using the relevant CSS code.

  • To set an element's background color use background-color property.
  • To set the text color, use color property.
  • To set a border color, use border-color property.
div { background-color:orange; color:white; }

CSS COLORS.

Here's a list of color values you can use with CSS.
  • rgb()
  • rgba()
  • hsl()
  • hsla()

rgb()

RGB (which stands for Red, Green, Blue) is a color model in which red, green and blue light can be added together to reproduce a color.
The RGB value for black looks like this: rgb(0, 0, 0). The RGB value for white looks like this: rgb(255, 255, 255).

Each of the three values can be provided as an integer or as a percentage. The integer value 255 corresponds with a percentage value of 100%.
h1 {color: rgb(255,0,0);} h2 {color: rgb(0,128,0);} h3 {color: rgb(160,82,45);} h4 {color: rgb(0,255,255);}

will output..

I am red!


I am green!


I am sienna!


I am aqua!

Also rgb() colors can also be represented by using CSS 6 Digit Hex Colors.This CSS 6-digit hex color notation allows you to specify RGB colors using hexadecimal values.

h1 {color: #ff0000;} h2 {color: #008000;} h3 {color: #a0522d;} h4 {color: #00ffff;}

Will output same as the above.

Note:The standard format of representing hex values is #RRGGBB
RR represents the Red component of color.
GG represents the Green component of color.
BB represents the Blue component of color.


rgba()

The CSS rgba() function is used to provide a color value with alpha transparency with the CSS. It allows you to specify an RGB color value with an alpha value to determine the color's transparency.
This alpha value lies from 0 to 1 from transparent to opaque.

h3 {background-color: rgba(255, 0, 0, 0.3);} h2 {background-color: rgba(0, 255, 0, 0.3);} h1 {background-color: rgba(0, 0, 255, 1);}

results in..

Red with opacity


green with opacity


blue with opacity

hsl()

The CSS hsl() function can be used to provide a color value when using CSS. It allows you to specify a color value by specifying the hue, saturation, and light components of the color.

  • Hue: Any angle, from 0 to 360, taken from a typical color wheel, where “0” (and “360”) is red, “120” is green and “240” is blue.
  • Saturation :It represents the amount of saturation in the color.For example, 100% is fully saturated (more colorful and intense), while 0 is a fully-unsaturated gray.
  • Lightness:It represents the amount of light in the color. For lightness, 50% is the "normal" setting, while 100% is white and 0% is black.
h4 {background-color: hsl(120, 100%, 50%);} h3 {background-color: hsl(120, 100%, 75%);} h2 {background-color: hsl(120, 100%, 25%);} h1 {background-color: hsl(120, 60%, 70%);}

gives us...

hsl green


hsl lightgreen


hsl dark green


hsl pastel green

hsla()

Adding an alpha value to hsl gives us the option to add opacity to our CSS by using the hsla() function.

h4 {background-color: hsla(120, 100%, 50%, 0.4);} h3 {background-color: hsla(120, 100%, 75%, 0.4);} h2 {background-color: hsla(120, 100%, 25%, 0.4);} h1 {background-color: hsla(120, 60%, 70%, 0.4);}

results in..

hsla green


hsla lightgreen


hsla dark green


hsla pastel green

Text

Various Font changing properties can be applied to change the shape and size of the text in our CSS.


font-family

Changes the font to the specified style.Examples are Arial, sans-serif, monospace.

h1 { font-family: Arial,monospace,helvetica; }

This code will output..

Arial,monospace,helvetica

Arial, monospace, helvetica represents the order in which the CSS will search for the fonts in user's computer (If one is not present then it will move to other).

Note: If the font is more than one word then it should be put in quotation marks like "Times New Roman".

like..

h1 { font-family: "Times New Roman", Times, serif; }
font-size

Changes the size of our font.Values can be applied in em or px.

p { font-size: 30px;} p { font-size: 3.2em;}

will show..

px


em

font-weight

Specifies the weight of the font from lighter to bolder.Values can be bold, normal, lighter(100, 200, 300, 400), normal(500, 600, 700), bolder(800, 900).

p { font-weight: 100;} p {font-weight: bold;}

font-weight: 100;


font-weight: bold;


font-style

Changes the style from normal to italics or vice-versa.

p { font-style: italic; }

gives...

Italics


text-decoration

The text-decoration property specifies the decoration added to text.This property can be underline, overline, or line-through.

h3 { text-decoration: overline; } h3 { text-decoration: line-through; } h3 { text-decoration: underline; }

outputs..

overline


line-through


underline


text-transform

Changes the case of text.It may be uppercase, lowercase, capitalize or none.

  • lowercase makes all of the letters in the selected text lowercase.

  • uppercase makes all of the letters in the selected text uppercase.

  • capitalize capitalizes the first letter of each word in the selected text.

  • none leaves the text's case and capitalization exactly as it was entered.

h1 { text-transform: lowercase; } h1 { text-transform: uppercase; } h1 { text-transform: capitalize; } h1 { text-transform: none; }

outputs the following..

lowercase


uppercase


capitalizes every first letter


none


Text-Spacing

Includes following properties..

  • The letter-spacing and word-spacing properties are for spacing between letters or words.

  • The line-height property sets the height of the lines in an element, such as a paragraph, without adjusting the size of the font.

  • The text-align property will align the text inside an element to left, right, center, or justify.

  • The text-indent property will indent the first line of a paragraph.

here's the CSS code..

p { letter-spacing: 0.5em; } p { line-height: 1.5; } p { word-spacing: 2em; } p { text-align: center; }

outputs..

letterspacing in css

line height in css

word spacing in css

text alignment in css

Border

CSS borders have properties like style, color and width.For example, if we wanted to create a "teal" colored, 5 pixel border around an HTML element..

h1 { border-color: teal; border-width: 5px; border-style: solid; padding:5px; }

will output..

This is a border in CSS

Also, border-color, border-width, border-style can be written together like..

h1 { border:5px solid teal; }

will output same as the above.

CSS border can be styled in so many ways like solid, dotted, dashed..

Solid Border


Dotted Border


Dashed Border


CSS code is..

h1 { border: 5px solid goldenrod; text-align: center; } h2 { border: 5px dotted black; text-align: center; } h3 { border: 5px dashed green; text-align: center; }

There are more other ways of styling the borders in CSS like double, groove, ridge, inset and outset.But solid, dotted, and dashed are most commomly used.

Also we can apply border-width, border-color, border-style to the top, bottom, left, and right individually in an element like...

h1 { border-bottom: 5px solid teal; text-align: center; } h2 { border-top-width:5px; border-top-color:red; border-top-style:dotted; text-align: center; }

This will look like..

BorderBottom


BorderTop

Margin

Three important properties control the space that surrounds each HTML element: padding, margin, and border.
An element's margin controls the amount of space between an element's border and surrounding elements.Consider the box below..

h1 element


CSS code is..

.blue-box{ border: 3px solid black; padding: 45px; background-color: skyblue; margin: 35px; } .orange-box{ border: 3px solid black; margin:5px; padding:25px; text-align: center; background-color: orange; }

Now, let us change the margin of the orange-box to 25px..

.orange-box{ border: 3px solid black; margin:25px; padding:25px; text-align: center; background-color: orange; }

h1 element

Now, we can see that the distance b/w the border of orange-box and the border of the blue-box has been increased just by increasing the margin of the orange-box to 25px.

Also, we can add -ve margin values to our orange box, which will result the following..

h1 element

CSS code is..

.orange-box{ border: 3px solid black; margin:-5px; padding:25px; text-align: center; background-color: orange; }

It is clear from the above that the space around the border of the orange-box and inside the border of the blue-box has been "shrunk" from the previous size just by adding a -ve margin value of 5px in our orange-box!

We can also manipulate top, right, bottom, left of our orange-box individually..

.orange-box{ border: 3px solid black; margin:5px 15px 25px 35px; padding:25px; text-align: center; background-color: orange;

This will result in...

h1 element

It's pretty clear that the margin values 5px 15px 25px 35px changes the space around the orange-box by 5px 15px 25px 35px respectively!!

Note:The margin values 5px 15px 25px 35px follows a clock-wise order from top right bottom and left respectively.

Padding

An element's padding controls the amount of space between the element and its border.

Consider the box below..

This is the h1 element in CSSjjkhh

CSS code is..

.blue-box { text-align: center; border: 3px solid black; background-color: cornflowerblue; margin: 45px; }

As we can see, there is no space b/w the h1 element and the border of the blue-box and it looks a little messy!!

just by adjusting the padding value to 25px we get..

This is the h1 element in CSSjjkhh

.blue-box { text-align: center; border: 3px solid black; background-color: cornflowerblue; margin: 45px; padding: 25px; }

As we can see that the space b/w the h1 element and the space inside the border of blue-box has been increased by adjusting the padding value to 25px!!

This space has been equally distributed around the h1 element..

We can also change the padding value of top, right, bottom and left of the h1 element individually...

.blue-box { text-align: center; border: 3px solid black; background-color: cornflowerblue; margin: 45px; padding: 5px 15px 25px 35px; }

Will generate..

This is the h1 element in CSSjjkhh

The padding value changes to 5px 15px 25px 35px from the top, right, bottom, and left respectively.

Border

CSS borders have properties like style, color and width.For example, if we wanted to create a "teal" colored, 5 pixel border around an HTML element..

h1 { border-color: teal; border-width: 5px; border-style: solid; padding:5px; }

will output..

This is a border in CSS

Also, border-color, border-width, border-style can be written together like..

h1 { border:5px solid teal; }

will output same as the above.

CSS border can be styled in so many ways like solid, dotted, dashed..

Solid Border


Dotted Border


Dashed Border


CSS code is..

h1 { border: 5px solid goldenrod; text-align: center; } h2 { border: 5px dotted black; text-align: center; } h3 { border: 5px dashed green; text-align: center; }

There are more other ways of styling the borders in CSS like double, groove, ridge, inset and outset.But solid, dotted, and dashed are most commomly used.

Also we can apply border-width, border-color, border-style to the top, bottom, left, and right individually in an element like...

h1 { border-bottom: 5px solid teal; text-align: center; } h2 { border-top-width:5px; border-top-color:red; border-top-style:dotted; text-align: center; }

This will look like..

BorderBottom


BorderTop

Border Radius

Consider the box below..

CSS code is..

div { background: #008080; padding: 20px; width: 200px; height: 150px }

The border-radius property is used to add rounded corners to an element.

look at the CSS code below..

div{ border-radius: 35px; background: #008080; padding: 20px; width: 200px; height: 150px; }

This will output..

Note the corners are slightly "curved" around the edges. Pretty cool huh?!..Well that's one way to apply the border-radius property.

Also, there are four-valued, three-valued, two-valued, and one-valued border-radius properties which can be specified individually according to our need.

Consider the following..

div { border-radius: 25px 60px 40px 15px; background: #008080; padding: 20px; width: 200px; height: 150px; }

border-radius: 25px 60px 40px 15px; is a four-valued CSS border-radius property which applies individually to the top-left, top-right, bottom-right, and bottom-left respectively..


div { border-radius: 25px 60px 40px; background: #008080; padding: 20px; width: 200px; height: 150px; }

border-radius: 25px 60px 40px; is a three-valued CSS border-radius property which applies to the top-left(25px), top-right(60px), bottom-left(60px), and bottom-right(40px) respectively..


div { border-radius: 25px 60px; background: #008080; padding: 20px; width: 200px; height: 150px; }

border-radius: 25px 60px; is a two-valued CSS border-radius property which applies to the top-left(25px), bottom-right(25px), bottom-left(60px), and top-right(60px) respectively..

Note:These border-radius properties can also be applied another way using border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius.

You may also specify the radiuses in which the corner is rounded by. In other words, the rounding doesn't have to be perfectly circular, it can be elliptical. This is done using a slash ("/") between two values.

div { border-radius: 10px/30px; /* horizontal radius / vertical radius */ background: teal; width:20%; height:20%; padding:40px; } div { border-radius: 30px/10px; /* horizontal radius / vertical radius */ background: teal; width:20%; height:20%; padding:40px; }

Some applications of border-radius property are given below..

border: dotted;
border-width: 10px 4px;
border-radius: 10px 40px;
text-align: center;
background-color: beige;
width: 30%;
border: dashed;
border-width: 2px 4px;
border-radius: 40px;
background-color: bisque
text-align:center
width: 30%;;
border-radius: 40px 10px;
background-color:cornflowerblue;
text-align: center;
width: 30%;

Span and Div

HTML is used to provide all the content to the web page and helps to manage it by enclosing the content in tags. Basically, it applies meaning to the content like p tag for paragraph. But span and div don't apply any meaning. They are just used to enlose content. Then values of class and id attributes are used as CSS selectors to style the content.

The difference between div and span is that div encloses block elements and span is for enclosing parts line elements. Being a block holder div creates line breaks in the beginning and the end, while span being an inline element doesn't create any line break.

<div class="textContent"> <span class="specialText">Lorem Ipsum is simply dummy text</span> of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>

Meta Tags

Under the meta tag, information about the web page is stored. None of the content given in the meta tag appears on the web page. The data is stored as the key values pairs. The meta tag is a self-closing tag and the data stored in it is known as metadata. There can be any number of meta tags within an element. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

Attributes
charset
This attribute is used for declaring the character encoding. It is a good practice to use UTF-8 encoding. However, this must be taken care of that the declared character set matches the one on the page.
http-content
The value of this attribute consists of a string which contains key value pairs. The value of this attribute can be used to alter servers and user-agents behavior. The key "Content-Security-Policy" is used to specify the web content policies. And the "refresh" is used to specify the seconds after which the page is going to be refreshed. And if along with the time, a url is mentioned as '5;url=https://www.soturimedia.in/', then after 5 seconds, the user would be redirected to the mentioned URL. <meta http-equiv="refresh" content="5;url=https://www.soturimedia.in/">

Description Lists

Description lists are very specific in use as compared to ordered and unordered lists and hence are very less used. But whenever, a structure like a list of terms and their description is required, the description lists are the the perfect elements. The description lists are made for that purpose only!! They are also used for holding metadata(metadata is the data that contains information about the content of the website, it helps the search engines and web-crawlers to find the relevant content).

The description lists are enclosed in <dl> and </dl> tags.The description terms are held by <dt> and </dt>. And the description data by <dd> and </dd>

<dl> <dt>HTML</dt> <dd> Abbreviation for HyperText Markup Language - a language used to make web pages. </dd> <dt>CSS</dt> <dd> Abbreviation for Cascading Style Sheet. </dd> <dd> Used to beautify HTML content. </dd> <dt>Javascript</dt> <dd> Used to add logics to HTML and CSS content and to control them. </dd> </dl>

It appears as:

HTML
Abbreviation for HyperText Markup Language - a language used to make web pages.
CSS
Abbreviation for Cascading Style Sheet.
Used to beautify HTML content.
Javascript
Used to add logics to HTML and CSS content and to control them

Sections in a Document

Article and Section tags

Sections are made to group thematically related elements together. This is used in very different context from div tag which is a generic container. A div tag may contain any kind of data but using specific kind of holders makes the document much more meaningful and easy to handle. After opening a section tag, it is a good practice to have a heading tag (h1 to h6). If the chunk of data inside the section tag makes sense when viewed indepenently i.e. it is kind of stand-alone data, then the article should be used inside its place. For example a product on a e-commerce website must be included in an article tag and the all products on the web-page must be included in a section tag. The section tag can be used inside an article tag and vice-versa according to the requirement. Usage example:

<section class="menu"> <!-- all the menu entries --> <!-- may or may not contain article tags --> </section> <article> <section id="intro"> <p>[An introduction]</p> </section> <section id="main_content"> <p>[Content]</p> </section> </article>

Headers and Footers

Since HTML is all about applying meaning to the content , header tag is used to enclose the introductory or navigational aids. Headers may contain headings, subheadings,, navigational controls, etc. The header element may exist for the whole web page or for some content within the page
The footer tag encloses the last element of a section or a web page. It contains information about its section such as who wrote it, links to related documents, copyright data, contact-details etc.

Main

The main tag is used to enclose the main part of the body. According to the latest recommendations of the W3C there must be only one main in a document. The content of the main should be unique to the document.

Aside

The aside tag is used for an element to add additional information to enhance the meaning. This information is not necessarily needed for understanding the content. It is also used to include the side-nav-bar of the page.

<article> <p> The Disney movie <em>The Little Mermaid</em> was first released to theatres in 1989. </p> <aside> <p> The movie earned $87 million during its initial release. </p> </aside> <p> More info about the movie... </p> </article>

It appears as:

The Disney movie The Little Mermaid was first released to theatres in 1989.

More info about the movie...

NOTE: Suppose at some point we just want the main content to be visible and the additional content to dissapear. Instead of editing the whole HTML document, we can disable the display of all such elements using CSS selectors.

Navigation

To enclose the navigation links of the same website and beyond nav tag is used. Not all links of a document must be in a nav element, which is intended only for major block of navigation links.

<nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact_us">Contact-Us</a></li> </ul> </nav>

Class and ID Selectors

We can't create our own HTML tags those are pretty standard!.But the intention behind it can be fulfilled easily just by using class and id selectors.

Class Selector


The class selector is used to select a group of elements belongs to a same class like..

<p class="red">I am red1</p> <p class="blue">I am blue1</p> <p class="red">I am red2</p> <p class="blue">I am blue2</p>

Let's suppose if we want to give a red color to the elements that falls under the red class and the color blue to the elements that falls under the blue class this can be done by using class selector..

.red{ color:red; } .blue{ color:blue; }

This will generate..

I am red1


I am blue1


I am red2


I am blue2

The . is called as the class selector and is used to select the elements that falls under the same class.

ID Selectors


The class selector selects a group of elements belongs to the same class..On the other hand the ID selector is much more specific.It is used to select those elements having a specific id..

<p id="one">This is id one!</p> <p id="two">This is id two!</p> <p id="three">This is id three!</p> <p id="four">This is id four!</p>

If we want to change the font of the element that belongs to the id one, change the color of element that belongs to id two,change the background-color of element to green that belongs to id three and change the size of the element that belongs to an id of four..

#one { font-family: monospace,Arial; } #two { background-color: teal; } #three { color: green; } #four { font-size: 30px; }

This will generate..

This is id one!


This is id two!


This is id three!


This is id four!

Also known as the id selector the # symbol is used to select an element that belongs to a particular id.

Grouping and Nesting

Grouping

For styling content in a web-page, CSS for every element is not written explicitly. We can set properties to a group of elements using same code.

h2 { color: red; } /*This sets the color of all h2 elements in the document to red*/ .anyClassName, p, h1 { font-size: 2em; } /* Using this syntax, styling multiple type of elements can be done */

Nesting

Maintaining the data in the appropriate tags, leads to minimum usage of id and class for selecting data in CSS code. This is done using nesting of selectors.

#newsFeed p { /*Code written here will style only the paragraphs inside newsFeed*/ }

Pseudo Classes

As the name specifies they are not real CSS classes, but are used to select the CSS class in a specific state! Like when you want a class to behave differently when hover(changing the color of an element while hovering or adding a shadow it) pseudo classes are used.

Syntax for using pseudo-classes:

selector:pseudo-class { <!-- all the properties that you want to change for this state of the class will come here--> property: value; }

For adding a shadow to all paragraphs when hovered the pseudo class is used as follows:

.p:hover{ box-shadow: 2px 4px 6px 8px lightgrey; }

Try hovering on the paragraphs below:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Click here for more types of pseudo-classes

Pseudo Elements

Pseudo elements are used to address sub-parts of elements. They allow us to select specific parts of an element and set their properties. In other words they allow logical elements to be defined which do not explicitly exist in the HTML document but are a part of some other element like the first line of a paragraph, last letter .

Syntax for using pseudo-classes:

selector::pseudo-element { <!-- notice that double semi-colons are used above --> property: value; }

Example syntax for changing the size of the first letter of a paragraph:

.p::first-letter{ font-size:20px; }

The above thing appears as

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

All pseudo-elements and their details can be found here

Shorthand Properties

Shorthand properties are used to mention many CSS properties simultaneously. Using shorthand properties makes the code more readable and easy to maintain.
Shorthand properties are used for define properties of an element that are related to same kind of thing. For example: property padding alone can be used to mention the padding-top, padding-right, padding-bottom, padding-left.
For example:

div { padding: 1px 5px 10px 20px; }

Is equivalent to:

div { padding-top: 1px; padding-right: 5px; padding-bottom: 10px; padding-left: 20px; }

NOTE: The value which is not specified while using shorthands is set to its initial value. This is a tricky thing, if the property was specified earlier, it would be overridden to the its default.

Suppose while using padding shorthand, if only one value is mentioned, then, it would be set for all sides(top, right, bottom and left), if two values are mentioned then the first one is for top and bottom and the second one is for right and left. The same thing holds while using margin.

Usage for borders:

p { border: 1px red solid; }

border-width, border-color, and border-style are mentioned using the above shorthand.

Usage for fonts:

p { font: italic bold 12px/2 courier; }

This combines font-style, font-weight, font-size, line-height, and font-family.

Usage for background:

Using the background CSS property individual backgrounds of the elements can be set.

p { background: #000 url(images/bg.gif) no-repeat top right; }

This was the shorthand for:

p { background-color: #000; background-image: url(images/bg.gif); /*A web address can also be given in the url*/ background-repeat: no-repeat; background-position: top right; }

Text Abbreviations Quotations and Code

Abbreviations

For defining an abbreviation, abbr tag is used. Expanded form of the abbreviation is given in the value of the title attribute. Although this is not necessary, but is a good practice.

<p> <abbr title="Javascript">JS</abbr> is the one of the most used languages in the world!! </p>

Try hovering above JS below:

JS is the one of the most used languages in the world!!
Quotations

The q tag is used for inline-quotations.They are used as:

<p> And the teacher said <q>instead of using double-quotes you can enclose the content within q-tag.</q> </p>

This appears as:

And the teacher said instead of using double-quotes you can enclose the content within q-tag.



When there is a block of data to display, blockquote tag is used.

<blockquote> <p> Most programmers do programming not because they expect <br> to get paid or get adulation by the public, but because <br> it is fun to program. </p> </blockquote>

For using blockquote CSS has to be written for the starting quotation marks. For e.g:

blockquote::before { display: block; height: 1em; content: "“"; margin-left: -.95em; font: italic 400%/1 Cochin,Georgia,"Times New Roman", serif; color: #999; }

NOTE: The pseudo element used above is before. It is used to select the first pseudo-element of the element on which it is applied. Then content property is used to include some content in it. The content property can always be used to add content to the selected element.

Most programmers do programming not because they expect
to get paid or get adulation by the public, but because
it is fun to program.
Code

For representing computer code, code tag is used. For variables var is used. Sample output is enclosed in samp tags. Usage for code:

<p>Regular text. <code>This is code.</code> Regular text.<samp> Output-sample text.</samp></p>

Output is:

Regular text. This is code. Regular text. Output-sample text.

NOTE: For showing the code in web-pages combination of pre and code tags is used.

Background Images

The CSS backgroud-image property is used to set the background image for an element. It can also be mentioned as the shorthand property of the background image as mentioned in the previous section. They are used in much different way then normal HTML img tag.

The very important task accomplished using the background-image is known as image-spriting. Suppose you want to show flags of three countries Canada, USA, and Mexico in three different places in a web page. Instead of sending these three as different images, one big image containing all the three images in its sub-parts is made and is sent to the browser. Now the places at which the flags are to be shown, are made to have the same image-background. Like this:

.flags-canada, .flags-mexico, .flags-usa { background-image: url('../images/flags.png'); background-repeat: no-repeat; }

Now, at all three places, background-position is mentioned so as to include the appropraite part of the background like this:

.flags-canada { height: 128px; background-position: -5px -5px; } .flags-usa { height: 135px; background-position: -5px -143px; } .flags-mexico { height: 147px; background-position: -5px -288px; }

The benefit of this is that all the images are fetched using single http request which is far more better than many request fetching small small images.

Specificity

Consider the code below..

h2 { color: red; } h2 { color: blue; }

which results in..

The quick brown fox jumps over the lazy dog!..

Although the color property is applied on the same tag h2, but the later one color: blue; property will overwrite the previous one!

Consider the following CSS code..

div h2{ color:green; } h2{ color:red; }

This will output..

The quick brown fox jumps over the lazy dog!..

This time the later one doesn't took the charm!.The first one will be considered because it is more specific than the second one.Although they were intended to be applied on the same element h2.

In CSS when the code becomes a little messy, then there is a greater chance of conflict between the CSS properties, to resolve this conflict the CSS specificity comes into play!.

  • Any HTML element will have a specificity of 1.
  • Any class selector will have a specificity of 10.
  • Any id selector will have a specificity of 100.

In the previous CSS code the specificity of div p (1 for HTML element+1 for HTML element =2) is more than that of p (1 for HTML element=1), hence the div p is more specific and it's property will come into play.

Consider the following ..

#one h2{ color: blue; } .box #one h2{ color:brown; } h2 { color: red; }

outputs..

The quick brown fox jumps over the lazy dog!..

Get it?!..The .box #one h2 will lead because of the specificity of .box #one h2 (10 for class selector .box + 100 for the #one id selector + 1 for the h2 element = 111).

CSS Flexbox

Flexbox model provides for an efficient way to layout, align, and distribute space among elements within your document — even when the viewport and the size of your elements is dynamic or unknown.
Flexbox Froggy is a wonderful game which will give you a breif idea of how flex box works. I will recommend you to play this game first and then read this column.

How do I start using Flexbox model?

To start using the Flexbox model, all you need to do is first define a flex-container (parent element):

<ul> <!--parent element--> <li></li> <!--first child element--> <li></li> <!--second child element--> <li></li> <!--third child element--> </ul> <style> <!--Make parent element a flex container--> ul { display: flex; <!--or inline-flex--> } <!--Styling li elements --> li { width: 100px; height: 100px; background-color: #8cacea; margin: 8px; } </style>

This is the output.

Whereas you might have hoped for this:

The Flexbox model kicks in as soon as you introduce "flexbox display" in the parent element.

As soon as you set the display property to flex, the unordered list automatically becomes the fle x container and the child elements (in this case, the list elements li) become flex items.

The Flex Container Properties

Flex-direction || Flex-wrap || Flex-flow || Justify-content || Align-items || Align-content

1. Flex-direction:

The Flex-direction property controls the direction in which the flex-items are laid along the main axis.

/*where ul represents a flex container*/ ul { flex-direction: row || column || row-reverse || column-reverse; }

In layman’s terms, the flex-direction property let's you decide how the flex items are laid out. Either horizontally, vertically or reversed in both directions.

Technically, “horizontal” and “vertical” isn't what the directions are called in the "flex world". These are described as main-axis and cross axis. The defaults are shown below.
In layman’s terms again, the main-axis’ default direction feels like “horizontal.” From left to right. The cross-axis feels like “vertical.” From top to bottom.

These are the default axes. They can be changed.

By default, the flex-direction property is set to row and it aligns the flex-item(s) along the main axis. This explains what happened with the unordered list at the start of this article.
The flex items were then laid across the main-axis, stacking horizontally from left to right.

If the flex-direction property is changed to column, the flex-items will be aligned along the cross axis.

2. Flex-Wrap

The flex-wrap property can take any of the three values.

//where ul represents a flex container ul { flex-wrap: wrap || nowrap || wrap-reverse; }

In the first example try adding more li elements and you may come across this:

This is the default behavior of every flex container. A flex container will keep on accommodating more flex items on a single line.
This is because the flex-wrap property defaults to nowrap. This causes the flex container to NOT wrap.
This problem can be solved using the wrap value

ul { flex-wrap: wrap; }

“Wrap” is a fancy word to say, “when the available space within the flex-container can no longer house the flex-items in their default widths, break unto multiple lines.

There’s one more value, wrap-reverse.
It lets the flex items break unto multiple lines, but in the reverse direction.

3. Flex-Flow

The flex-flow is a shorthand property which takes flex-direction and Flex-wrap values.

ul { flex-flow: row wrap; /*direction "row" and yes, please wrap the items.*/ }

4. Justify-content

This is the most important property of flex model. Literally makes life easy.
It take the folowing 5 values.

ul { justify-content: flex-start || flex-end || center || space-between || space-around }

With justify-content property, the flex items are aligned along the main axis. Consider the first example with only 3 li child elements.

(i) Flex-start

(i) Flex-end

(i) Center

(i) Space-between

(i) Space-Around

5. Align Items

It defines how flex-items are laid out on the cross axis. This is the difference between the align-items property and justify-content.

/*ul represents any flex container*/ ul { align-items: flex-start || flex-end || center || stretch || baseline }

(i) Stretch

(i) Flex-Start

(i) Flex-End

(i) Center

(i) Baseline

This is A "Baseline:"

6. Align Content

While using the wrap property what we got was a multiline flex container.
The property is used on multi-line flex-containers.

Just like align-items, the default value is also stretch.

(i) Stretch

(i) Flex-Start

(i) Flex-End

(i) Center

The Flex Item Properties

Order || Flex-grow || Flex-shrink || Flex-basis

1. Order

Used to reorderflex items within a container.
This is done without affecting the HTML source.

Default value is 0. May take positive or negative values.



Example:

<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>

The Flex items are displayed just as specified in the HTML source order.

Now suppose you want to change the order without affecting the HTML source.

/*select first li element within the ul */ li:nth-child(1) { order: 1; /*give it a value higher than 0*/ }

Since Item 2, 3, 4 have default 0 order, 1 has the highest order.
If two elements have same Order they are positioned according to source.

2. Flex Grow-Shrink

The flex-grow and flex-shrink properties control how much a flex-item should “grow” (extend) if there are extra spaces, or “shrink” if there are no extra spaces.
They may take up any values ranging from 0 to any positive number.

flex-shrink: 1 default
flex-grow: 0 default

<ul> <li>I am a simple list</li> </ul> ul { display: flex; }

Now if flex-grow is set to 1 flex-items occupy all the available space.

2. Flex Basis

The flex-basis property specifies the initial size of a flex-item. Before the flex-grow or flex-shrink properties adjust it's size to fit the container or not.

default: auto

Flex-basis can take on any values you'd use on the normal width property. That is, percentages, ems, rems, pixels etc

<ul> <li>I am a simple list</li> </ul> ul { display: flex } li { padding: 4px; /*some breathing space*/ }

By default, the initial width of the flex item is influenced by the default value, flex-basis: auto.
The width of the flex-item is computed "automatically" based on the content size (and obviously, plus whatever padding you set too).

Now if you increase the content.

But if:

li { flex-basis: 150px; }

4. The Flex Shorthand

The flex shorthand allows you set the flex-grow, flex-shrink and flex-basis properties all at once.

li { flex: 0 1 auto; }

The code above is equal to setting the three properties: flex-grow: 0; flex-shrink: 1; flex-basis: auto
If you set only the flex-grow and flex-shrinkvalues, flex-basis would default to zero.
This is called an absolute flex. And when you set only the flex-basis, you get a relative flex.

/*this is an absolute flex item*/
li {
flex: 1 1; /*flex-basis defaults to 0*/
}
/*this is a relative flex item*/
li {
flex-basis: 200px; /*only flex-basis is set*/
}

4. Flex: "positive number"

"flex: 2 1 0" is the same as writing "flex:2" 2 represents any positive number.

<ul> <li>I am One</li> <li>I am Two</li> </ul> ul { display: flex; } /*first flex-item*/ li:nth-child(1) { flex: 2 1 0; /*same as just writing flex: 2*/ } /*second flex-item*/ li:nth-child(2){ flex: 1 1 0; background-color: #8cacea; }

Here you have two flex-items. One has aflex-grow property of 1 and the other 2, what then happens?
You have the grow switches turned on for both items. However, the magnitude of growth differs. 1 and 2. They both expand to fill up the available space, but in some proportion.
Here’s how it works.
The latter takes up 2/3 of the available space while the former takes 1/3. You know how I arrived at that?
Basic mathematics ratio. individual / total

5. Align-Self

Allows You to change the position of a single Item.

/*target first list item*/ li:first-of-type { align-self: auto || flex-start || flex-end || center || baseline || stretch }

(i) Flex-end

(i) Center

(i) Stretch

(i) Baseline

(i) auto

auto sets the value of the targeted flex item to the parent’s align-items value or stretch if the element has no parent.
In the case below, the flex-container has an align-items value of flex-start




Source (Must Read):

Understanding Flexbox

Also See:

Flexbox Froggy
Problems Solved by Flex Model

Display Properties

CSS display properties include the following properties

  • inline
  • block
  • inline-block
  • none

inline

The display:inline property displays the elements in an inline flow. An inline element doesn't starts in a new line.Some examples of inline elements are:

  • span
  • anchor(links)
  • img
  • em
<style> li{ display: inline; } </style> <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ul>

This will result in..

one two three four

As we can see that the li element has been displayed in a line due to the inline property.

block

A block-level element starts on a new line and stretches out to the left and right as far as it can.Here are the few examples of block level elements.A display property with a value of "block" results in a line break between the two elements.

  • form
  • header
  • footer
  • div
  • header-elements(h1 - h6)
  • p
  • section
<style> div { height:100px; height:100px; background:teal; } </style> <div id="one"> </div> <br> <div id="two"> </div>

This will result in..

div 1

div 2

As we can see that the div 2 element starts from the next line, just because they are block-level elements!

But consider the following inline-element below.

<span>The quick brown fox</span> <span>jumps over the lazy dog!</span>

The quick brown fox jumps over the lazy dog!.

which is quite reasonable...as span is an inline-element. Now just by applying display:block; we get..

span { display: inline; }

The quick brown fox

jumps over the lazy dog!

It is clearly seen that the span element starts from the next line.

inline-block

We can create a grid of boxes that fills the browser width and wraps nicely.This can be done using with inline-block, inline-block elements are like inline elements but they can have a width and height.

<style>.box{ width: 200px; height: 100px; margin: 1em; color: cornflowerblue; } </style> <div class="box">Box-One</div> <div class="box">Box-Two</div> <div class="box">Box-Three</div> <div class="box">Box-Four</div>

This will result in..

Box-One
Box-Two
Box-Three
Box-Four

now applying display: inline-block; we get..

Box-One
Box-Two
Box-Three
Box-Four

The boxes adjust themselves according to the browser window itself!

none

The display:none; property hides the elements in a browser.

.box{ width: 200px; height: 100px; margin: 1em; color: cornflowerblue; display: none; }

Doesn't show anything at all!..

Page Layouts

Before CSS2, tables were used for making page layouts. But now there are numerous CSS properties to set the layout.

Positioning

static
This is the default property and just positions the elements normally as they appear by default HTML. Properties like top, right, bottom, bottom, left can't be applied.
relative
Using this property the element position can be varied relative to its orignal position(orignal position of the element is the one without using any positioning on it). The orignal position of the element remains as if it is occupied.
absolute
The specified position of the element would be relative to its closest positioned ancestor. If there is no positioned ancestor, then the position would be relative browser's window. The element doesn't occupy its orignal space.
fixed
The specified position of the element would be relative to the browser window. The element doesn't occupy its orignal space.

Examples

The HTML code would be same and CSS would be changed to depict each positioning. The HTML is as follows:

<div class="box" id="one">One</div> <div class="box" id="two">Two</div> <div class="box" id="three">Three</div> <div class="box" id="four">Four</div>

Orignal layout CSS:

.box { display: inline-block; background: orange; width: 100px; height: 100px; margin: 20px; color: white; }

The output is:

One
Two
Three
Four

Relative positioning:

#two { position: relative; top: -20px; left: 20px; }
One
Two
Three
Four

Absolute positioning:

#two { position: relative; top: -20px; left: 20px; }
One
Two
Three
Four

Forms Advanced

Before reading this section, make sure that you have read the forms-basics section.

The name attribute is very important by the perspective of backend because when the form data is sent to the mentioned address, it is arranged as key-value pairs with its keys as the values of the name attribute and values as the input provided through the form.

<form action="/address_to_handle_form" method="post"> Name:<input type="text" name="username"> <br> Password:<input type="password" name="password"> <br> <input type="submit" value="Submit"> </form>

The output window would be like:

User Details Form

Name:
Password:

Checkboxes

Checkboxes are used to get an array from the user. The name attribute is used for grouping checkboxes for the same thing i.e. the checkboxes with the same value of the attribute name would be grouped together. The value attribute specifies the value of the attribute being checked. The checked attribute is used to indicate whether this item is selected. And label element represents a caption for an item in a user interface.

<form action="/address_to_handle_form" method="post"> Programming languages you know:<br> <label> <input type="checkbox" name="prog_lang" value="C++" checked>C++<br> </label> <label> <input type="checkbox" name="prog_lang" value="Java"> Java<br> </label> <label> <input type="checkbox" name="prog_lang" value="Python"> Python<br> </label> <label> <input type="checkbox" name="prog_lang" value="Ruby"> Ruby<br> </label> <input type="submit" value="Submit"> </form>

The output window would be like:

Programming languages you know:

Radio-buttons

Radio-buttons are like switches that can be turned on or off. They are used when out of many options, we want the user to select one option. To acheive this the value of the name attribute must be same for the options among which we want to choose the one.

<form action="/address_to_handle_form" method="post"> Programming language you are best at:<br> <label> <input type="radio" name="best_at" value="C++">C++<br> </label> <label> <input type="radio" name="best_at" value="Java">Java <br> </label> <label> <input type="radio" name="best_at" value="Python">Python <br> </label> <label> <input type="radio" name="best_at" value="Ruby">Ruby <br> </label> <input type="submit" value="Submit"> </form>

It appears as:

Programming language you are best at:

Textarea

The input tag was for smaller text inputs. The tag textarea is used for a bigger text area whose number of rows and columns can be specified using the rows and cols attributes. Sample:

<form action="/address_to_handle_form" method="post"> <label>Write about yourself:</label> <textarea rows="10" cols="50"></textarea> </form>

Output window looks like:

Select

The select tag is used along with option tag to display a drop-down menu.

<form> <select name="select"> <option value="value1">Value 1</option> <option value="value2" selected>Value 2</option> <!-- "selected" attrubute will mark value 2 as default --> <option value="value3">Value 3</option> </select> </form>

The menu appears as:

Shadows

CSS allows us to give shadows to our HTML elements.There are two ways by which we can give shadows to our HTML elements like..

  • text-shadow
  • box-shadow

text-shadow

We can add shadows to our text using the text-shadow property.

#h1 { text-shadow: 3px 3px; font-size: 30px; }

It will result in..

TEXT_SHADOW

All this is due to the text-shadow property.The text-shadow: 3px 3px; the first 3px value is horizontal shadow, the next 3px is vertical shadow.

Check this out..

# h1 { text-shadow: 3px 3px 5px; }

results in..

TEXT_SHADOW

The third parameter 5px adds a blur effect to the text.

We can also add a color value as a fourth parameter to our text.

#h1{ text-shadow: 3px 3px 5px blue; } #h2{ text-shadow: 3px 3px 5px green; }

TEXT_SHADOW


TEXT_SHADOW


box-shadow

Just like text we can also give a "shadow" to our box using the box-shadow property.

look at the CSS code below..

div { height:100px; width:100px; background:peru; box-shadow: 30px -16px burlywood; }

outputs..

box-shadow: 30px -16px burlywood; The first value 30px is the horizontal shadow and the corresponding second value -16px is the vertical shadow and the corresponding third value gives it a color of burlywood!!

Note:-ve values are allowed in the box shadow property.

We can also add blur-radius to our box just by adding a third value 5px to our box-shadow property...

div { height:100px; width:100px; background:peru; box-shadow: 10px 5px 5px burlywood; }

outputs...

This shadow can also be "spread" by using a fourth value in our box-shadow property..

div { height:100px; width:100px; background:peru; box-shadow: 10px 5px 2px 5px rgba(222,184,135,0.9); }

As we can see that the area of box-shadow has been increased, just by adding a fourth value of 5px in our box-shadow property!

More Selectors

So far we have seen class selectors, id selectors and tag selectors, but there are many other ways to apply CSS into our HTML if our code becomes a little messy.

There are about 30 CSS selectors which we can use to layout our HTML.

Attribute Selectors

So far we have seen selectors like tag selectors, class and id selectors.There is another kind of selectors in CSS called as the Attribute Selectors which selects the elements based on their attributes.

The [attribute] selector.

<style> h2[lang] { color:olive; } </style> <h2 title="hello">This is line one...</h2><br> <h2 lang="en">This is line two....</h2><br> <h2>This is line three....</h2>

will select the element that has a lang attribute.

This is line one...


This is line two....


This is line three...

The "value" selector.

<style> button[type="three"] { background:aqua; /*button value is reset*/ } </style> <button type="one">button-one</button> <button type="two">button-two</button> <button type="three">button-three</button>

will select the elements that has the type equivalent to "three".

The ~ attribute selector

<style> input[value~="the"] /* includes whitespace the*/ { background: peru; } </style> <input value="From newb to the pro!"><br> <input value="From newb to a pro!"><br>

will select the element that includes "the" string token.



The ^ attribute selector

<style> a[href^="http"] /* leads with http*/ { color:green; } </style> <a href="www.soturimedia.in">www.soturimedia.in</a> <a href="http://www.soturimedia.com">http://www.soturimedia.com</a> <a href="www.soturimedia.in">www.soturimedia.in</a>

this selects the element whose attribute value leads with "http".

www.soturimedia.in
http://www.soturimedia.in
www.soturimedia.in

The $ attribute selector

<style> a[href$="inc"]/* ends with inc*/ { color:green; } </style>

will select the element whose href value ends with "inc"

www.soturimedia.in www.soturimedia.in www.soturimedia.in

The ^ attribute selector

<style> p[title*="ond"]/* value that has a substring "ond" in it*/ { color:orange; } </style> <p title="first value">value1</p> <p title="second value">value2</p> <p title="third value">value3</p>

will select the element whose attribute value has a substring of "ond" in it.

value1

value2

value3

The | attribute selector

<style> p[lang|="fr"] /*hypen seprated fr tag*/ { color:navy; } </style> <p lang="fr-ed">para1</p> <p lang="jk-mn">para2</p>

will select the element whose attribute value is seprated by hyphen and matches the specified value in the CSS code.

para1

para2

Transformations

CSS transition includes following properties..

  • translate
  • skew
  • rotate
  • scale
  • matrix

translate

The translate method changes the coordinates of an element according to the specified value.

#previously { height:120px; width:120px; background:rgba(0,128,0,0.3); } #now { height:120px; width:120px; background:rgba(0,128,0,0.8); -webkit-transform:translate(30px,10px); /*for chrome or safari browsers*/ -ms-transform:translate(30px,10px);/* for IE 9 and above*/ }

This will change the position of the box 30px right and 10px bottom.

previously
now

scale

The scale property changes the size of an element.

#scale { height:120px; width:120px; background:rgba(0,128,0,0.8); -webkit-transform: scale(2,1.1); /*for chrome or safari browsers*/ -ms-transform: scale(2,1.1); /*for IE 9 and above*/ }

The scale (2,1.1) will increase the width to twice and the height to 1.1 times.

previously
now

rotate

The rotate method rotates an element clockwise or anticlockwise according to the specified value.

#rotate { height:120px; width:120px; background:rgba(0,128,0,0.8); -webkit-transform: rotate(30deg); /*for chrome or safari browsers*/ -ms-transform: rotate(30deg); /*for IE 9 and above */ }

will rotate the element by 30 deg.

previously
now

skew

The skew property skews an element along the X and Y axis respectively.

#transformed { height:120px; width:120px; background:rgba(0,128,0,0.8); -webkit-transform: skew(-20deg,-30deg); /*for chrome or safari browsers*/ -ms-transform: skew(-20deg,-30deg); /*for IE 9 and above*/ }
original
transformed

also we can also apply skew individually to the X,Y coordinates as well..

#skewx { height:120px; width:120px; background:rgba(0,128,0,0.8); -webkit-transform: skewX(-20deg); } #skewy { height:120px; width:120px; background:rgba(0,128,0,0.8); -webkit-transform: skewY(-30deg); }
SkewX
SkewY

matrix

we can apply all the above properties together using the matrix method.

#matrix { height:120px; width:120px; background: green; -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);/* for safari and chrome browsers*/ -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /*for IE 9 and above*/ }

The matrix method follows the order like matrix (scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()).

original
#matrix

Gradients

For creating transitions in CSS b/w two or more colors gradients are used.

In general there are three kinds:

  • Linear Gradients
  • Repeating Gradients
  • Radial Gradients

linear-gradient

Transition occurs from one direction to other linearly like..

#gradient { height:150px; width: 150px; background:linear-gradient(aqua,blue); }

results in..

The default direction of transition is from top to bottom, but we can change that transition in any direction.

follow the CSS code below..

#gradient { height:150px; width: 150px; background:linear-gradient(to left,aqua,blue); }

This will generate..

Also, multiple colors can be added..

#gradient { height:150px; width: 150px; background:linear-gradient(aqua,blue,red); }

outputs..

The linear-gradient can also be directed diagonally by specifying vertical and horizontal starting positions..

#gradient1{ height:150px; width: 150px; background:-webkit-linear-gradient(left top,aqua,blue); } #gradient2{ height:150px; width: 150px; background:-webkit-linear-gradient(bottom right,aqua,blue); }

Which generates..

#grad1
#grad2

This linear-gradient property can also be applied at an angle..

#gradient1 { height:150px; width: 150px; background:-webkit-linear-gradient(-45deg,aqua,green); } #gradient2 { height:150px; width: 150px; background:-webkit-linear-gradient(280deg,aqua,green); }

This will output..

#gradient1
#gradient2
In general:

background: linear-gradient(-90deg, red, yellow); (Standard syntax)


background: red; (For browsers that do not support gradients)


background: -webkit-linear-gradient(-90deg, red, yellow); (For Safari and Google Chrome browsers)


background: -o-linear-gradient(-90deg, red, yellow);(Opera)


background: -moz-linear-gradient(-90deg, red, yellow); (For Firefox)

repeating-gradient

The linear-gradient can be repeated itself using the repeating-gradient property.

#gradient { height:200px; width: 200px; background:repeating-linear-gradient(green, aqua 10%, blue 20%); }

Outputs..

The linear-gradient repeats itself again and again according to the height given!

radial-gradient

The radial-gradient property generates a gradient repeating from it's center.

#radial { height: 200px; width: 200px; background: radial-gradient(blue, green, aqua); }

outputs..

We can also give shapes to our radial-gradients by adding an extra parameter to our CSS code.

#radial1 { height: 200px; width: 200px; background: radial-gradient(circle,blue, green, aqua); } #radial2 { height: 200px; width: 200px; background: radial-gradient(ellipse,blue, green, aqua); }

results in..

Media Queries

Till now, we used CSS to style our HTML content, but its scope is not limited to that. CSS can also be used to write blocks of code that are targeted to specific screen sizes. Earlier, separate HTML and CSS was written for viewing the websites on mobiles, tablets, very-large screens etc. But now, using the media queries the screen size can be found out. CSS blocks are written for different ranges of screen sizes to change only the appearance of desired content.

Basically, rather than finding out what device is being used, the capabilities of the device are looked at. Mainly, we will look at the following things:

  • height and width of the device
  • height and width of the browser
  • screen resolution
  • orientation of the device (for mobile phones and tablets; portrait or landscape)

The syntax is as follows:

<!-- CSS media query on a link element in the HTML code--> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- CSS media query within a stylesheet --> <style> @media (max-width: 600px) { .facet_sidebar { display: none; } } </style>

After the @media keyword, there are expressions which simplify to true or false and accordingly the content within the block of the media query will be applied to the HTML. media queries may contain a media type which limits content for different kind of devices. List of main media types:

all
Suitable for all devices.
print
This media type will return true when the the content is viewed in the print mode, i.e. the preview of the content that will be printed
screen
Intended primarily for color computer screens.
speech
Intended for speech synthesizers.

Logical operators

Logical operators like not, and and only can be used to generate desired media query. Also parenthesis can be used to hold the queries. The and operator is used for combining multiple media features together into a single media query, requiring each chained feature to return true in order for the query to be true. The not operator is used to negate an entire media query. The only operator is used to apply a style only if the entire query matches, useful for preventing older browsers from applying selected styles. If you use the not or only operators, you must specify an explicit media type.
Comma-separated lists behave like the logical operator or when used in media queries. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied. Each media query in a comma-separated list is treated as an individual query, and any operator applied to one media query does not affect the others.

when we want to target min-width: 700px and orientation: landscape:

@media (min-width: 700px) { /*similarly max-width can also be used*/ /*CSS code*/ }

Usage of not keyword

It applies to the whole query and returns true only if the whole query returns false. In comma separated query it will negate only the media query it is applied to. The not keyword cannot be used to negate an individual feature query. Only an entire media query should be mentioned. Basically, after mentioning not keyword, media type must be mentioned.

For example, the not is evaluated last in the following query:

@media not all and (max-width: 800px) { ... }

Is evaluated as:

@media not all and (max-width: 800px) { ... }

In comma separated list:

@media screen and (color),not print and (color) { ... }

NOTE:Here not will be evaluated only with the second query (i.e. the one after the comma), and notice that media type is mentioned(media type is print) otherwise the syntax would be invalid!!

Usage of only keyword

The only keyword prevents older browsers that do not support media queries with media features from applying the given styles:

<link rel="stylesheet" media="only screen and (color)" href="example.css" />