Facebook

Cascading Style Sheets

Cascading style sheets (CSS) is a style sheet that describes presentation of markup language document. One of the primary reason why CSS is made is to separate document content from document presentation. This separation improved content accessibility so that multiple pages can share the form of presentation. Since it was so convenient, people kept using it until now. First Cascading Style Sheets (CSS) was registered at 1998 and it maintained by W3C. Earliest CSS3 published in 1999 but most new features are added around 2010’s. CSS3 has been split into modules not like previous ones. Selectors, Box Model, Backgrounds and Borders Image, Values and Replaced Content, Text Effects, 2D/3D Transformations, Animations, Multiple Column Layout and User Interface are the some of the most important modules.

Not like earlier version CSS3 is split into modules, why is that? On Cascading Style Sheets modules, you need to write markup in JavaScript file. When it is attempted, Build step will process file into new separate CSS and HTML files, with a new string of characters replacing both the HTML class and the CSS selector class by searching CSS file that imported then looking through a JavaScript.

There are new features came up with CSS3. New selectors of CSS3 can choose DOM (Document Object Model) elements based on their attributes. So that you can utilize the attribute field to style them. With new selectors you can style different elements on a webpage easier. Another new thing is rounded corner. Round corner required a lot of code. But on CSS3 Borer-Radius property solved this issue.

Here is the example of it. With CSS Modules, it guarantees that all the styles for a single component is live in one place and only apply to that component and nothing else.

On CSS <div class=”code”>  .box{ border: 2px solid orange; border-radius : 25px; width: 100px; padding: 10px; text-align:center;  </div>.

On HTML <div class=”code”><div class=”box”>Submit</div></div>

Border image is ability to swap out a border with an image. Instead of border, image will be displayed. Here is the example of it.

On CSS <div class=”code”>#col{border-image:url(border_image.png) 100 100 100 100 round round; border-width: 10px;}</div>

On HTML <div class=”code”><div id=”col”>my content</div></div>

Box shadow allows creation of a drop shadow for an element. Example of  Property Box-shadow.

On CSS <div class=”code”>.shadow{ background-color: #EEEEEE; box-shadow:3px 3px 3px 2px #797979; height: 50px; width: 100px; padding: 5px;}</div>

On HTML <div class=”code”><div class=”shadow”>  my content </div></div>

Property text-shadow puts shadows to the text. This is similar with box-shadow.

Example on CSS <div class=”code”>p{ text-shadow: #aaa 2px 2px 2px; }</div>

On HTML <div class=”code”><p>My text is more beautiful, than a normal webfont</p></div>

Property gradient is a sleek design tool. It can be covered over resources  if it is not implemented correctly. Here is the example of it.

On CSS <div class=”code”>#gradient { background-image: -webkit-   gradient(linear,left bottom,left top,color-stop(0, #E6C674),color-stop(1, #F7ECCA)); background-image: -moz-linear-gradient(center bottom , #E6C674 0pt, #F7ECCA 100%); height: 50px;}</div>

On HTML <div class=”code”><p id=”gradient”>My text is more beautiful, than a normal webfont</p></div>

RGB property is for setting color for different elements. On CSS3, opacity manipulation is added. It is transformed to RGBA which can simplifies how to control opacity of elements. Here is the example.

On CSS <div class=”code”>p {background: rgba(217, 127, 185, .5); }</div>

This code will make the opacity of p tags 50%, as specified in the RGBA property.

Property transform enables rotating Web element. Example.

On CSS <div class=”code”>p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg);} </div>

On Html <div class=”code”><p>I can rotate this element, by 180degree using -moz-transform property</p></div>

Multicolumn lay-out property adjusts boxes and columns to display correctly on different browsers. Here is the Example.

On CSS <div class=”code”>#col{-moz-column-count:3;-webkit-column-count:3;} </div>

On HTML  <div class=”code”><div id=”col”> text truncated, due to length</div></div>

Web fonts property allows you to include font from a remote location. This is really helpful  since fonts are dependent on the client and webpage it can be shown differently if yours don’t support it. On regional website, this property is really helpful. Example.

On CSS  <div class=”code”>@font-face { src: url(“myfont.ttf”); font-family: “myfont_bold”; }</div>

 

References for Cascading style sheets

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3

https://www.w3schools.com/css/css3_intro.asp

https://en.wikipedia.org/wiki/Cascading_Style_Sheets

http://www.webreference.com/authoring/css3/2.html

https://css-tricks.com/css-modules-part-1-need/

 

 

Interested In hiring this web design company for your next project?

Get In Touch
Learn more about our website services such as, WordPress, Animation, HTML 5, website hosting, web designing. There are other website solutions we provide, but not limited to these :

Contact us for a quick quote, you'd be glad you do and understand why we believe we have mastered the science of web design.

Share This

Share this post with your friends!

CONTACT US