knowledge hub 129

CSS Basics

Learning about the basics of HTML & CSS

Connecting HTML to CSS

In your website folder, create a new file and name it style.css.

At the top of your HTML document, add the following line:

<link rel="stylesheet" href="style.css">

Now your HTML document will read the css stylesheet and render elements as they are specified in style.css.

rel and href are attributes.

Attributes define the behaviour of elements in html.

As you get further into the guide, you will learn about more attributes in different types of html elements.

Writing in CSS

Inside the css file, you can apply styles to elements that exist on the html page. It's better if you look at an example:

h1{
    color: blue;
}
p{
    color: red;
}

In this example, we have selected all elements with the h1 tag and set their colour to blue. We have also selected all elements with the p tag and set their colour to red.

{}, or curly braces, group properties together. You type them next to the tag to say "I want to make these changes to this type of element."
color is an attribute, which will change the color of the text in this example.
:, or colon, separates the attribute and the property.
blue and red are properties, which correspond to colors.
;, or semicolon, is used at the end of a line.

Different attributes have different kinds of properties- you wouldn't put the same values into font-size (Which takes numerical values) and font-color (Which takes colours).

Isn't it spelled 'colour'?

When writing in CSS, make sure to spell the color keyword without a u. Even though we don't spell it that way in Aotearoa, the machine won't recognize it because CSS primarily uses American English spelling conventions.

Let's move the image to the center of the screen using CSS, and we'll make it a little smaller while we're at it.

img{
    display: block;
    margin: auto;
    width: 20%;
}

display defines the display behaviour of an element. Using block as the value means that this element starts on its own line and occupies the full width of the available space.

margin defines the amount of empty space around the element on the page. auto puts an equal amount of empty space on both sides of the element, so it'll sit in the center.

Pixel values such as 25px, 300px can be used to define the amount of empty space around the element in pixels.

width defines an element's width. Values can be percentages or pixel values. Experiment with different values to see how it affects the image.

Text

Next, we will move the text to the center of the page and change the font size.

Add this property to both h1 and p in your CSS file:

text-align: center;

and this property to both your h1 and p elements, with varying sizes (Your h1 element should be larger than your p element):

font-size: 60px;