Take me back!! I want my CSS!! Click me to get back :)

×

READY FOR A NEW CAREER?

But not sure where to start? Find out if a tech career is right for you.

TAKE THE 3-MINUTE QUIZ

What Is 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 (Cascading Style Sheets) is a close second. 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.

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

12 comments

  1. tec masutani sakura ne Replied

    Respect to website author , some wonderful entropy.

  2. 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.

  3. 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. 

  4. kdenis Replied

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

  5. chanel.gillespie Replied

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

  6. JRivera Replied

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

  7. 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! 

  8. NellieG Replied

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

  9. 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.