• Home
  • /
  • Blog
  • /
  • Modern CSS: The Exciting Future of Web Style
css

Modern CSS: The Exciting Future of Web Style

Spread the love

Just a few years ago, people in the technology industry might have said that cascading style sheets (CSS) were a minor factor in web design. You needed to know a little bit about how to use CSS, but there was no need to be an expert on the topic. Your time, they would have told you, was better spent learning JavaScript and its myriad libraries like jQuery. Today, CSS is a more important web standard than ever and we have mobile devices to thank for that. Here is a mini guide that covers some of the newest tweaks and additions to CSS as well as some of the basics for beginners.

External, Internal, and Inline

css

Modern CSS: The Exciting Future of Web Style

CSS is so useful because it is so versatile. It can be written as an external style sheet, which is linked to the HTML, or it can be directly written into the HTML itself. If it is written into the HTML, then it can be either in the header of the document (internal) or in the tag of a specific element (inline). Here are examples of all three methods.

  • External Code:

<link rel=”stylesheet” type=”text/css” href=”style.css”>

  • Internal Code:

<head>    <style>         body              background-color: linen;                  h1              color: maroon;             margin-left: 40px;             </style> </head>

  • Inline Code:

<h1 style=”color:blue;margin-left:30px;”>This is a heading.</h1>

 Using Identifiers

In external style sheets, you refer to elements in HTML by their identifier. There are two ways to do this. You can refer directly to the inbuilt identifiers of HTML, like headers, paragraphs, and divisions. Referring to classes this way requires only that you use HTML tag in your CSS as follows.

  • Code:

pfont: 12px Georgia;

The trouble with the above approach is that it can be overly generic. Perhaps you want just one paragraph out of several to be yellow. To do that, you simply use the “id” attribute in your HTML to give the specific paragraph you are interested in a unique identifier. Then, you use that identifier in your CSS, with a “#” to ensure that your code applies only to HTML element with that ID. Here is what that looks like.

  • HTML

Code:

<p id=”yellow”>This text is yellow.</p>

  • CSS

Code:

#yellow color: yellow;

Finally, if you want to apply a style to a few elements, rather than all of them or just one, you can use the “class” attribute. It works much like the ID attribute, with just one difference.

  • HTML

Code:

<p class=”yellow”>This text is yellow.</p>

  • CSS

Code:

.yellow color: yellow;

Note that rather than use a “#” symbol, the class selector requires a “.” in CSS.

Beyond Basics

The above are the very basics of CSS, but they hardly do the language justice in terms of its complexity and utility. CSS can be used to control everything from backgrounds to padding to positioning to images and media of all types. What makes CSS so useful is that the HTML content remains the same while style and display change. This is especially useful in a world where users can access content on desktops, laptops, tablets, and phones. By detecting the device a person is using, you can make sure that your website design and hosting or your sales page design look perfect on any device. The freedom is astounding.

CSS3

CSS has undergone a number of changes since its inception in 1996. In fact, the world wide web consortium (W3C), the group that sets standards for the Internet, is currently transitioning from its second major iteration of CSS to its third. This newest version of CSS, known as CSS3, comes with a variety of new features that make it even more useful than its predecessors. I came across this newest version when working on has a variety of Church Website Design projects.

Here are just a few of those features.

  • Box Shadows – This may sound simple, but the ability to create depth on a webpage can go a long way to improving aesthetics and usability. In the past, shadows were done either by hand in the graphics or through the use of a cumbersome JavaScript plugin. Now, shadows are as easy as a single CSS statement.
  • Rounded Corners – Believe it or not, creating rounded corners on boxes and images is a bit of a pain in web development. CSS3 aims to make this easier by adding a “border-radius” element.
  • RGBA Colors – Past iterations of CSS have forced developers to use complex hexidecimal or “hex” coloring if they wanted anything more than the basics (e.g white, red, yellow). CSS3 now makes the whole process easier by giving developers the ability to control RGB channels as well as the alpha channel of all elements.
  • Transitions – Animations in HTML/CSS can be a real nightmare. In CSS3, simple animations called transitions will allow an element to gradually change from one style to another. There is no need for complicated JavaScript or tricks to get the job done now.

Bright Future

