If you noticed the code examples in previous posts, the samples might look very boring. If this website was live on the web, it would seem very basic with just text tags and a couple of images. This website might need some help.
Enter CSS.
HTML & CSS go together just like peanut butter and jelly. When they work together, you get an amazing, functional website. It doesn’t matter if it is my portfolio site or the New York Times. Every website uses CSS to make a distinctive look and feel.
Developers use CSS to help bring designs made in software programs such as Photoshop or Sketch to life on the web. Today’s post looks at the next portion of the updated Skillcrush 101 course. I will be reviewing lessons 9 and 10 which introduce the basics of working with CSS.
During this post, I will review how to use CSS and how you can begin using it to style text. Although this post will concentrate on CSS, it is still important to have a good understanding of HTML before you begin learning CSS. I also suggest reviewing some important concepts about web design before you start working with CSS. Although it isn’t required for CSS, it is a good thing to keep in mind as you add style to your website.
What is CSS?
CSS is short for Cascading Style Sheets. CSS is what developers use to add style and beauty to a website. Like HTML, CSS is a way developers communicate with the computer.
Skillcrush likes to think of CSS as directions developers give computers to tell them how things should look on a website. They provide more information about the HTML tags on the website from how the content should be displayed to where items need to be placed on a website. Clarity is key in coding and this is made very clear in CSS.
CSS uses the HTML tags to tell the computer how the HTML needs to be displayed in the browser. The computer interprets the information and displays the content on the browser just the way you instructed. You can see CSS shown on a website in different ways.
First, you might see a style tag in the HTML file. This lets the computer know you will be adding CSS code and you’ll put all the CSS changes you want in between the opening and closing style tags. The other way you will see CSS is through a stylesheet.
Developers will create a separate style sheet file and link the HTML to the CSS file in the head tag. For example, the sample code in this CSS file shows how I link the stylesheet to the HTML file. I set the rel attribute to the stylesheet and the href attribute to style.css in the head tag to let the computer know where to find my CSS file and what it should be called.
<!DOCTYPE html>
<html>
<head>
<title>CSS Demo</title>
<link rel="stylesheet" href="style.css">
</head>
</html>
Every developer has a preference on which one you should use. However, Skillcrush and I use separate files for the HTML and CSS. It is easier to work with and will make your code a lot more organized.
CSS Selectors
If you look at a stylesheet, you will see different HTML elements being described. These are CSS selectors. Selectors tell the browser what HTML element you want to change.
Unlike HTML, CSS doesn’t need the selectors between < or >. Instead, developers use curly braces. The curly braces are an important part of CSS since they tell the browser what CSS properties are being used.
CSS properties are similar to descriptions. The browser needs the properties to have clarity on what needs to be changed. Each property is written on a separate line and uses the same format.
This format is the property name, colon, property value, and then finally a semi-colon. Semi-colons let the computer know you are done making changes to one CSS property. Without it, the computer will get confused and won’t make the changes.
h1 {
color: orange;
font-family: Arial;
font-size: 55px;
}
h2 {
color: red;
font-family: Georgia;
font-size: 28px;
}
ol li {
font-size: 15px;
font-family: Georgia;
}
There are tons of CSS properties you can use to style a website. This makes it difficult for developers to memorize them all. Luckily, there are tons of great CSS resources and websites available for developers to use and find the CSS properties they need to build an amazing website. Even though you don’t memorize CSS properties, it is still important for developers to be familiar with how they work on a website.
How to Style Text
Skillcrush starts CSS by showing students how to style text. CSS is often used to style text and Skillcrush reviews some of the CSS properties often used by developers to style websites. The basic properties every developer uses to style text are font family, font size, and color. There are plenty more CSS properties, but developers use resources and cheat sheets to help them know which property to use.
Font Family
The font-family property lets developers set the font for text as long as it is an accessible web font. Web fonts that are already loaded on your computer can be used for the font-family property, but you will later learn how to use other fonts you find on the web. When using the font-family property, developers can specify which font they want or indicate a specific family for the default font.
Font Size
Font size tells the computer what font size the text needs to be. When it comes to working with font size, developers can use either pixels or em measurements. Pixels measure the height of the text based on the number of dots used to create the text you see on the browser.
For example, an h1 tag with a font size of 25px tells the browser the headline needs 25 dots to make the headline appear on the browser. Em is another way to measure text size. Em is very useful for responsive web design.
I have seen both being used in code so it is a matter of personal preference. However, for newbies, Skillcrush recommends starting with pixels since it is much easier between the two methods.
Color Property
Finally, there is the color property. Developers tell the browser what color to use in hexadecimal values or websafe color names. When working with hexadecimal colors, you must make sure you use a hashtag in front of the color code given.
Without the hashtag, the browser won’t be sure what you want and the color won’t change. Developers can use one or the other in their style sheets. If you notice in the sample code, I use web-safe color names.
However, you can try using hexadecimal colors if you want. There are resources available to developers and designers that let them know all the hexadecimal values for a variety of colors.
Some CSS properties to wet your appetite!
Although you don’t have the memorize all the CSS properties, Skillcrush does a quick run-through over important properties developers often use to style websites. Here are some of the CSS properties and how they function on a website.
Text-align
Text align works the same way text-align functions in Google Docs or Microsoft Word. It just changes the alignment of the text. Your choices are left, right, center, and justify.
Font style
Font style allows developers to italicize the text. It might be similar to the em HTML tag, but developers can do more customization with the CSS property than the em tag.
Font weight
Font weight allows developers to bold a text. It functions the same way as the strong HTML tag, but it allows a little more customization for developers.
Text-transform
Text-transform can make text uppercase, lowercase, or capitalized.
Font-variant
Font-variant puts text into small caps.
Text decoration
Text decoration lets developers put lines above, below, overline, or through text.
Line height
Line height makes line height smaller or bigger. Developers try to make the line height the same as the font size. You can use pixels, em, or percentages to measure line height.
Text indent
Text indent sets indent width. This property also takes pixels, em, or percentages.
Word spacing
Word spacing sets the spacing between words. To make the spacing between letters, developers use letter spacing.
Conclusion
CSS is what allows every website to stand out and be unique. I like to think of HTML & CSS as a peanut butter and jelly sandwich. CSS acts as the jelly in this coding sandwich because it makes a website interesting.
This introduction shows how CSS is written and how computers read the CSS code developers write. Finally, I started reviewing important CSS properties developers use every day to build beautiful, amazing websites. In the next few posts, we are going to explore CSS even further with lessons 11 and 12.
These lessons further explore ways to style text with fonts. I will also show you how to style your website with backgrounds and borders. Finally, we will start talking about color, one of the fun parts of CSS. You will learn how to use color on your website.
This post was originally published on March 1, 2017 on the blog The Original BritishPandaChick. I made minor changes to the original post to work here on DEV.
Top comments (0)