• 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
imajbettelegram下载有道翻译下载汽水音乐下载汽水音乐taraftarium24taraftarium24canlı maç izletaraftarium24canlı maç izlecasibomcasibom girişcasibom güncelcasinofastbetparkbetpark girişbetpark güncelbetparkbetpark girişbetpark güncel girişbetgarantibetgaranti girişbetgaranti güncel adresbetgarantibetgaranti girişbetgaranti güncel adrestaraftarium24taraftarium24nakitbahisnakitbahis girişjustin tvtophillbettophillbet girişdinamobetdinamobet girişdinamobet güncel girişselcuksportsmaltcasinomaltcasino girişmaltcasino güncel girişholiganbetholiganbet girişSweet BonanzaSweet Bonanzaasyabahisasyabahis girişasyabahis güncel girişmaltcasinomaltcasino girişprimebahisprimebahis girişprimebahisprimebahis girişdeneme bonusujustin tvselcuksportsselçuksportsmaç izlecanlı maç izleroyalbetroyalbet resmitaraftarium24zbahiszbahis girişmaltcasinomaltcasino girişjojobetjojobet girişjojobet güncel girişjojobetjojobet girişjojobet güncel girişdinamobetdinamobet girişdinamobet güncel girişSweet BonanzaSweet Bonanzabaskılı bardakbaskılı cam bardakbaskılı kupasuperbetinsuperbetin girişsuperbetinsuperbetin girişzbahiszbahis girişzbahiszbahis girişperabetperabet girişperabetperabet girişspincospinco girişspincospinco girişdinamobetdinamobet girişdinamobet güncel girişcasibom girişcasibom güncel girişbetpuanjustin tvselcuksportsdinamobetdinamobet girişdinamobet güncel girişdinamobetdinamobet girişdinamobet güncel girişvdcasinodinamobetdinamobet girişdinamobet güncel girişdinamobetdinamobet girişdinamobet güncel girişbiabetbiabet girişbiabet güncel girişcasibom güncel girişcasibomcasibom girişcasibom güncel girişbetebethititbetbetebetcasibomcasibom girişcasibom güncel girişbetvoledinamobetdinamobet girişdinamobet güncel girişbetplaybetplay girişbetplay güncelligobetligobet mobilligobet casinograndpashabetbetebetcarkbetcarkbet girişmaç izleTaraftarium24Taraftariumextrabetextrabet girişextrabet güncel girişspincospinco girişbetwoonbetwoon girişbetparkbetpark canlıbetpark güncellenenbetpasbetturkeybetturkey girişbetturkey güncel girişbetturkeybetturkey girişbetturkey güncel girişinterbahisbetebetcasinofastinterbahisbetebetvdcasinorestbetbetperbetebetavvabet girişvdcasinocasibomcasibom girişcasibomcasibomcasibom girişcasibom güncel girişvdcasinokingroyalbetebetcasinofastAntalya EscAntalya EscortAntalya EscAntalya EscortBursa EscBursa Escortrestbetbetpasmersin escortescort mersinmersin escort bayanbetsmovebetsmove girişpulibetbetofficebetoffice girişsafirbethititbethititbetjestbahisjestbahisbetperholiganbetholiganbet girişholiganbetholiganbet girişpadişahbetpadişahbet girişpadişahbettipobetpadişahbet giriştipobet giriştipobettipobet girişhititbetcasibomcasibomcasibom girişcasibom güncelcasibom girişganobetSweet Bonanza Oynabetparkbetpark güncelbetpark girişhititbethititbetcasinoroyalcasinoroyal girişcasinoroyal mobilextrabetextrabet girişsekabetsekabetmarsbahismarsbahis girişJojobetmersin escortmersin escort bayanparibahisslotbarslotbarvipparkCasiveraparibahiscratosslothacklinkganyanbetganyanbet girişvdcasinovdcasinotestkavbethititbetbig bass bonanzabig bass bonanza oynabig bass bonanza demokralbet güncel girişkralbet girişperabetperabet girişmersin escortescort mersinmersin escort bayanGalyabetmarsbahismarsbahis girişbahiscasinobahiscasino girişvegasslotbetordercasibomcasibom girişcasibom güncelturboslotturboslot girişturboslot güncelbetorderjojobetbetofficeextrabetextrabet girişsekabetekrem abiekrem abi sitelerekrem abi güvenilir sitelerfixbethititbetslotbarslotbarvdcasinolunabet girişmojobet搜狗输入法下载lunabet güncel girişkavbetselcuksportstaraftarium24taraftariumtaraftarium24selcuksportsjustin tvkingroyal girişkingroyal girişmarsbahismarsbahis girişmarsbahismarsbahis girişrestbetextrabetextrabetextrabet girişrestbetsafirbetpulibetbetpasbahsinebovbetmarsbahismarsbahis girişgalabetkavbetrestbetrestbet girişpadişahbetpadişahbetbetebetjojobetjojobet girişjojobet güncel girişpadişahbetultrabetultrabetultrabetultrabetsnipaste截图工具ganyanbetganyanbet girişbetturkeybetturkey girişbetturkey güncel girişbetturkeybetturkey girişbetturkey güncel girişwps下载kralbetkavbetbetpasbetpas girişbetasuskralbet güncel girişvdcasinocasibomcasibomcasibom girişcasibom güncel girişcasibomcasibom girişcasibom güncel girişmarsbahismarsbahis girişperabetperabet girişrestbetrestbet girişbetperholiganbetgrandbettingmeritcasinobetsatbetsat girişbetsat girişbetsathitbethitbet girişhitbethitbet girişbetlikebetlike girişbetlikebetlike girişbetsmovebetsmove girişbetsmovebetsmove girişkolaynetkolaynet girişkolaynetkolaynet girişbiabetbiabet girişbiabetbiabet girişextrabetextrabet girişextrabetextrabet girişcratosroyalbetcratosroyalbet girişcasinomaxicasinomaxi giriştib botuDmca takedownDmca site kaldırmapusulabetartemisbetpadişahbetmatbetmarsbahismarsbahis girişpadişahbetbetasusbetebetholiganbetholiganbetholiganbetholiganbetholiganbetholiganbetngsbahisbetpaskavbetpusulabetmatbetartemisbetmakrobetbetsatbetsat girişbetsat güncel girişbetsatbetsat girişhuhubetpiabellacasinopiabellacasino girişbetturkeybetturkey girişbetturkey güncel girişslot sitelerigüvenilir slot siteleri汽水音乐下载extrabetextrabet girişmobilbahismobilbahis girişcratosroyalbetcratosroyalbet girişcratosroyalbetcratosroyalbet girişmobilbahismobilbahis girişmobilbahismobilbahis girişmobilbahismobilbahis girişcratosroyalbetcratosroyalbet girişcratosroyalbetcratosroyalbet girişbetwoonmarsbahisegebetegebet girişlunabetlunabet girişpusulabetpusulabet girişpusulabetpusulabet girişholiganbetholiganbet girişholiganbetholiganbet girişmavibetmavibet girişmavibetmavibet girişmavibetmavibet girişmatbetmatbet girişmarsbahismarsbahis girişkralbet girişkralbet güncel girişkralbet girişjojobet güncel girişganobetextrabetbetvaktibetasusbetpasbetwoonbetwoon girişbetwoonbetwoon girişmavibetkalebetBetsatBetsat Girişholiganbetholiganbetholiganbetholiganbetholiganbetbetturkeybetturkey girişbetturkey güncel girişultrabetjojobetsahabetsahabet girişsahabet güncel girişbetturkeybetturkey girişbetturkey güncel girişcasibomjojobetKocaeli Escortİzmit EscortGölcük Escortkocaeli escortİzmit EscortKaramursel Escortyalova escortcasibom girişholiganbetholiganbet girişholiganbet güncel girişcasibom giriştaraftarium24canlı maç izletaraftarium24canlı maç izlebergarantibetgaranti girişstarzbetperabetbetwoonbetwoon girişcratosroyalbetcratosroyalbet güncel girişcratosroyalbet girişcratosroyalbetcratosroyalbet girişcratosroyalbet güncel girişbetnanobetnano girişbetwoonbetwoon girişcasibompulibetpulibet girişcasibom girişbetnanobetnano girişcasibompulibetpulibet girişcasibom girişcasibombetwoonbetwoon girişcratosroyalbetcratosroyalbet girişcratosroyalbet güncel girişbetmoneyslotbarbetsmovenerobetklasbahispulibetbetixirtaksimbetmarsbahis giriştaksimbet girişstake girişkareasbettrendbetmarsbahiskralbet girişkralbet güncel girişkralbet girişganobetcasibom güncel girişsafirbetbetwoonmarsbahissuperbetinwbahiswbahis girişpulibetpulibet girişbetpaskavbetngsbahismislibetmaksatbahismavibetbahisseninikimislisekabetsekabet girişsuperbetinsuperbetin girişstarzbetmarsbahislimanbetsahabetsahabet girişenbetultrabetmeritbetvevobahisultrabetultrabettimebettimebetsmartbahisbetcibetciimajbetimajbet girişbetcismartbahishiltonbettophillbetikimisliikimisli giriştophillbetcasibomcasibom girişhiltonbetbetperhiltonbettophillbetbetgarbetgar girişcasibomcasibom girişxslotxslot girişcasibomcasibom girişgalabetgalabet girişroketbetroketbet girişjokerbetjokerbet girişjokerbetcasibomcasibom girişsahabetsahabet girişsahabetsahabet girişonwinonwin girişholiganbetholiganbet girişbetkombetkom girişradissonbetbetkomcasibomcasibom girişcasibomcasibom girişmarsbahis yeni girişmarsbahis girişmarsbahis resmi girişbetwoonbetwoon girişbetwoonbetwoon girişcasibomcasibom girişvaycasinovaycasinocasibomcasibom girişpokerklasbetmarinocasibomcasibom girişwhatsapp网页版galabettaraftarium24canlı maç izlerestbetrestbettaraftarium24canlı maç izlevevobahiscasibomcasibom girişrestbetholiganbetholiganbetwhatsapp网页版登入onwingalabetroketbetjojobetjojobet girişjojobet güncel girişsahabetsahabet girişgrandpashabetgrandpashabet girişdedebetdedebet girişdedebet girişdedebetjasminbetpusulabettrendbet güncel giriştrendbet girişgrandpashabettaksimbet güncel girişmarsbahismatbetsekabetimajbetimajbetpusulabetsekabetmatbetvdcasinopusulabetvdcasinojojobetjojobet girişjojobet güncel girişcasibomcasibom girişcasibom güncel girişQueenbetprensbetgalabetgalabet girişgalabet güncelgalabetgalabet girişgalabet güncelgalabetgalabet girişgalabet günceldinamobetdinamobet girişdinamobet güncel girişmarsbahisholiganbetgrandpashabetholiganbetholiganbet girişholiganbet güncel girişdinamobetdinamobet girişdinamobet güncel girişdinamobetdinamobet girişdinamobet güncel girişkingroyalkingroyal girişkralbetkralbet girişkralbetkralbet girişkralbetkralbet girişteslabahisbahisseninmaksatbahiskalebetngsbahisodeonbetmarsbahismarsbahis girişamgbahisavvabetbetbigobetboxbetcibullbahissuperbetinsuperbetin girişcandycasinocasinoroyssweet bonanzasweet bonanza oynacoinbardedebetegebetenbetgalabetgrandoperabetganobethızlıcasinokingbettingluxbetmedusabahismonobahisnoktabetparmabetpiabellacasinoprensbetromabetsmartbahissohobetikimislipasacasinopulibetpulibet girişpashagamingjojobetjojobet girişjojobet güncel girişultrabetholiganbetholiganbettaraftarium24jojobetjojobet girişjojobet güncel girişholiganbetholiganbet girişholiganbet güncel girişbetparkbetpark giriştaraftarium24klasbahistaraftarium24casibomcasibom girişcasibom güncel girişcasibomcasibom girişcasibom güncel girişbahsegelbahsegel girişbahsegel güncel giriş1xbet1xbet giriş1xbet güncel giriştaraftarium241xbet1xbet giriş1xbet güncel giriştümbettümbet giriştümbet güncel giriştümbettümbet giriştümbet güncel girişbahiscasinobahiscasino girişbahiscasino güncel girişbahiscasinobahiscasino girişbahiscasino güncel girişnorabahisnorabahis girişnorabahis güncel girişnorabahisnorabahis girişnorabahis güncel girişnorabahisnorabahis girişnorabahis güncel girişenjoybetenjoybet girişenjoybet güncel girişslot sitelerienjoybetenjoybet girişenjoybet güncel girişcasinoroyalcasinoroyal girişcasinoroyal güncel girişpashagamingcasinoroyalcasinoroyal girişcasinoroyal güncel girişmaximcasinomaximcasino girişmaximcasino güncel girişmaximcasinomaximcasino girişmaximcasino güncel girişalobetalobet girişalobet güncel girişklasbahisistanbulbahiscapitolbetmarsbahisbetwildbetwild girişbetixir girişgrandpashabetmatbetsekabetpusulabetvdcasinocasibomcasibom giriştarafbettarafbet giriştaksimbet güncel girişbetebetbetebet girişbetebetbetebetbetebet girişbetebetegebetegebet girişegebet güncel girişsupertotobetsupertotobet girişsupertotobet güncel girişcasinoperbetgarantibetgaranti güncelbetgaranti çekimtipobettipobet giriştipobet güncelcasinoper