CSS3 is being rolled out right now, but it isn’t complete yet. The W3C is releasing it in stages, getting features out as quickly as possible, but not before they are ready. This means that now is a great time to start learning CSS3. You’ll have time to perfect your technique before everything is finalized.

 

Angela is a Christian, wife, mother of two amazing kids with 1 cat, and 4 dogs. In her free time she enjoys spending time with family and friends, reading, or enjoying music. She is also a self taught programmer and web designer.

Stanislaus Okwor is a Web Designer / Developer based in Lagos - Nigeria. He is the Director at Stanrich Online Technologies. He is knowledgeable in Content management System - Wordpress, Joomla and PHP/MySQL etc

Leave a Reply

WhatsApp chat
Verified by MonsterInsights
extrabetextrabet girişmisliwintaraftarium24taraftarium24taraftarium24selcuksportstaraftarium24taraftarium24taraftarium24taraftarium24taraftarium24bahisliondizipaltambetmisliwinjustin tvmaç izlecanlı maç izlesahabetNews trendlinesohobetcasinowonbetmarinoyakabettambetgrbetscasibom telegramportobetportobet girişportobet güncel girişportobet yeni girişportobet instagramdeneme bonusu veren sitelerextrabetextrabet girişcasibomcasibom girişcasibom güncel giriştambetsweet bonanzasweet bonanza girişsweet bonanza democeltabetceltabet girişdizipalholiganbetholiganbet girişholiganbet güncel giriştaraftarium24justin tvselçuksportsmarsbahismarsbahis girişmarsbahis güncel girişbetvolebetvole giriştipobetsweet bonanzaslot sitelerisweet bonanza oynasweet bonanzaslot oyunlarıcasino oyunlarıslot sitelericasino sitelericasibomcasibom girişcasibom güncel girişkargabetvizebetcasibomcasibom girişcasibom güncel girişcasibomcasibom girişsweet bonanza oynagalabetgalabet girişgalabet güncel girişbettiltcasibomcasibomtaraftarium24taraftarium24meritbetcasibomcasibom girişcasibom güncel girişsweet bonanzaslot sitelericasibom girişenbetenbetperabetperabet girişteosbetteosbetteosbetjokerbetbetsmovebetsmove girişbahiscasinocasibomcasibom girişcasibom güncel girişperabetperabet girişperabet güncel girişperabet yeni girişperabet instagrampadişahbetpadişahbetextrabetextrabet girişbetsmovebetsmove girişunblocked gamesimage upscalervozolsuprabahissupra bahisjustin tvcanlı maç izleesohbetpadişahbetpadişahbettipobetbetvolebetvole girişbetvolebetvole girişmarsbahismarsbahismarsbahis girişmarsbahis girişmarsbahis güncel girişmarsbahismarsbahismarsbahis giriştimebettimebet girişdizipaltimebettimebet giriştimebet girişholiganbettemu coupon codearesbetwinxbetatlasbethilbettrendbetkulisbetyakabetteosbetsüratbethiltonbetenbetcasinolevantngsbahisngsbahis girişzirvebetzirvebet girişholiganbetholiganbet girişsekabet girişngsbahisngsbahisngsbahisngsbahis girişngsbahis girişvaycasinobets10hilbetzirvebetzirvebet girişzirvebetzirvebetzirvebet girişjojobetjojobet girişgoogle reklam ajansıseo ajansıtipobet girişmatadorbetmatadorbethava durumugalabetgalabet giriştipobet güncel girişoslobetoslobet girişnesinecasinoromabetromabet girişbetsmovebetsmovebetsmove girişholiganbetholiganbetholiganbet girişmatadorbet girişmatadorbet girişsonbahissonbahis girişbahiscasinobahiscasino girişbetzulabetzula giriştimebettimebet girişmatadorbetmatadorbettipobet adrescasinolevant girişmatbetmatbet girişbets10marsbahismarsbahis girişngsbahisngsbahisngsbahissetrabetsetrabet girişsetrabet güncel girişcasibomcasibom girişatlasbetatlasbet girişatlasbet güncel girişHoliganbetHoliganbet Girişluxbetluxbet girişbetasuspadişahbetbets10escortgrandpashabetcratosroyalbetholiganbetholiganbet girişdizipalsahabetbetturkeyholiganbetjojobetnerobetnerobet girişcasibomngsbahisngsbahis girişcasibom girişsmm panelivermectindizipalvdcasinovdcasino girişvdcasino güncel girişvdcasinovdcasino girişvaycasino güncel girişpokipokibetciomeritkingJojobetJojobet Girişvaycasinozirvebetzirvebet girişzirvebet güncel girişholiganbetholiganbet girişBahiscasinoBahiscasino Girişultrabetultrabet girişcasibomcasibomholiganbetholiganbet girişholiganbet güncel girişbetsmovejojobetvaycasinojojobetmeritking girişmeritking güncel girişcasibomkingroyalkingroyal girişkingroyal güncel girişmeritkingjojobetbetnanojojobet girişjojobet girişjojobetcasibomrestbetjojobetluxbetluxbet girişnesinecasinonesinecasino girişbahiscasino girişbahiscasino giriş güncelbets10 girişbahiscasino girişbahiscasino giriş güncelganobetganobet girişenbetenbet girişenbet resmicasibomcasibom girişcasibom güncel girişkargabetkargabet girişsetrabetsetrabet girişsetrabet giriş güncelluxbetluxbet girişluxbet güncel girişbetciobetasusbetnanogalabetextrabetroyalbetcasinofastextrabetextrabet girişbetnanotimebetvegabetzirvebetzirvebet girişmeritkingmeritking girişjojobetjojobet girişjojobetjojobet girişelexbet canlı girişelexbet güncela adreselexbetkalebet canlı girişkalebet güncel adreskalebetjojobet canlı girişjojobet güncel adresjojobetcasibom canlı girişcasibom güncel adrescasibomartemsibet güncel adresartemisbet canlı girişartemisbetbetebetbetciosetrabetmeritkingmeritking girişbetnanoelexbet güncel girişelexbet güncel adreselexbetkalebet güncel girişelexbet güncel adreskalebetcasibom güncel girişcasibom güncel adrescasibomjojobet güncel girişjojobet güncel adresjojobetartemisbet güncel girişartemisbet güncel adresartemisbetbetturkeycasinolevantngsbahisjojobetjojobetjojobet girişjojobetultrabetultrabet girişultrabet güncel girişjojobet girişankara taş kaplamajojobettimebettimebet girişbahiscasinobahiscasino girişcasinolevantcasibomcasibom girişcasibomcasibom güncel girişjojobettimebettimebet girişgrandbettinggrandbetting girişcasinolevant girişcandycasinobetnanolunabet girişpalacebetwipbetmaksibetjojobet girişjojobet girişjojobetjojobet girişjojobet güncel girişjojobetjojobet girişjojobet güncel girişpadişahbetpadişahbet girişpadişahbet güncel girişpadişahbetpadişahbet girişpadişahbet güncel girişjojobet girişbahiscasinobahiscasino girişbahiscasino güncel girişmislibetmislibet girişjojobet güncel girişjojobet girişjojobet girişjojobet güncel girişjojobet girişjojobet güncel girişalfabahisalfabahis girişalfa bahislikitbahiscasinobahiscasino girişbahiscasino giriş güncelkavbetjojobetJojobetbetnanosekabet güncelbets10Jojobetkavbet guncelavvabet guncelotobet guncelsalabisbet guncelteosbet guncelbetofis gunceljasminbet guncelsalamisbet guncelkalebet guncelelexbet guncelpiabellacasino guncelbetciocasinofastextrabetjojobetmatbetpusulabetKulisbetextrabetHoliganbetikimisliikimisli girişbetnanokingroyalkingroyalkingroyal girişkingroyal güncel girişmeritbetmeritbetbetsmovebetsmove girişbetplaybetplay girişbetciobetcio girişholiganbetholiganbetholiganbet girişholiganbet güncel girişmeritbetbetasusbetasus girişmeritkingbetyapbetyap girişbetyap girişjojobet güncel girişjojobet güncel girişbetplaybetplaybetplay girişmeritkingmeritking girişmeritkingmeritking güncel girişmeritbetmarsbahiscratosroyalbetvdcasinoholiganbet girişcasibom girişmarsbahis girişjojobet girişmeritkingmeritbetcanlı tv izleKingroyalKingroyal GirişjojobetHoliganbetHoliganbet Girişjojobetbahiscasinobahiscasino girişbahiscasino güncel girişmatbetmatbet girişmatbetmatbet girişpusulabetpusulabet girişbetsmovezirvebetbetsmove girişzirvebet girişultrabetultrabet girişgalabetgalabet girişgalabet güncel girişgalabet güncel girişultrabetultrabet girişultrabet güncel girişJojobetmariobetmariobetmariobetmariobetmariobetmariobet girişmariobet girişbetnanobetnano girişbetturkeykingroyalkingroyal girişsekabetcasibom girişmatbetmatbetpusulabetpusulabet girişbahislionbahislion girişbahis lionpolobetpolobet girişpolo betgrandpashabetgrandpashabet girişcratosroyalbetcratosroyalbet girişcasibom girişcasibom resmi girişbahiscasinobahiscasino girişcratosroyalbetcratosroyalbet girişzirvebetgalabetgalabet girişmeritkingonwinonwin girişonwinonwin girişonwinonwinonwin girişonwin girişonwinonwin girişbetpasbetpasjojobetpaşacasinoultrabetultrabet girişjojobet girişbettiltlinkmarketimcasibomsekabetsekabetsekabetbetcioganobetganobet girişbetofficebetoffice girişjokerbetjokerbet girişonwinonwin girişelexbet resmi girişelexbet güncel girişielexbet güncel girişielexbet güncel girişielexbet güncel girişielexbet güncel girişielexbet güncel girişionwinonwin girişonwinonwin girişnerobetnerobetgoldenbahisgoldenbahisnerobet girişnerobet girişgoldenbahis girişgoldenbahis girişngsbahisngsbahis girişngsbahis güncel girişKulisbetKulisbetmeritkingmeritkingmeritking girişmeritking güncel girişjojobet girişgiftcardmall/mygiftbahiscasinovaycasinovaycasinojokerbet girişjokerbet güncel girişbahsegelbahsegelmeritkingbahsegelmeritkingmeritking girişmeritking güncel girişcratosroyalbetmarsbahiscratosroyalbetcratosroyalbetmarsbahismarsbahis girişmarsbahis güncel girişTimebetTimebet GirişBahiscasinoBahiscasinoBahiscasino GirişUltrabet Girişcasibomhiltonbet girişcasibom girişKulisbet GirişMadridbet GirişKalebet GirişSahabet GirişExtrabet GirişTambet Girişqueenbet girişqueenbetqueenbetjojobetjojobetbahiscasino girişJojobetvdcasinomeritkingvdcasino girişTipobetTipobet Girişpusulabetpusulabettaraftarium24taraftarium24 izleKulisbetKulisbetbahiscasinobahiscasino girişbahiscasinobahiscasino girişbahiscasinobahiscasino güncelcasinolevanttbahiscasinobahiscasino girişbetsmovebetsmove girişhilarionbethilarionbet girişhilarionbet güncel girişgalabetgalabet girişgalabet güncel girişlunabetlunabet girişlunabet güncel girişmatbetmatbet girişpusulabetpusulabetpusulabetholiganbetbahiscasinomarsbahismarsbahis giriştaksimbetistanbulbahis girişjojobetgalabetgalabet girişbetasusbetasus girişbahiscasinobahiscasino girişcasibom güncel girişvdcasino güncel girişmarsbahis güncel girişgrandpashabet güncel girişmatbet girişmatbetmatbet girişmatbet güncel giriştipobettipobet giriştipobettipobet girişbets10bets10 girişbetnanoceltabetpusulabetceltabet girişceltabetceltabet girişbetebetbetebet girişvaycasino girişhiltonbethiltonbet girişmasterbettingmasterbetting girişatlasbetatlasbet girişbahisfair girişbahisfairjojobetjojobet girişbetasus girişbetasusbetnanobetnano girişbetplaybetplay girişbetwoon girişbetwooncasinoroyal girişcasinoroyalcoinbarmegabahisbetovisjojobetholiganbetjojobetjojobet girişmeritkingmeritkingmeritkingpusulabet girişJojobetkralbetkralbet giriş