Tech 101: The Ultimate Guide to CSS

what is css
Get Our Free Ultimate Guide to Coding for Beginners

Get Our Free Ultimate Guide to Coding for Beginners

Make a plan for learning the tech skills you need to land a new job with this 60+ page FREE ebook!

Remember HTML (Hypertext Markup Language)? The coding language that serves as the foundation for all web development? Well, if HTML is the first language you’ll want to learn when you’re interested in building websites, its cousin CSS is a close second.

What is CSS? And How Does It Relate to HMTL?

CSS stands for Cascading Style Sheets with an emphasis placed on “Style.” While HTML is used to structure a web document (defining things like headlines and paragraphs, and allowing you to embed images, video, and other media), CSS comes through and specifies your document’s style—page layouts, colors, and fonts are all determined with CSS. Think of HTML as the foundation (every house has one), and CSS as the aesthetic choices (there’s a big difference between a Victorian mansion and a mid-century modern home).

How Does CSS Work?

CSS brings style to your web pages by interacting with HTML elements. Elements are the individual HTML components of a web page—for instance a paragraph—which in HTML might look like this:

<p>This is my paragraph!</p>

If you wanted to make this paragraph appear pink and bold to people viewing your web page through a web browser, you’d use CSS code that looks like this:

p  {  color:pink;  font-weight:bold;  }

In this case, “p” (the paragraph) is called the “selector”—it’s the part of CSS code specifying which HTML element the CSS styling will effect. In CSS, the selector is written to the left of the first curly bracket. The information between curly brackets is called a declaration, and it contains properties and values that are applied to the selector. Properties are things like font size, color, and margins, while values are the settings for those properties. In the example above, “color” and “font-weight” are both properties, and “pink” and “bold” are values. The full bracketed set of

{  color:pink;  font-weight:bold;  } 

is the declaration, and again, “p” (meaning the HTML paragraph) is the selector. These same basic principles can be applied to change font sizes, background colors, margin indentations, and more. For instance. . .

body  {  background-color:lightblue;  }

. . .would make your page’s background light blue, or. . .

p  {  font-size:20px;  color:red;  }

. . .will create a 20 point font paragraph with red letters.

External, Internal, or Inline CSS?

You might be wondering how this CSS code is actually applied to HTML content, though. Much like HTML, CSS is written in simple, plain text through a text editor or word processor on your computer, and there are three main ways to add that CSS code to your HTML pages. CSS code (or Style Sheets) can be external, internal, or inline. External style sheets are saved as .css files and can be used to determine the appearance of an entire website through one file (rather than adding individual instances of CSS code to every HTML element you want to adjust). In order to use an external style sheet, your .html files need to include a header section that links to the external style sheet and looks something like this:

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

This will link the .html file to your external style sheet (in this case, mysitestyle.css), and all of the CSS instructions in that file will then apply to your linked .html pages.

Internal style sheets are CSS instructions written directly into the header of a specific .html page. (This is especially useful if you have a single page on a site that has a unique look.) An internal style sheet looks something like this. . .

<head>
<style>
Body  {  background-color:thistle;  }
P  {  font-size:20px;  color:mediumblue;  }
</style>
</head>

. . . a thistle background color and paragraphs with 20 point, medium blue font will now be applied to this single .html page.

Finally, inline styles are snippets of CSS written directly into HTML code, and applicable only to a single coding instance. For example:

<h1  style=”font-size:40px;color:violet;”>Check out this headline!</h1>

would cause one specific headline on a single .html page to appear in violet, 40 point font.

Generally speaking, external style sheets are the most efficient method for implementing CSS on a website (it’s easier to keep track of and implement a site’s style from a dedicated CSS file), while internal style sheets and inline style can be used on a case by case basis when individual style changes need to be made.

So if HTML is the foundation, frames, walls, and girders supporting your website, consider CSS the paint color, window styles, and landscaping that comes on afterward. You can’t get anywhere without putting that foundation up first, but—once you do—you’ll want to follow up with some style, and CSS is the ticket to unleashing your inner decorator.

Get Our Free Ultimate Guide to Coding for Beginners

Get Our Free Ultimate Guide to Coding for Beginners

Make a plan for learning the tech skills you need to land a new job with this 60+ page FREE ebook!

Your email address will not be published.

Cancel

