Tag: What is CSS

Cascading Style Sheet Tutorial – Part 1
CSS · Web

Cascading Style Sheet Tutorial – Part 1

KamnaLeave a comment

CSS means cascade style sheet which is language used to style your web pages. One way to write CSS in your web page is in <style></style> tag in <head> tag or apply it at every tag separately. It is preferred to apply all styling rules in <head> tag because it makes your code less tedious for maintenance. Basic CSS example is given below having style tag in <head> tag:

<style>
p {color: black}
h1 {color: brown ; text-align:center}
a {color: blue}
.classselector {color: brown; background-color: gray}
#idselector {background-color: gray}
</style>

The style tag is written in the head section of the HTML page. This code means that if  anywhere  in your page having text in between these <p> </p> tags make it black and similarly <h1> should be brown and centrally aligned. <a> tag should be blue.

To break down above written code, every line is combination of selector and declarations.CSS has 3 type of selectors:

  • Tag selectors = Tag selectors are given at each tag level. e.g p,h1,a
  • class Selector = It starts with dot. Class selectors can be used with any html tag by writing for example <p class=”classselector”> . Class selector can be used with multiple tags in single html file
  • Id selector= It starts with #. Id selector is used with tags like <p id=”classselector”>. Ideally id tag should be used only once in single html page.

Attribute and property combination is called as declarative i.e. {color: black}

What do we mean by cascading?

Suppose we have code below:

<style>
p {color: black }
h1 {color: brown ; text-align:center}
#idselector {color: green; font-size: 39px}
</style>

<h1 id=”idselector”> Intro to CSS</h1>

In this case style tag has 2 styling rules for <h1> tag ..so which one will be applied? Will it be id selector or general h1 rule. Id selector rule will be applied as this phenomenon is cascading which means rules which decide which selector will be applied to the tag in case of conflict. As per cascading rules, id has higher precedence than h1 selector.

Page Layouts/Design types in CSS

There are 4 types of layout designs in CSS which are as below:

  • Static Design/Fixed Pixel Design : In this design page width does not change even if we try to change the size of browser. This design is not flexible and generally a very preferred design these days. This can be used for mobile websites also but generally people have to zoom or slide to read the content.
  • Liquid Design : This design flows like liquid which flows as per window size. This is different than responsive design as image and text does not change its size whereas it does in responsive. Liquid designs have its limitation when the window shrinks/expands too much.
  • Adaptive Design : This is a design which is static design with some properties of  responsive design.
  • Responsive Design : This design changes based on size of the window. Text and images resize and re position itself with window size. These designs are ideal for mobile apps and wider screens. This is a very flexible design.

Next>>>>>>>>>

Let’s learn together on Web development…..for more information like this  and follow my blog..