1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
Welcome to GadgetBit!

We are a community of technology enthusiats.

If you are already a registered member then you can login here

If you are new to the site then why not join up? It will only take a couple of minutes to register, by doing so all adverts will be removed from the site. You can register here or you can use your Facebook or Twitter account.

Basic CSS

By Creaky · Oct 11, 2015 ·
  1. Creaky
    CSS is short for cascading style sheets, and is rapidly approaching the 3rd version of code. CSS make it easier for web designers to change elements across entire sites globally, rather than individual code pages at a time. This can save tremendous amounts of time for everyone involved in the development process. For example previously if you wanted a bold paragraph in size 15px fonts, with red letters you'd have to do some code like this
    <font size="15px"><font color="red"><b>This is bold red font</b></font></font>
    This is regular font
    <font size="15px"><font color="red"><b>This is bold red font again</b></font></font>
    You can see all the HTML that is needed to generate a simple color and size change, is more than the actual content. This lead to huge page sizes with little content, and created bottle necks and loads of wasted bandwidth. The solution was CSS. By being able to define styles to classes, ID's, selectors, and HTML tags themselves, designers are able to roll out changes faster, more efficiently and with less code. For example in CSS to get a red, size 15, bold font it would take slightly more programming in to CSS, but less HTML:
    .bigredfont {
    font-size: 15px;
    color: red
    font-weight: strong;
    Then assign the class to a paragraph for example:
    <p class="bigredfont">This is the bold big red font</p>
    The real magic comes in if you wanted to change the big red font from red to gree, and reduce it to 11px. By simply changing a few lines of CSS we don't have to update any .html files. Imagine this on a large scale now if you have 5000 instances of the big red font, that all need changed to the small green font!
    .bigredfont {
    font-size: 11px;
    color: green;
    actually editing the HTML, the output would become:
    <p class="bigredfont">This is the bold big red font that we changed to the small green font!!</p>
    As you can imagine this is a huge time saver for all webmaster and designers. CSS is used to power thousands of sites, and is nearing the release of CSS3 which will introduce new features and abilities. Try out some other basic CSS abilities like bold font, italic font, colors, sizes, layouts and more in your spare time and you'll be thankful you did next time you build a site.

    Share This Article