48 comments

  1. Dorian Lamay Replied

    The the next occasion Someone said a weblog, I’m hoping that this doesnt disappoint me just as much as this blog. After all, Yes, it was my solution to read, but I actually thought youd have something intriguing to say. All I hear is often a lot of whining about something you could fix should you werent too busy interested in attention.

  2. protosmasher download Mac Replied

    Attractive section of content. I just stumbled upon your web site and in accession capital to assert that I acquire in fact enjoyed account your blog posts. Any way I’ll be subscribing to your augment and even I achievement you access consistently rapidly.

  3. Arron Keogh Replied

    Found your blog in the yahoo bulk shirts warehouse directory, very nice job, thanks. Screen printing could further supply for all types of other substrates from plastic to metal. Despite the fact that tiny and complex details can be gathered, screen printing is preferably ideal for bold and graphic designs.

  4. Clyde Mcquire Replied

    Nice post. I learn something tougher on different blogs everyday. Most commonly it is stimulating to study content using their company writers and employ a little from their store. I’d want to apply certain using the content on my own weblog regardless of whether you don’t mind. Natually I’ll provide you with a link in your internet weblog. Many thanks sharing.

  5. Domitila Shodunke Replied

    This will be a excellent web site, might you be interested in doing an interview about how you designed it? If so e-mail me!

  6. Cammie Solonar Replied

    mobile devices are always great because they always come in a handy package**

  7. Mahalia Shreve Replied

    I am glad for commenting to let you be aware of of the outstanding experience my wife’s princess encountered reading your site. She came to find plenty of issues, with the inclusion of how it is like to possess an excellent teaching mood to have a number of people very easily fully grasp specific specialized things. You actually did more than our own desires. Many thanks for displaying the powerful, trustworthy, edifying and as well as easy tips about your topic to Ethel.

  8. Jonathan Pellowski Replied

    It?s hard to find knowledgeable people on this topic, but you sound like you know what you?re talking about! Thanks

  9. Brandy Calumag Replied

    It’s awesomeremarkableamazing fordesigned forin favor ofin support of me to have a websiteweb sitesiteweb page, which is beneficialhelpfulusefulvaluablegood fordesigned forin favor ofin support of my experienceknowledgeknow-how. thanks admin

  10. Lesia Murdock Replied

    I enjoy what you guys tend to be up too. Such clever work and exposure! Keep up the great works guys I’ve included you guys to our blogroll.

  11. Burton Coxwell Replied

    Right here is the perfect web site for anybody who wants to find out about this topic. You realize a whole lot its almost tough to argue with you (not that I personally will need to…HaHa). You certainly put a brand new spin on a subject that’s been discussed for decades. Great stuff, just great!

  12. Mckinley Cipolloni Replied

    Someone necessarily help to make seriously posts I would state. This is the very first time I frequented your web page and up to now? I amazed with the analysis you made to create this actual submit incredible. Fantastic task!

  13. Meda Sesma Replied

    Hi, just came across this article. Its a great illustration of how small to medium sized businesses can use Awards based promotion to get their companies recognised on the 1st page of Google. Awards programmes offer many benefits to winners. After all they bring publicity and you can share the news of your win with your employees, clients, industry peers and target market as much as you like. Additonally awards offer prestige and status, giving potential clients peace of mind that they are working with a reputable company. There are many types of awards programmes, including those that host awards ceremonies (and you pay per table), organisations that award only their members (and you pay for membership and sponsorship) and those that provide promotional materials. The latter is a great way for those who are unsure about the benefits of using corporate awards programmes because generally nominees and winners do not have to pay a penny to be considered. Winners often receives online recognition, usually with a reach much greater than their own marketing efforts can deliver. Other free benefits can include the use of an press release. Most participants have the option to purchase additional marketing materials to further enhance their win, if they wish to, for use in social media campaigns, on their own website, email marketing campaigns or in customer newsletters.

  14. furtdso linopv Replied

    great post, very informative. I wonder why the other specialists of this sector don’t notice this. You should continue your writing. I am confident, you have a great readers’ base already!

  15. Servicio Oficial De Reparaciones Madrid Replied

    La meta de nuestra empresa es lograr y conservar su confianza, por ello, nuestro SERVICIO TÉCNICO ESPECIALISTA EN Lavadoras Bosch garantiza transparencia y lealtad hacia usted. Nuestro cometido es que usted se despreocupe de la reparación de su Lavadoras Bosch y su factura desde el momento que se pone en contacto con nosotros. Somos especialistas en Lavadoras Bosch, nuestra filosofía es: economía, rapidez, franqueza y profesionalidad porque ofrecemos y garantizamos confianza a nuestros clientes a la hora de abrir la puerta de su hogar a un técnico. Lavadoras, Lavavajillas, Secadoras, Calentadores, Neveras, termos, Frigoríficos.

  16. free hidden pubg steam game activate code wiki Replied

    obviously like your web-site but you have to test the spelling on several of your posts. Many of them are rife with spelling issues and I in finding it very bothersome to inform the truth however I’ll definitely come again again.

  17. componentes de vitroceramicas mecanicas Replied

    Si por el contrario lo que usted necesita es instalar, cambiar hacer una reparacion calentador Junkers en Legazpi , pongase en contacto con nosotros y uno de nuestros tecnicos le aconsejara

  18. THE BEST HACK CSGO FREE DOWNLOAD – UNDETECTED Replied

    Hi there, You have performed an excellent job. I’ll definitely digg it and personally recommend to my friends. I am confident they’ll be benefited from this site.

  19. Instagram Hack Learn to hack ANY Instagram Account Replied

    Nice post. I was checking constantly this blog and I am impressed! Very helpful info specially the last part :) I care for such info much. I was looking for this particular info for a very long time. Thank you and good luck.

  20. furtdso linopv Replied

    It’s perfect time to make a few plans for the long run and it is time to be happy. I’ve read this post and if I may I want to recommend you few interesting issues or tips. Maybe you can write subsequent articles relating to this article. I desire to learn even more issues approximately it!

  21. Jarvis Baur Replied

    I visited many websites except the audio feature for audio songs current at this web page isgenuinely marvelous.

  22. POrn Replied

    The 2018 recipients of this University of Washington’s prestigious teaching awards may be from fields ranging from social work to surgery, but one thing they have in common 3 week diet is their ability to inspire students. thanks for the information here. also find information regarding 3 week diet.

  23. uptodownfortnite Replied

    I was suggested this web site by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my trouble. You’re incredible! Thanks!

  24. line play gem hack Replied

    Hello, here from yahoo, me enjoyng this, I come back again.

  25. chao resort island Replied

    Hi there! Do you use Twitter? I’d like to follow you if that would be ok. I’m absolutely enjoying your blog and look forward to new posts.

  26. learn how to make money online free Replied

    hey there and thank you for your information – I have certainly picked up anything new from right here. I did however expertise a few technical issues using this site, as I experienced to reload the website many times previous to I could get it to load correctly. I had been wondering if your web host is OK? Not that I’m complaining, but slow loading instances times will sometimes affect your placement in google and could damage your quality score if advertising and marketing with Adwords. Well I am adding this RSS to my e-mail and can look out for much more of your respective fascinating content. Ensure that you update this again soon..

  27. Virtual Serial Port Driver 7.1 Full + Keygen kurulum Anlatımı Replied

    I like this website its a master peace ! Glad I found this on google .

  28. Vaastu Consultant in Tirunelveli Replied

    Thank you for some other fantastic post. Where else could anybody get that kind of info in such a perfect method of writing? I have a presentation subsequent week, and I am on the search for such info.

  29. cynthia matthew Replied

    Really amazing i know what i think is very difficult

  30. Ben Replied

    Pretty interesting so far. Looking forward to the rest.

  31. zvodret iluret Replied

    Can I just say what a relief to find someone who actually knows what theyre talking about on the internet. You definitely know how to bring an issue to light and make it important. More people need to read this and understand this side of the story. I cant believe youre not more popular because you definitely have the gift.

    • Jenibelle Replied

      So much info in so few words. Totsloy could learn a lot.

  32. tec masutani sakura ne Replied

    Respect to website author , some wonderful entropy.

  33. Acme Gamers Replied

    Well, according to me it is my initial step towards computer coding and if I know this website before I would already have masterd all of the stuff present here. Skill crush thanks for all of the knowledege you provide here.

  34. Anonymous Replied

    Wow, looking at the old CSS stylesheet it brought me back to my high school years when I took a computer coding class and we had to write things like that out and I knew nothing about it at all. I went in the class blindly and finished the class not understanding it because everything was confusing and the instructor was not easy to work with. 

  35. kdenis Replied

    I’m so thankful for this site. I can tell I will benefit from learning through skillcrush.

  36. chanel.gillespie Replied

    I can see myself very interested In this universe.
    So glad this is offered for beginners. Peace and Thanks

  37. JRivera Replied

    Using IE at all makes me break out in hives. I can’t imagine it for someone on the backend. 

  38. susanlong Replied

    This is all new information for me. I knew I didn’t know what I didn’t know and I can see it will grow exponentially! 

  39. NellieG Replied

    This is great.  I knew the information but didn’t it was called CSS.  

  40. singapoorboy Replied

    Does spacing matters? Example, (font-weight:bold;) is the same as (font-weight: bold;)?

Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.