Understanding CSS

Understanding CSS Element Class And ID

Sizes-Relatives sizes

em -   Based on the font size of the current element
rem -  Based on the font size of the html element (16px by default)

The main size is denote in the style sheet as mentioned below
html {
    font-family:Verdana;
    font-size:16px;
}
The subsequent sizes in the different elements are based out of it. "rem" is calculated based out of 
size mentioned in the html element.

   div:first-child {
        font-size:1.25rem;
    }
And "em " is based out of size mentioned in the current element
ex   -  Height of the font's lowercase x- height
ch   -  Width of the font's 0 (zero) character



Puseudo Element and Pseudo Class

Pseudo Element represents those elements where some actions
causes the css to fire 

Pseudo class is denoted by single ":"  and Pseudo Element is denoted by double "::" as denoted below

/*The below div represent the parent and child relatoinships .
 In the entire HTML document the first div element undergoes
  such changes.   */

div{
  font-family: sans-serif;
}

    div:first-child {
        font-size:1.25rem;

    }

        div:first-child::first-line {
            color:dimgrey;
            font-size:1.25rem;
        }

        div:first-child::first-letter {
            color: darkkhaki;
            font-style:italic;
            font-size:2.25rem;

        }

Pseudo class is denoted by single ":"

View Window

It is denoted by the tag "vw" . The below element article is displayed over 75 % of the total viewing window available
 
     article {
           width:75vw;
     }

Page Layout with CSS - 

Positioning the Elements
1) Fixed
2) Relative
3) Inline   - Al the elements are arranged side by side
4) Absolute 

The Box Model
1)Margin:  Space outside /around and element
2) Border: Visible border around the element
3)Padding : Space withing the element but outside the content



Comments

Post a Comment

Popular posts from this blog

Authentication and Authorization in Web API -Part1

Image
The Authentication technique used mainly by token based with OWIN, Step was to register a user , We created a appliction form to submit the user credentials to the WEB API Post Mehtod and saved in the database . We have built  a repository class which interacts with the database and gives the required result-set when requested for , We have also introduced a Business Layer which handles the business logics and acts as  model for the controller . The implementations of the Authentication and Authorization is done from this site . http://bitoftech.net/2014/06/01/token-based-authentication-asp-net-web-api-2-owin-asp-net-identity/ The Controller Class using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; using WebApiDemo.Models; namespace WebApiDemo.Controllers {     public class EmployeeController : ApiController     {   [Authorize]        ...
Read more

Can a derived class reference contain base class object.

1)Can a derived class reference contain base class object. using System; public class Base         {         public Base()         {         Console.WriteLine("I am from the Base Class Constructor");         }         public void  Invert()         {         Console.WriteLine("I am an invert function and I belong to Base");         }         } public class Derived:Base         {         public Derived()         {         Console.WriteLine("I am from the derived class constructor");   ...
Read more

Mvc and WebApi Videos

Persisting data between different elements in MVC with View Bag, ViewData,TempData,Session Sending data betweeb controller,View to another view  we use ViewData and ViewBag, Data sending from one ActionResult to another we use TempData, Data sending between view to controller we use query string,Hidden fields,    Session variables of ASP.NET can also be used to get the data through out all the entities https://www.youtube.com/watch?v=yq1N7zfZTBo
Read more