Text & Colors in CSS

Code And Create
A free video tutorial from Code And Create
Web Development / Web Design
4.6 instructor rating • 8 courses • 35,763 students

Learn more from the full course

Bootstrap - Create 4 Real World Projects

Bootstrap - Bootstrap with lots of CSS and jQuery. CSS Flexbox is included. Introduce to the latest Bootstrap version!

09:47:41 of on-demand video • Updated November 2020

  • You will start from Bootstrap basics, where you will learn about things like Typography, Utilities
  • You will learn how to align elements on the page using Bootstrap Grid System, and besides that, we will cover CSS Flexbox
  • You will be able to build 4 real world projects using Bootstrap and some CSS and jQuery tricks and techniques
  • After finishing the course you will be able to build modern, great-looking websites on your own
English [Auto] In this lecture I'm going to demonstrate some of the commonly used text classes and also we'll talk about color simple so forth in order to control text alignment of block level elements in CSSA. We used to be using properties like text align center right left and justified but in Bootstrap we can achieve the same text alignment controlling by using proper classes. All right. Let's create three paragraphs with a little alarm ipsum text and I'm going to duplicate it twice as you know paragraphs are block level elements. It means that they take up the full width available on the page in order to see better what I mean. I'm going to assign to those paragraphs background color and I will do it using interval CSSA. So let's open top trucks that select P element and then right back round as great. So you can see that the background color is stretched on the full page. It means that paragraph took up the food available. So the text alignment classes that I want to represent allow us to align text inside Allaman boxes I say default H block level element is aligned to the left side of the page. So you can imagine that elements have the following class name text left. If I say that of course you will see that nothing's happened here. The first paragraph attacks this still aligned to the left side. Now suppose that we want to center text of the second paragraph for that we have to use Cholas text center and see all of the guest in order to align text on the right side. We need to use KLOS text right. OK. Besides those clauses we have another class called Text justified. So at first I'm going to create another paragraph and then insert here kind of text that assigned to this paragraph class as text justify. Before I say it I want you to focus on the right edge of the paragraph you say that the lines of the paragraph do not and symmetrically. So if I say it you will see that content of paragraph is thrashed on the page as I have mentioned. Those classes work with block level elements so in order to prove that I'm going to make them in line. So let's write p elements display in line and now we can see that those alignment classes do not work because at this point the size of width of paragraphs depends on the amount of the text. All right. Let's get rid of these styles. The next text classes that I want to introduce you is text uppercase lowercase and capitalized. So in order to make text uppercase we can use clus text uppercase in the same way we can transform text into lowercase. For that we have to use text lowercase class. And the third one is text capitalized which actually makes the first letters of each word in the paragraph uppercase. All right. Using some bootstrap classes you can manipulate on a weight of the font. For example if you want to make font Baldor you can use font weight. Bold as a default every text content has class name font weight normal. So you see that nothing is changed. And in order to make the text a bit lighter we can use font weight light. And the last class name regarding fonts that I want to show you is fault a Alec which actually makes the text it'll look all right. So that's the main text classes which are commonly used. You can check out those class names in Bootstrap documentation. You need to go to utilities and then text. So here you can find all the text classes OK. Let's go ahead and talk about some color classes that are represented in Bootstrap. You have to check here collar's part. So here we have all the colors. And also we have your background color that offers us bootstrap. Let's go back to code editor. I'm not going to copy the code from documentation because in order to get better practice about bootstrap colors and you write them manually. At first let's remove those paragraphs and then create another one with some constants. And then duplicate it for nine times the first column that I want to introduce you is primary. It's kind of blue color. So we need to use class name text primary actually this color sometimes is used when you want to make the text important the next color class is text secondary. It makes the text great. And generally it's used when you need to make the text as secondary. Then we have text success which actually transforms text color into green. This color actually indicates success. It's used for example when user Locsin successfully or pay successfully and so on the next X calories tax danger. It makes tax right. And actually it represents danger. For example sometimes you may see red buttons which allow you to delete something very important ok. Then we have text warning. It makes color of the text as yellow. And I'm sure you guessed what is the meaning of this color. Also we have text info which transforms taxin to kind of a light blue color. And it may be used for some information content. The next one is text Lite which makes text almost white but it's slightly noticeable on the white background. We have also text dark which actually is default font color. The next one is text muted. It makes text color kind of lighter and the last color class that I want to show you is text white which makes the text absolutely white so you can see it on white background. All right. Those are the colors that are represented using bootstrap classis. Let's go back to documentation. You're able to use those colors with links as well. But there is one thing to note when you hover on the link text then the color becomes a bit darker. So it makes a little hover effect here. This happens with all of the colors but except of text white and text muted colors. OK let's move on and see what happens with background colors. We use exactly the same colors with backgrounds so I'm not going to write them manually because it's very easy to understand and I don't want to bother you. You can simply checkout them here in order to change background color of the elements unit class name B.G. dash and the name of the color. Here you can notice other class names which are used for padding and margin but you can't simply ignore them because Bubel refer to them a bit later. And the one thing that I want to mention regarding background colors is that you can use all the colors for backgrounds but except of muted. OK that's it for this video. So in this lecture we have learned about bootstrap taxin color classes. Let's go ahead.