Introduction to css

Coding (Css 3)

Apr 1, 2016

Briefly explanation about the story and the basics of CSS
 
/img/blog/introduction-to-css.jpg

 

CSS is a language used to define the formatting of HTML, XHTML and XML such as the Web sites and related web pages.

The introduction of the CSS was necessary to separate the content of HTML pages from their formatting and permit a more clear and easy programmation, either for the authors of the pages and for the users, also at the same time guaranteeing the reuse of code and its ease of maintenance.

 

 

HISTORY

 

 

To enable authors to freely shape the appearance of web pages, from 1993 onwards, Netscape Navigator and Internet Explorer, the two navigation software that were challenging for the browser wars, presented their owners tags.

 

 

They were not adhering to standards nor compatible with competing browsers.

 

 

These formatting tags were the only way for authors to define the formatting, so their use has become very intense. However, these tags presented three problems:

 

 


  •     
  • Length of the tag;

  •     
  • Lack of logic of the (x)HTML code;

  •     
  • Length of the tag;

  •     
  • Lack of compatibility with new handheld computers and smartphones


  •  

 

 

To try to resolve this situation, in 1996 the W3C issued the CSS 1.

CSS 1 was an interesting way to separate formatting from content. The basis of this language, consisted of split the content that would always been defined by the (X)HTML code, while the formatting would be moving on to completely separate queues, the CSS.

The calls between the two codes were being made through two special attributes: class and ID.

 

 

They were an effective solution to the problem of too long tag because it greatly reduced the page size.

Partially solved the problem of clean code that enabled the (X)HTML code to return to a great basic and essential part.

They do not, however, taking into account the third problem, since in 1996 the PDA (handheld) were poorly disseminated.

 

 

To include new features and make the CSS a well-supported language, in 1998, the W3C published the second version of the specification, the CSS 2.

 

 

CSS3

 

 

Unlike the CSS 2, which is constituted by a single specific, the CSS3 specifications are constituted by separate sections called "modules".

 

 

Because of this modularization, CSS3 specifications have different states of progress and stability. In November 2014, five modules are formally published by the W3C as a recommendation:

 

 

 

 

FEATURES

 

 

The inclusion of CSS code in web pages can be done in three different ways:

 

 


  •     

  •     

    External

     

        

    <link rel="stylesheet" type="text/css" href="foglio_di_stile.css"/>

         


        

  •     

  •     

    Internal

     

        

    <style type="text/css">

          css code within the style tag

        </style>

         


        

  •     

  •     

    In line

     

        

    <tag style="css code">...</tag>


        


  •  

 

 

CSS RULES

 

 



The CSS code to insert is structured in the form of one or more pair of property / value statements that are applied by the browser during the rendering to HTML elements interested specified via a selector.

 

 

selector {

   property: value1;

   property2: value2, value3;

}

 

 

Classes apply the rule to all elements of the page that have the property class = "class_name". The CSS syntax is

 

 

.class {

 property: value1;

 property2: value2, value3;

}

 

 

IDs apply the rule at that part of the page that has the properties id = "nome_id".

IDs distinguish unique elements. The CSS syntax is as follows:

 

 

#id {

 property: value1;

 property2: value2, value3;

}

 

 

The pseudo classes identify items based on their properties:

 

 

element:pseudoclass {

  property: value1;

  property2: value2, value3;

 

 

}

 

 

descendant selector, son and brother

Identify only the items that are in a particular state of descent in the structure (X) HTML page.

 

 

The descendant selector identifies only the elements contained in other elements.

 

 

p span {

  property: value1;

 property2: value2, value3;

 

 

}

 

 

The child selector identifies only those items that are contained directly in the parent:

 

 

div> p {

 

 

  property: value1;

 property2: value2, value3;

 

 

  }

 

 

Brother selector identifies the first element immediately following another with whom to share the same father:

h1 + p {

    property: value1;  

 

 

    property2: value2, value3;

 

 

  }

 

 

The attribute selector allows, by using syntax that follows, to identify (X)HTML elements  according to their attributes.

 

 

a [title = Sample] {

    property: value1;  

 

 

    property2: value2, value3;

 

 

  }

 

 



     

 

 

 

 

 

 
 
If you like this content and you are hungry for some more join the Facebook's community in which we share info and news just like this one!
 

Other posts that might interest you

Coding (Css 3) Jan 11, 2018

Selectors and Sintax

See details
Get my free books' review to improve your skill now!
I don't want to improve