- CSS3 – HTML is the structure, but CSS, or Cascading Style Sheets, is the style. You use things called CSS selectors, which correspond to HTML elements, classes, or IDs. Media queries allow you to change what a page looks like based on the width of the screen. Sometimes modern CSS developers use things called preprocessors, such as Sass, for more functionality, instead of writing all their CSS manually.
- My main website uses over 1,500 lines of CSS3, though you can make something that looks good with far fewer lines than that.
- Here is an example of a CSS file. It corresponds with the HTML example in the previous section. You use a CSS file to change what an HTML page looks like.
* {
font-family: Arial;
}
#quoteText {
font-size: 2rem;
}
body {
background-color: rgb(156, 188, 247);
}
h1, h2 { /*multiple selector*/
color: rgb(238, 238, 238);
text-shadow: 3px 3px black;
}
h2 {
background-color: #294c77;
width: 200px;
padding-top: 3px;
padding-bottom: 3px;
text-align: center;
margin-right: auto;
margin-left: auto;
border: 2px solid black;
border-radius: 10px;
}
header {
background-color: #525d6f;
border-radius: 10px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
border: 2px solid black;
}
nav {
margin-top: 5px;
margin-bottom: 5px;
display: flex;
background-color: #294c77;
border-radius: 5px;
padding-top: 5px;
padding-bottom: 5px;
border: 2px solid black;
}
nav > * {
margin-right: auto;
margin-left: auto;
}
nav > a {
color: rgb(238, 238, 238);
}
footer {
color: rgb(238, 238, 238);
background-color: #294c77;
text-align: center;
border-radius: 5px;
border: 1px solid black;
margin-top: 6px;
}
nav > a:hover, footer > p > a:hover {
color: lightblue;
}
footer > p > a {
color: rgb(238, 238, 238);
}
main > div {
background-color: #525d6f;
border-radius: 20px;
padding: 10px;
border: 2px solid black;
}
.current {
color: lightskyblue;
}
.bodytext {
background-color: rgb(238, 238, 238);
display: inline-block;
border: 2px solid black;
padding: 1rem;
}
There’s a lot to it, so let’s break it down one concept at a time.
Firstly, you might notice a pattern of what things look like.
selector {
property: value;
}
This is called a CSS selector. It allows you to select a certain thing and then specify how it looks. The things within a CSS selector are called properties, and the thing following a colon in a property is the value you’re setting it to. For example, a selector could have something like this to change the text color:
color: red;
- Properties and values need to be ended with a semicolon.
- Selectors have the name followed by curly braces, and then any properties and values within that.
- Also, just a tip from something I picked up from one of my professors: if you want to see a certain element on the page, you can create a temporary selector that you delete later that only has the properties of background-color: red and color: red. That makes it easy to spot on the page, which can help you figure out where something is, where it fits into the page, and what its boundaries are. You can also use right click -> Inspect in Chrome or right click -> Inspect Element in Firefox to bring up the console and view a lot of information that is useful for developers.
- Moving on, for the first selector in the example CSS file:
* {
font-family: Arial;
}
- * means wildcard, which means anything. So when you use a * selector, it will apply the properties in it to everything in the HTML page. In this case, I want to make everything have the font-family of Arial, but I don’t want to write tons of separate selectors to get this same effect. So a wildcard is useful in this case, though it’s not appropriate for all situations.
- csslint.net, a site for checking for CSS warnings and errors, says this about my use of the wildcard character:
“The universal selector (*) is known to be slow.”
It’s not a fully-fledged error, just a warning. In this particular case, I’m going to ignore it. csslint.net also had a couple of other small complaints about my CSS code, but they’re nothing major. For example, it also says, “Don’t use IDs in selectors,” but I disagree with that warning.
- Next, we have something called an ID selector:
#quoteText {
font-size: 2rem;
}
- The # indicates that you are selecting an HTML ID. Recall that an ID is an attribute of an HTML element, such as id=”quoteText”. This will apply to an element on the page that has the id specified in the selector.
- Here is a part of the Projects page in this website example (which you can download from GitHub to get the full website template):
<p id=”quoteText”>”Some cool quote”</p>
This is part of the page that lets the user click a button to change the quote that is displayed on the screen. This isn’t the full code for it, but you will notice one key thing: there is an HTML attribute called id, and it is given a value of quoteText. So the selector will select it.
#quoteText {
font-size: 2rem;
}
- The font-size property here has a value of 2rem, which means it will be twice as big as normal. I want the quote’s text to pop out at the reader, as opposed to being the same size as everything else.
- There are many different ways to change font size. You can specify it in terms of percentage (%), pixels (px), points (pt), rem, or em. em means parent element size. rem means root element size. Long story short, 2rem means the text will be twice as big as the text around it.
- quoteText is not a thing in CSS. It’s just a name I made up. You can use whatever names you want for IDs and classes, but make sure you don’t use reserved keywords. It helps if your class and ID names are descriptive, rather than something like x or someClass.
- Next, I have a plain old element selector.
body {
background-color: rgb(156, 188, 247);
}
- This means any <body> tag will have these properties applied to it.
- The property I used here, background-color, changes the color of the background in that particular element. You can use a color name, such as red or blue, a hexadecimal value with a # in front of it, such as #294c77, or an rgb value. In this case, I used rgb to make a light blue color. In the editor Visual Studio Code (a.k.a. VS Code), when editing CSS, there’s a color picker tool that pops up when you are writing CSS properties that involve colors. If you use VS Code, try copying the above selector and then hovering your mouse over the rgb part of it. It should make the color picker tool pop up. This is much less tedious than manually doing combinations of red, green, and blue and hoping it looks good.
- So long story short, the above selector makes the background of <body> light blue. But the whole page won’t be blue, because there are sub-elements which can be colored separately. Then you can get a layered look.
- Next up is a multiple selector:
h1, h2 { /*multiple selector*/
color: rgb(238, 238, 238);
text-shadow: 3px 3px black;
}
- In this case, I am selecting both the 1st level and 2nd level headings. So all <h1> and <h2> tags will be changed with this. You need a comma in between different elements, IDs, or class names that you want to select.
- color means to change the color of the text. background-color is different. In this case, rgb(238, 238, 238) gives an off-white color. text-shadow gives a drop shadow. I made a black drop shadow with white text to make it stand out from its background more. Moreover, it also demonstrates multiple CSS features here, which is what I’m really going for. The two numbers in the value for the text-shadow property specify how far down and to the side you want it to be.
- /*multiple selector*/ is a comment. The computer or phone viewing it will ignore it. Anything in /**/ is a comment in CSS.
- Next, I have an h2 selector:
- h2 {
- background-color: #294c77;
- width: 200px;
- padding-top: 3px;
- padding-bottom: 3px;
- text-align: center;
- margin-right: auto;
- margin-left: auto;
- border: 2px solid black;
- border-radius: 10px;
- }
It changes the background-color to a somewhat dark, grayish blue. Width changes the width of the <h2> element. padding-top and padding-bottom add padding to it, which makes the element bigger on the top and bottom. text-align: center puts the text in the middle of the screen, though as you will learn when you do CSS on your own, centering elements can sometimes be very frustrating and isn’t as easy as you might think. But in this case, centering text is quite easy. margin-right and margin-left are for margins on either side. Margins are different from padding. padding makes the element bigger, whereas margin is a space in between the element and its surrounding elements.
- I used margin-right: auto and margin-left: auto to center the element. This is not the same as centering text. When you center text with something like text-align: center, you are centering it within the element. But the element itself might be off to the side, so while the text might be centered within that small element, it certainly isn’t centered for the entire page. So remember these two properties and values for centering things.
- border adds a border to the element. It’s like padding in the sense that it makes the element bigger, as opposed to margin, which is just spacing between it. border: 2px solid black puts a 2-pixel black line around the entire element.
- All of these things combined make up what is called the CSS box model. First, there’s your content. Then it’s surrounded by padding. Then, after that, there’s the border. Finally, you have the margin.
- border-radius is used if you want to either have rounded corners or even make something circular. In this case, I’m just making the heading looked a little rounded instead of purely rectangular. Some people prefer sharper-looking corners though. Unlike algorithms and time complexity, CSS is more subjective and artsy. I might make a site one way, and you might make yours look different. It’s personal preference, though it should also be combined with looking at what other professional designers use.
- For this example website, I’m not making a website that looks pretty. All I’m doing is making a simple site that demonstrates a lot of useful CSS concepts. You might want to put more effort into making your portfolio website look better. But sometimes, less is more. You don’t want it to look really busy and gaudy. A minimal site can be pretty, so long as it has a good color scheme and font. A good tool you can use for finding aesthetically-pleasing color combinations is Adobe Color: https://color.adobe.com/create
- For free web fonts (which are different from fonts that get installed on a computer), check out Google Fonts:
And for icons, check out FontAwesome:
- Next in the CSS example file is the header selector, which changes the way the <header> part looks, which is above the body. You don’t need to do your CSS selectors in any particular order. In this example, none of the properties I used here were new, so I will skip to the next one.
- Next is the nav selector, which I chose to use a lot of properties I’d already used before, so I won’t repeat myself going over them. But there is one additional property here that is really important: the display property. In this example, I chose to set display to flex. There are other options though.
- But what is the display property? You will be using it a lot, and it might be frustrating at first to get your site to look the way you want.
- There are two main types of elements: block and inline. There are also inline-block, inline-flex, flex, and flexbox. But let’s start with the basics.
- block takes up as much space as it possibly can, taking up an entire line and the whole width from one side to the other (for that particular element, which can be within something else). inline takes up as little as it can, and doesn’t give you a new line. If you have a bunch of things that go top to bottom on a page, but you actually want them to be side by side, you should change the display to inline. block elements take up an entire line by themselves. inline elements do not. inline-block means it’s on the same line, but you can change the width and the height using the corresponding CSS properties.
- inline-flex is like flex, but inline, meaning it doesn’t make a new line. flex is more complicated, so you should probably stick with inline, block, and inline-block for now. If you don’t like the way something is laid out, experiment with different display values. Sometimes, trying a few different ones semi-randomly and seeing what it looks like each time helps. Just make a new entry in your CSS file, save it, and then refresh the web page in your browser. It’s also good to check and see what it looks like in different browsers and on different devices.
- There is also another special display value, none, which makes something not show up at all on-screen. This can be useful when combined with CSS3 media queries, allowing your mobile version of your website will set the display to none for certain things. If you’ve spent a lot of time browsing both desktop and mobile sites, you will notice a general trend of mobile sites showing less stuff. A media query can be used to change something based on a condition, like if the width is less than a certain number of pixels. This falls into the broader category of responsive design, which is more advanced, but something you should be aware of. It means making websites that respond to having the browser window be different sizes. That can be because of someone using a non-maximized browser window on a computer, or by changing the orientation on a phone by flipping it to the side instead of having it upright.
- There are many other display options, but they aren’t that important for beginners.
- Next up in the example CSS file:
nav > * {
margin-right: auto;
margin-left: auto;
}
- This means * within the <nav> tag. * is a wildcard, but you haven’t seen > used in a selector before. This means anything within whatever follows. So in this case, it means * in nav.
- The following selector in the CSS example means any anchor tag (a) within a nav tag:
nav > a {
color: rgb(238, 238, 238);
}
- The footer selector in the CSS file example doesn’t offer anything new to go over, but the next one after that does:
nav > a:hover, footer > p > a:hover {
color: lightblue;
}
- This one is more complicated than previous examples. It uses multiple selectors, each of which featuring a colon followed by the word hover. This is called a pseudo-class.
selector_parent > selector_child:pseudo_class {
property: value;
}
- The next CSS selector shows how you can specify multiple layers:
footer > p > a {
color: rgb(238, 238, 238);
}
- This means an anchor tag (a) within a paragraph tag (p) within the footer tag.
- The main > div selector doesn’t introduce any new concepts, but the two after that do.
.current {
color: lightskyblue;
}
.bodytext {
background-color: rgb(238, 238, 238);
display: inline-block;
border: 2px solid black;
padding: 1rem;
}
- The new concept in the above two selectors is the kind of selector it is. They are class selectors, which are denoted with periods. ID selectors use # symbols, HTML elements use their names, and classes use . for the selector.
- Those are all the basics of CSS. There are some other concepts you should know, but this book is just an overview rather than an in-depth guide.
- Other CSS Concepts
- z-index – if you want to make something above or below something else, use the z-index property. If there are two elements in the same position, the one with the higher z-index goes on top.
- I tend to make z-indexes like this:
z-index: 1;
z-index: 2;
z-index: 50;
z-index: 1000;
z-index: 20000;
z-index: 5000000;
- It doesn’t make much sense, but that’s just how I’ve noticed how I do it. Sometimes I forget what’s the highest number I used, so I use massive numbers to make sure they’re the highest when I add new things that I want to be on top.
- !important – this means that, if there are multiple selectors with properties within the CSS file that redefine the way to style a certain element, the property with !important will take priority. Here’s an example:
font-size: 3rem !important;
- float – make something go the farthest to one side within its parent container.
- float: right or float: left, for example.
- clear – get rid of a certain kind of float.
clear: right;
clear: left;
clear: both;
- position – determines how to position something. The options are absolute, relative, and fixed.
.myCoolClass {
position: fixed;
}
- Some related properties include top, left, right, and bottom. Positive numbers go in one direction, but negative numbers go in the opposite.
top: -140px;
left: 5px;
- :link – a pseudo-class, used for selectors, that means when an element is a link to something and has not been visited yet.
- :visited – a pseudo-class that means a link that the user has clicked on before.
- :active – when you click on a link, it becomes active. However, in most cases, clicking a link won’t take long to load it, so you won’t see the active state for very long.
a:active {
color: purple;
}
- background-image – put a background image within the selected element.
background-image: url(“../images/cool_image.jpg”);
- background-repeat – a CSS property that is used in conjunction with background-image. Example:
background-repeat: repeat;
- opacity – change how opaque or transparent something is. 0 is completely transparent, 0.5 is 50% transparent, and 1 is completely opaque.
h3 {
opacity: 1;
}
- font-style – add a style to some text. For example:
font-style: italic;
- text-align – a way to change how text is aligned. You can choose between justify, left, right, and center. Example:
p {
text-align:justify;
}
- visibility – make something hidden or visible.
- Usage:
visibility: hidden;
visibility: visible;
- Custom fonts – it’s easiest to use fonts that are already installed on the user’s computer or phone. However, maybe you want to use a fancy or special font that doesn’t come with most devices by default. In that case, you will want to have the font file either on your server or on some font-hosting website, and then you can do something like this:
@font-face{
font-family:”Some Custom Font”;
src:url(“../Fonts/my_font_file”);
}
- On the topic of fonts, you can list multiple font-family options, just in case the first one isn’t installed on the user’s machine.
main > * {
font-family: “Comic Sans MS”, “Times New Roman”;
}
- Never use Comic Sans though. It’s a very silly-looking font.
- cursor – change the cursor.
cursor: pointer;
cursor: wait;
- @media queries – there are many different types of media queries, but I mainly use it for windows being different sizes, such as the website being viewed on different devices, or if the window is resized/made smaller.
@media (max-width: 991px) {
.carousel-inner {
top: -140px;
}
p {
size: 40px;
}
}
- You put your CSS selectors within a media query.
- align-content – change the alignment of the content.
align-content: center;
- Another related property:
align-items: center;
- text-decoration – the most common use of text-decoration is to get rid of lines under links. Links to websites will have a line underneath them by default. You might not want that. In that case, you’d do this:
text-decoration: none;
- Aside from none, other values for the text-decoration property include underline, overline, and linethrough. You can add a text-decoration to any text if you really want, but I think links are the only ones that come with a text-decoration by default.
- If you get rid of the underline for a link, make sure you have a :hover pseudo-class selector for them so that you can change the color to make it pop out more when the user hovers over it; otherwise they might not get that it’s a link.
- webkit and moz stuff – things that are specific to certain browsers. Chrome and Safari are based on something called the Webkit engine. Many browsers are Webkit-based. Mozilla Firefox uses a different engine though. Sometimes, browsers render things slightly differently. If you’re a web developer, you need to at least use Firefox and Chrome, and possibly other browsers too, like Safari. And be sure to check mobile browsers as well, on iOS and Android. In theory, browsers should render web pages the same because they are supposed to conform to open web standards. In reality, there will be small differences between the way different browsers show a web page. This can cause problems. Sometimes, a website will look good in one browser, but it’ll look messed up and broken in another. In that case, you might need to use some browser-specific stuff. Most of the time, the differences are minimal, and sometimes not even really worth trying to fix.
- There are many other properties and selectors that can be used in CSS. You don’t need to know all of them when starting out. Here are some additional examples:
min-height: 100vh;
box-shadow: 0px 0px 20px 2px grey;
overflow: hidden;
background: linear-gradient( #374785, #24305e);
- CSS3 also supports animations, like transitions and fading and whatnot. But again, not something you should spend time on when you’re new to CSS.
- You can test your CSS here to make sure there are no problems with it:
- http://csslint.net/
- One last note: keep in mind that, unlike other languages, CSS and HTML aren’t programming languages per se. The ML in HTML stands for Markup Language, and that’s what it is. These kinds of languages can’t support the same kinds of logic and control flow stuff, nor can they support all the same data types and classes you’re used to. They’re more for layout and looks, not logic and algorithms. Some pedantic people nitpick and get upset if you mention either of these when you’re listing programming languages you use. These aren’t the same as fully-fledged programming languages.