Intro to CSS
Zenva
ACCESS the FULL COURSE here: https://academy.zenva.com/product/bite-sized-coding-academy/
TRANSCRIPT
Now that you have a basic foundation of HTML, it's time to move on to the next step which is to learn some CSS. As you know, HTML allows you to represent the content on your page. It basically allows you to create all of the content, but it doesn't tell the browser how these things should look, what sort of font should we use, what should be the size of the font, CSS allows you to make your page pretty. We've got this basic page. Let's change the title. We'll call it Hello CSS. There are different ways to add CSS in your page and we're gonna look at them all but just one of them for this lesson. The one we're gonna look at requires you to create style tags. And these style tags need to go above the content that you're going to modify. So if we wanna modify something here, this style tag needs to go above that. Why is that? Because the browser when it reaches the page, it starts from top to bottom. So if it reaches CSS, it knows how it needs to show what comes below. Let's make the title red. To select the byte tag is super easy. All you have to do is write the name of the tag, for example h1, if I wanna select byte tag and I wanna select all the h1 elements in my page. And now I use curly brackets and inside the curly brackets I add my CSS rules. The rule I want to add is color red. If I save the page and refresh, we see now the red text. And because it's a different language, it has a different syntax. The syntax consists of selection and then curly brackets and inside the curly brackets you add the CSS rules. There's always a property and a value, a property and a value, a property colon a value semicolon. And you can add multiple rules in here. We could add also background color. I'll make it blue. And that's looking quite ugly but it's on the direction that we wanna go.
Free Tutorials:
- Unity: https://gamedevacademy.org
- Phaser: https://phasertutorials.com
- Machine Learning: https://pythonmachinelearning.pro
- Web Dev: https://html5hive.org
- Android: https://androidkennel.org
- Swift: https://swiftludus.org
- VR: https://vrgamedevelopment.pro ... https://www.youtube.com/watch?v=Ay3wS3SmHsQ
5457451 Bytes