CSS Guide For Beginners Part 1
CSS FOR BEGINNERS PART 1
Welcome to part one of our CSS Guide For Beginners. This tutorial will aim to introduce you to Cascading Style Sheets, a language used on the web to style web-pages. In conjunction with HTML, CSS will allow you to build professionally designed pages and help make your content stand out. Before starting this guide, it is assumed you have basic understanding of HTML. If you don’t, want not try our HTML For Beginners guide series and have a read up?
What Is CSS?
Without getting too technical, CSS (Cascading Style Sheets) was introduced to help developers with the designing of web-pages. Like HTML, CSS can be written using just a simple program like notepad and can also be included in a HTML document. CSS allows us to control any HTML element on the page, from setting the font-size to the background colour. There are three ways to use CSS on your web-pages. The first way, is to put all your CSS in between two styling tags in the header of your page. Check the example below:
<html> <head> <style type=”text/css”> /* CSS goes here */ </style> </head> <body> My Webpage </body> </html>
This method is okay if you have a small amount of CSS to use- but most websites will need lots of CSS rules and putting it all in the same file as your HTML page will create a rather messy situation. There is a better solution. The second method is to include your CSS using the HTML <link> tag. See the example below:
<html> <head> <link type="text/css" href="style.css" rel="stylesheet"> </head> <body> My Webpage </body> </html>
The above example uses the <link> tag to include an external CSS file called style.css. This will load all your CSS that you put on the style.css file directly onto the page. This is the most practical method of using CSS as you can then include your CSS file across multiple pages using the <link> tag and only have to worry about changing one file when you wish to update your CSS. The third example is called in-line css. You can include CSS directly inside a HTML tag. See the example below:
<html> <head> </head> <body> <p style=”font-size: 18px;”>My Webpage</p> </body> </html>
See the <p> tag? It has a new attribute called style. Inside this attribute we can put any CSS we like and it will be applied directly to our <p> tag (in this case, we make the font size 18px). Now that you know how to include CSS into your web-page, let’s look at how to style elements.
| CSS: Linking Styling Sheets |
| How to include CSS into your website. |
| <link type="text/css" href="style.css" rel="stylesheet"> |
Styling Elements
To style our HTML elements, we need to be able to select which elements we want to style. We can either use the element name, such as body, table, p etc or use two selectors known as ID and Class. They aren’t as scary as they sound. Suppose we have multiple <p> tags in our HTML page:
<p>Hello I’m paragraph 1</p> <p>I like turtles.</p> <p>Oh, really?</p>
To style these elements, we can simply use the p symbol in our CSS code:
p { font-size: 14px; }
Let’s first breakdown this CSS code. The first part of the code is our element p. We then follow it up with two curly braces. Everything inside the curly braces is where we put our styling. The p is our selector and in this case we are selecting every p tag. The code will then apply a font-size of 14px to every p tag. We can use multiple styling elements in our CSS code. For example:
p { font-size: 14px; color: #FFFFFF; }
We are still selecting all the p tags, and applying the font size to 14px, but we are now also setting the font color to #FFFFFF, which is the hex code for white. Setting a style follows this format:
style-attribute : value ;
Notice the colon and semi-colon. The colon always comes after the style attribute name and the semi-colon is used to end the styling. Here are some examples of the style format. The style attribute name is in blue, and the value is in black.
font-size: 11px; color: #000000; background: #FFFFFF; padding: 5px 5px 5px 5px;
Don’t worry too much about what these styles do, rather look at the format and the way the colon and semi-colon is positioned. If you can understand that, you’re practically half-way there.
| CSS: Styling Format |
| The styling format for CSS attributes is as follows: style-attribute: value; |
| font-size: 11px; color: #000000; background: #FFFFFF; padding: 5px 5px 5px 5px; |
CSS Selectors
If we go back to our example of multiple p tags:
<p>Hello I’m paragraph 1</p> <p>I like turtles.</p> <p>Oh, really?</p>
Suppose we only want to change the middle p tag? How would we do this? We can’t just use the p element anymore, as any styling we apply to that will also be applied to the others. So what we can do, is give our <p> tag the id attribute. For example:
<p>Hello I’m paragraph 1</p> <p id=”myid”>I like turtles.</p> <p>Oh, really?</p>
Now we can style the middle element by selecting it using the id. To select an ID, we use the # hash-symbol followed by the ID name. So in this case:
#myid { font-size: 14px; }
Now only the middle p tag will be selected. An element can only have one ID and it must be unique. You can give the other P tags IDs too and we can then style them individually.
| CSS: ID selectors |
| Select an idividual element by giving it an ID attribute. Proceed by adding a # before the ID name. |
| #mycontent { font-size: 18px; font-weight: bold; } |
Let’s say that we want to style the first two P tags and set their font color to white. We could give them both unique IDs and style them this way:
<p id=”myid2”>Hello I’m paragraph 1</p> <p id=”myid”>I like turtles.</p> <p>Oh, really?</p>
#myid { color: #FFFFFF; }
#myid2 { color: #FFFFFF; }
This works fine. However, a better way would be to use the class attribute. A class is different from an ID in that a tag can have multiple classes applied to it and they don’t have to be unique to that tag. For example if we give our P tags the class of myclass:
<p class=”myclass”>Hello I’m paragraph 1</p> <p class=”myclass”>I like turtles.</p> <p>Oh, really?</p>
We can now style both the top 2 tags using the class selector. To style a class, you need to use the . followed by the class name. So, in our example:
.myclass { color: #FFFFFF; }
We’ve now applied our styling to both p elements. Classes and IDs are pretty easy to understand, just remembering their syntax can be a little tricky. You should only use IDs when you want to identify unique elements, and you should use classes when you want to apply the same style to multiple elements. You can also put multiple selectors in one CSS line. For example, consider using two different IDs with the same styling:
#myid1, #myid2 { color: #FFFFFF; }
Here both IDs have their font color set to #FFFFFF (white). Again, it might be better to use a class in this example if both your IDs are going to use the same styling.
| CSS: Class selectors |
| Add the class attribute to your tags to style multiple tags. For each class prepend a dot (.) |
| .theClass { color: red; }.anotherClass { color: black; } |
End Of Part 1
We hope you found the first part of our CSS For Beginners Series useful! Next time we will be looking at lots of different styling attributes that you can use on your tags. For now, try and learn the basics of using IDs and Classes, as well as take a closer look at the syntax of CSS.
Leave A Comment