How To

TUTORIAL: CSS For Absolute Beginners

19 Jul , 2016  

Want to know how to make a web page look good?

This is where you find out.

Previously, we covered HTML for beginners pretty thoroughly and learned that HTML is used to provide meaning and structure to a web page.

That’s great, but the web page we produced looks like it was made in 1995, and it’s time we fixed that.

So today in our CSS for beginners tutorial we’re going learn how to use CSS to change the appearance of a web page.

Let’s get started!

The Absolute Beginners Guide to CSS

Who is this CSS Guide is for?

As with our mega HTML guide for beginners, we’ll start from the very beginning and take nothing for granted. So I’m assuming you have zero, or next to zero knowledge of CSS.

I do assume you know a little about HTML – if you don’t, once you’ve checked out our HTML guide you’ll be more than ready to get started on CSS.

CSS in one article? You’re crazy!

Yeah, that’s a big call, right?

CSS is big, I mean really big. I count something like 180 different properties we can use in CSS.

But you’ll only need a tiny fraction of those most of the time.

So we’ll be concentrating on the small part of CSS that’ll give you the most bang for your web buck.

What we’ll cover in this article

Having said that, I’d better be pretty clear about you’re going to get if you read this article, and if it’s the right one for you.

We’ll cover:

  • How to apply CSS to a web page
  • How CSS selectors work
  • The CSS we can use to change the appearance of text, change foreground and background colors, and;
  • How we can use CSS for a simple page layout

I know there’s some jargon in that list you might not be familiar with yet, but you will be by the end of the article!

What we won’t cover

Now that I’ve given you an idea about what we will cover, what won’t we cover?

Well, everything else, really.

That’s not super helpful, I know, but like I said, CSS is really big.

But if you came here looking for information on CSS3 animations, text-effects or information on flex-box, I’m afraid you’re in the wrong place.

But never fear! We’ll be adding those to our tutorial series in the future.

What you’ll be able to do by the end of this article

So, if you put in the effort to work though this article and do the exercises you’ll be able to:

  • Change the font, size, style and colour of text in a web page.
  • Change the background colour in a web page.
  • Control the fundamental layout of a web page
  • Accurately and selectively apply CSS styles to distinct parts of a web page.

In short – turn a drab piece of HTML into a nicely-styled web page.

Click here for your free HTML, CSS and JavaScript E-book

So, what is CSS anyway?

I’ve been talking about CSS all this time without being very specific about what it is, and it’s time to fix that.

There are three main technologies used to make web pages – HTML, CSS and Javascript.

As I mentioned in the introduction, HTML is for defining the meaning and structure a web page’s different parts. This is referred to as a web page’s semantics.

JavaScript adds interactivity to a web page – you do something, and the JavaScript does something back!

And finally CSS is used to change the appearance of a web page. We can use CSS to selectively apply rules to how a browser should render different parts of a web page.

As I’ve said elsewhere, it’ll be tremendously helpful for you to consider things from the browser’s perspective.

You’ll see that similar to HTML, CSS is a system of encoding that serves both humans and computer programs.

You should always try to consider how a browser will interpret your CSS – it’ll really help you write better CSS!

Now I’ve typed ‘CSS’ a bunch of times already, but haven’t said what it actually stands for – we’ll it’s Cascading Style Sheets.

Helpful, right? Now you can see why I took so long to get around to spelling it out – because it doesn’t really tell us very much.

But let’s take a closer look.

What are style sheets? Once upon a time they were a list of rules that typographers used to ensure a consistent look and feel for newspapers, magazines and other printed matter.

One typographer or designer could hand a style sheet to someone else, and they’d produce work that’d fit right in with the rest of the publication.

So the modern cascading style sheets for HTML are used to apply styles consistently on a web page. You give the style sheet to the web browser, and then the browser knows how the page should look.

We’ll get to the ‘cascading’ bit later in this article.

Key takeaways:

  • CSS stands for ‘Cascading Style Sheets’
  • Style sheets are used to define a consistent look and feel.
  • CSS is used to define the ‘look’ of a web page.

How does CSS work?

There are two important parts of CSS:

  • What we want to style, and
  • How we want to style it.

When put these two together, they comprise a CSS style rule. A browser will apply CSS rules to change the appearance of a web page.

These are the components of a CSS rule:

  selector {
    property: value;
  }

And an actual CSS rule may look like this:

  p {
    font-size: 14pt;
  }

Let’s take a look at CSS selectors, properties, and values.

CSS Selectors

I said previously CSS has two parts: what to style, and how to style it.

CSS selectors are the what part of the equation.

Above, I described a CSS rule like this:

  selector {
    property: value;
  }

The selector is used to identify part of an HTML web page, and there are three ways to do that.

The first and simplest, is to name an HTML tag:

  p {
   property: value;
  }

You remember the <p> for paragraph tag, right? The CSS rule above would apply to all <p> tags in the web page. If we wanted to apply it to all <div> tags, we’d have written this instead:

  div {
   property: value;
  }

But what if we didn’t want our style to apply to all <p> tags, just some of them?

Then we’d use our second type of CSS selector: a ‘class’. A class is an attribute that can be applied to any HTML element. We’d use it like this:

  <p class=“diary-date”>..</p>

Our CSS could then look like this:

  .diary-date {
    font-style: italic;
  }

Note the ‘.’ at the beginning of ‘diary-date’. We use that so the browser knows we’re talking about a class, and not some weird HTML tag called ‘diary-date’ that the browser’s never heard of!

Now, any <p> tag with a class of ‘diary-date’ will have the style ‘font-style: italic;’ applied to it. I’m sure you can guess what that does!

Our last kind of selector is for ‘id’ type selectors. This is another attribute we can apply to any HTML tag:

  <div id=“main-content”>…</div>

But how is ‘id’ different to ‘class’?

While we can use a class in a web page as much as we like (e.g. we could have lots of ‘diary-date’ tags on a page), an ‘id’ should appear only once on a web page.

A CSS rule for our ‘main-content’ div might look like this:

  #main-content {
    background-color: FloralWhite;
  }

This time we used a ‘#’ in front of our selector. That tells the browser it should look for an HTML tag with an id of ‘main-content’, and make its background color ‘FloralWhite’ (Oh yes, ‘FloralWhite’ is a color! See here for a full list of pre-defined colors we can use in CSS).

Key takeaways

  • CSS is comprised of Selectors, Properties and Values
  • CSS Selectors can identify a tag in a web page by: tag type, a tag’s class, or a tag’s id.

Ok, so it’s time for us to get our hands dirty and start writing some HTML and CSS . We’ll do that in the next section.

CSS Properties and Values

Before we go any further, we have a little exercise:

Open a plain text file (see here for some help with that) and save the following as diary.html

<!DOCTYPE html>
<html>
  <head>
    <title>Dear Diary</title>
  </head>
  <body>
    <h1>Dear Diary</h1>
    <p>September 1st</p>
    <p>Oh diary, you won't believe what happened to me today...</p>
</body>
</html>

So how does this look at the moment? Try opening it in your browser, it’s pretty plain:

HTML with no CSS styling

So let’s explore CSS style properties and values with some examples.

First, add this inside the <head> tags, after the <title> tag (the style tags tell the browser to get ready for some CSS rules):

<style type="text/css">
h1 {
  font-size: 48pt;
}
</style>

Not too sure about the characters ; : { and }?

Fans of punctuation will know ; and : but the rest of us can find them here You’ll need the shift key for the colon:

colon-semi-colon

The ‘curly braces’ { and } are rarely used outside math and programming. We can find them here, and you’ll need to hold down the shift key while you type them:

Curly braces on a keyboard. Pfwar!

Now, once you’ve typed in the style re-display the page in your browser.

CSS large h1

Ok, so that’s not much more exciting, but we’ll use it to explore CSS properties and values.

Let’s take another look at our CSS style rule:

h1 {
  font-size: 48pt;
}

So we already know that the selector ‘h1’ means that the rule will be applied to (“selects”) all <h1> tags in the document.

Our curly braces – { and } – group together all the CSS properties and values that will be applied to the selector (h1 in this case).

What about the property and value? Let’s take another look at how we formulate a style:

  property: value;

‘Property’ is the name of an attribute that affects how things look on a web page, the font size in this case.

‘Value’ changes the property to do what we want it to!

Our style looks like this:

  font-size: 48pt;

So we want to the font size to be ‘48pt’. I’ll explain the ‘pt’ in a moment, but first note the use of ‘:’ and ‘;’.

We use the colon ‘:’ character to end the name of the CSS property – that tells the browser that the name of the property has finished, and the browser can check if it knows that property or not.

The semi-colon character (;) is used to tell the browser that we’ve finished the value part of the CSS style. That means the browser can get on with applying the value to the property.

Key takeaways:

  • Style properties for a selector are grouped together with { and }
  • Property names end with a colon, ‘:’
  • Property values end with a semi-colon, ‘;’

I think it’s time to dig into the nitty-gritty of some CSS style properties, and we’ll begin with our font-size property.

CSS font-size

As you saw earlier, we set the font size of our <h1> tag to 48pt:

font-size: 48pt;

What’s a ‘pt’?

Once upon a time, your word processor (like Microsoft Word) would have given you a list of font sizes with ‘pt’ next to them. They don’t any more, they just look like this:Word Font Sizes (in pt)

The pt stands for ‘point’, and is a way of measuring the size of text. Many of the conventions used in CSS hark back to the days when type was set with moveable type, like this:

Garamond sort (moveable type)

By Daniel Ullrich, CC BY-SA 3.0

These chunks of metal were measured in ‘points’. A font can also be measured by ‘em’ (the width of a capital ‘M’) or pixels (see an explanation here).

Sound confusing? Don’t worry, stick with ‘pt’ for now since it corresponds nicely to word processors.

We’ll explore the benefits of other measurements, particularly ‘ems’ in future articles.

Key takeaways:

  • The font-size property is used to set a font’s size (surprise!)
  • There are many ways to measure a font’s size: point, ems, pixels.
  • Pick one and stick to it; I recommend point (pt) to start with.

CSS font-family

So now that we can change the size of a font, how about changing the actual font itself? That’s where font-family comes in, and we’ll use it like this:

h1 {
  font-size: 48pt;
  font-family: ‘Myriad Pro’, Helvetica, Arial, sans-serif;
}

Update your h1 CSS rule in diary.html to include the font-family as above, and reload it in your browser. You should get something like this:

CSS font size family

This property looks quite different to our first example, so let’s take a closer look:

font-family: ‘Myriad Pro’, Helvetica, Arial, sans-serif;

As name of this property, ‘font-family’ might hint, this property takes a series of values, separated by commas (,). Why is that?

You may know some of these fonts (Helvetica, Arial etc) from your word processor:

Word fonts inc Arial

But why do we provide a list? That’s because not all computers have the fonts we want on them. Your computer for example, may not have the ‘Myriad Pro’ font.

If it doesn’t, the browser will go to the next font in the list ‘Helvetica’, and see if it has that. It’ll continue going through your font-family list until it finds one it recognises, or it gets to a default like ‘serif’, or ‘sans-serif’.

‘serif’ is your computer’s default font with ‘serifs’ (highlighted in red):

Garamon Serif I

‘Sans-serif’ (literally ‘without-serif’) is your computer’s default font without serifs:

Arail Serif I

This business of serif and sans-serif fonts is another pointer to CSS’s typographic origins.

So when we set our font-family value, we’re giving the browser a list of our preferred fonts, from most preferred through to least preferred.

Finally, why does Myriad Pro have single-quotes around it?

font-family: ‘Myriad Pro’, Helvetica, Arial, sans-serif;

That’s because the font name has two words, ‘Myriad’ and ‘Pro’. We put quotes around the whole thing – ‘Myriad Pro’ – so that the browser doesn’t think we want a font called ‘Myriad’. The browser really needs our help at times!

This goes for any font name, or any other value that’s more than one word: we’ll need to surround it in quotes for the browser to recognise it properly. Single quotes are best.

Wondering what fonts you can use, and what their names are? There’s a list of web-safe fonts right here.

Key Takeaways:

  • The font-family property changes the type of font the browser will use.
  • We give the font-family a list of fonts, in order of our preference.
  • The list of fonts should end with either ‘serif’ or ‘sans-serif’, which are default fonts used by the browser.
  • Fonts with more than one word in their name, e.g. ‘Myriad Pro’ or ‘Times New Roman’ should be surrounded by single quotes.

Now that we’ve looked at changing font size and type, let’s see what else we can do with our fonts.

CSS font-style

The font-style property is reassuringly simple after all that font-family business.

It only has three possible values: normal, italic, and oblique.

And there’s often no difference between italic and oblique! Some fonts have an oblique version thats a little darker and heavier than the italic version, but plenty don’t.

Let’s try it out. After the h1 rule in diary.html, make a new CSS rule, starting on a new line:

.diary-date {
  font-style: italic;
}

Note the ‘.’ Preceding the selector. As as I mentioned earlier, this means we’re looking for a class called ‘diary-date’.

So let’s add one! Update the first <p> tag in diary.html to appear as follows:

<p class=“diary-date”>September 1st</p>

Reload diary.html in your browser. You should see something like:

CSS font size family style

You may be thinking at this point – why do we need this rule to make some text italic (because that’s what our new rule does!). We have the <em> tag for that.

Well, there’s a couple reasons. Firstly, the browser is free to interpret the <em> tag as it wishes, and by convention they’ll use italics for emphasis. But there’s no guarantee they always will.

Second, if we used the <em> tag to surround all our dates, like so:

<p><em>September 1st</em></p>

What if we changed our mind? If we had 20 dates on the page, we’d have 20 changes to make.

But – if all our date paragraphs have a “diary-date” class, we can change them all at once by editing the rule for diary-date. Ok, that’s pretty cool!

Click here for your free HTML, CSS and JavaScript E-book

CSS Margin (Introducing the Box Model)

We’ve been talking about CSS styles so far as if we’re just applying them to lumps of text. But that’s not what we’re doing!

CSS considers all HTML elements to be rectangular boxes.

(An element is part of an HTML web page represented by an HTML tag. I’ll be referring to elements a lot from now on. Don’t worry, remember they’re just tags like <p>, <h1> and <div> that have graduated from text file to a browser web page).

So CSS sees everything on a web page as a box. And all of these boxes have three properties: padding, border and margin:

CSS Box Model

These are the properties we can use to separate one thing on an HTML page from the other, either with a line (the border), or with blank (aka ‘white’) space represented by the padding and margin.

In an effort to be helpful, most browsers have default values for these, to stop things bunching up against each other.

For example, if we remove all the borders, padding etc from our sample diary.html, it’d look like this:

CSS No Margins

It’s readable, but not very nice.

Let’s use the margin property to our advantage. Here’s our box model again, this time with some values in there for padding, border and margin:

CSS Box Model Pixel Values

So while it’s most intuitive to use numbers with margins, we can let the browser help us instead, and put our content in the middle of the page.

First, please wrap up everything in diary.html inside a brand new <div>, like this:

<div>
  <h1>Dear Diary</h1>
  <p class=“diary-date”>September 1st</p>
  <p>Oh diary, you won't believe what happened to me today...</p>
</div>

So now we’ve put everything we had so far into a brand new box. And let’s give that box an id:

<div id=“main-content”>
  <h1>Dear Diary</h1>
  <p class=“diary-date”>September 1st</p>
  <p>Oh diary, you won't believe what happened to me today...</p>
</div>

You can re-display that in your browser if you like, but it won’t look any different – that new <div> is just an invisible box right now.

But let’s add a new CSS rule. Put it under the .diary-date rule in your <style> section:

#main-content {
  margin-left: auto;
  margin-right: auto;
  width: 600px;
}

Left? Right? Auto? What?

Let’s look at left & right first. Since it’s a box we’re dealing with, it has four sides: top, right, bottom and left. If we’d just used

margin: auto

Then our new rule would automatically apply to all four sides, but we just want it to be applied to left and right. There are further ‘shorthand’ techniques we can use, but we won’t bother with them yet.

And auto? Auto means: “Hey browser, please just set the margin to the available remaining space.”

When we give our rule a width (600px) and left and right margins set to auto, our content jumps into the middle of the page:

CSS Margin Auto with Width

So the browser says to itself (as it were), “Ok, I’ve got this 600 pixel-wide div here, and I need to make the left and right margins equal to the remaining space. Hmm, my screen’s 1200 pixels wide, that means I should put 300 pixels space on the left, and 300 pixels space on the right. Done!”

So with equal amounts of space on the left and right, our content moves to the middle.

Let’s talk about these Cascading Style Sheets

So I said I’d get to the cascading bit later, and here we are.

Once again, let’s demonstrate this with an example. Please add a new rule to you CSS styles in diary.html, this time at the top, just above your h1 rule:

body {
  font-family: Georgia, Palatino, serif;
  font-size: 18pt;
}

So we’re applying a rule to the <body> tag! The <body> tag encloses everything in our document. Hmmm.

We’re familiar with font-size already, and font-family too, except this time we’re using Serif style fonts.

Let’s see what effect that has:

CSS body font-face-size cascading

So what happened there? We changed the font styles in the <body> tag, and it affected everything except the <h1> tag.

This is because we can look at a web page like a hierarchy. Changes we make to the top of the hierarchy cascade down to the bottom of the hierarchy. Let’s take a look at that:

CSS HTML Hierarchy

Ok, since <html> contains everything else, it’s at the top. Then on the left is our <head>, and right is the <body>, which we’ve assigned a new style to.

Then comes our “main-content” <div>, which then contains all our other elements.

So the change to the font styles <body> flowed down to nearly everything else.

Why did <h1> miss out? Because it has it’s own font styles. And this is how CSS works.

It’ll apply styling rules generally until it encounters a more specific rule, and then that more specific rule will be applied.

But wait! We have a specific rule for our ‘diary-date’, why did its font change too?

Because the ‘diary-date’ rule only affects the font-style, not the font-family or font-size. Because the h1 rule addresses font-family and font-size specifically, the change at the body level doesn’t affect it.

So this is great, right?

If we want to change the font in the entire document, we only need to change it in one place. And if there are some parts of the document we want to always have a different font, we can give them a more specific rule.

This is one of the reasons the whole web industry went crazy about CSS.

I’ve only talked about a ‘web page’ so far.

CSS really comes into its own for web sites that may have hundreds of pages. If we store our CSS separately to our web pages (we’ll do this later in this article) we can make one change in our CSS and change the style of the entire site at once. That’s powerful stuff.

Ok! Back to our CSS properties.

CSS text-align

We can use text-align to choose whether our text lines up on the left, right or centre of our document.

Valid values for text align are left, right and center. Note the spelling of ‘center’ with the ‘er’ at the end, not ‘re’.

I don’t know about you, but when I make a journal entry, I put my dates on the right-hand side. So let’s update the rule for our diary-date class as follows:

.diary-date {
  font-style: italic;
  text-align: right;
}

And reload the page in your browser:

CSS font align right

And you can see the affect that’s had on our date.

CSS background-color

So enough with the text and fonts already.

One of the things we frequently want to do with a web page is change its colour. Here, we’ll talk about changing the background colour, which is the colour behind the text.

So, to call attention to our diary entry I think we’ll change the background colour of our diary entry a little.

We’ll use the background-color property to do this. Once again, note the spelling here: that’s color. CSS would not win an international spelling bee 🙂

So update the main-content CSS rule as follows:

#main-content{
  margin-left: auto;
  margin-right: auto;
  width: 600px;
  background-color: FloralWhite;
}

Which looks like this:

CSS Background Color

Well, that OK, but there’s a couple things to fix.  That background finishes right at the edge of the text, which doesn’t look very nice.

Also, I don’t think the white page looks very good against our ‘FloralWhite’ page colour.

We’ll fix those now.

Click here for your free HTML, CSS and JavaScript E-book

Back to the Box Model: CSS borders and padding

I’m sure you remember this:

CSS Box Model

This time we’ll adjust the padding:

#main-content{
  margin-left: auto;
  margin-right: auto;
  width: 600px;
  background-color: FloralWhite;
  padding: 20px;
}

We’ve added 20 pixels of padding to all sides of our box. We could have set padding-top, padding-right etc, but padding can be set on all four sides at once with just ‘padding’:

CSS padding background color

Well that’s nicer. But I do want it to stand out some more. How about a border?

#main-content{
  margin-left: auto;
  margin-right: auto;
  width: 600px;
  background-color: FloralWhite;
  padding: 20px;
  border-style: dashed;
  border-width: 4px;
  border-color: BlanchedAlmond;
}

Note that we’ve added border-style, border-width and border-color at the end there. There’s a lot of border properties, but these are the most useful for now.

It comes out like this:

CSS Border

The border-color is as its name suggests – it sets the colour of the border. The border-width is the thickness of the border. I’ve set it to 4 pixels here.

Border-style is a bit different. You can see we’ve gone for a dashed border. Other options include solid, dotted, double, inset, groove and even hidden (when we want the border to be invisible, but take up space).

CSS color

Finally, color.

When CSS says ‘color’ on its own like that, it really means text color. Fortunately the same array of colors is available to us for text color as it is for background and border colors. So let’s add some color first to our text:

body {
  font-family: Georgia, Palatino, serif;
  font-size: 18pt;
  height: 100%;
  color: darkred;
}

And then something different for our header:

h1 {
  font-size: 48pt;
  font-family: 'Myriad Pro', Helvetica, Arial, sans-serif;
  color: orange;
}

Let’s see how that looks:

CSS Color

Get the CSS out of the HTML

I mentioned earlier in the article that one of the benefits of CSS is that we can control a whole web site with one CSS rule.

To do that, the CSS needs to be store outside of the HTML file.

We’ll do that now.

First, open a new text (and only text) file in your text editor. Copy everything between the <style> tags in diary.html into your new file. This is how it should look, in its entirety:

body {
  font-family: Georgia, Palatino, serif;
  font-size: 18pt;
  height: 100%;
  color: darkred;
}

h1 {
  font-size: 48pt;
  font-family: 'Myriad Pro', Helvetica, Arial, sans-serif;
  color: orange;
}

.diary-date {
  font-style: italic;
  text-align: right;
}

#main-content{
  margin-left: auto;
  margin-right: auto;
  width: 600px;
  background-color: FloralWhite;
  padding: 20px;
  border-style: dashed;
  border-width: 4px;
  border-color: BlanchedAlmond;
}

Save the new file as diary.css

Now, in diary.html replace your <style> tags and everything between them with this:

<link rel="stylesheet" type="text/css" href="diary.css">

So diary.html looks like this now:

<!DOCTYPE html>
<html>
<head>
 <title>Dear Diary</title>
 <link rel="stylesheet" type="text/css" href="diary.css">
</head>
<body>
 <div id="main-content">
  <h1>Dear Diary</h1>
  <p class="diary-date">September 1st</p>
  <p>Oh diary, you won't believe what happened to me today...</p>
 </div>
</body>
</html>

Ok, so what does our <link> tag tell the browser?

First, there’s a link we want it to follow, and that it’s going to be a stylesheet (rel=“stylesheet”). That stylesheet will contain CSS text (type=“text/css”), and that the HyperText reference is “diary.css” (href=“diary.css”), which is where to find the CSS file.

Really, because the <link> tag uses an href, our CSS file could be anywhere on the Internet, but we’re going to keep ours right next to our diary.html file 🙂

And if our website had lots of pages, they could all include that same <link> tag, and be controlled by one CSS file.

What have we achieved with our CSS?

Well, we’ve gone from this:

HTML with no CSS styling

To this:

CSS Color

While hardly a triumph of typographic design, it definitely improves upon the original.

On your CSS journey you’ve covered a lot for a beginner. You’ve learnt so far:

  • What CSS is, and what its purpose is, and where it comes from.
  • The benefits of using CSS.
  • The CSS box model.
  • How styles cascade in CSS.
  • How to control font styles, types, size and text alignment.
  • How to lay out a page using CSS and a <div>
  • How to change the colors on a page with CSS.
  • How to use elements, classes and divs to select what your CSS rules affect on a web page.
  • And how – like a pro – to store your CSS in a separate location so you can use it across an entire website.

But there’s so much more! To CSS. Like HTML, CSS has adapted and evolved through the years to meet more complex needs. The web keeps changing, and CSS changes with it.

Summary

Like I said, we’ve covered an awful lot so far.

If you came into this article know nothing about CSS, you’ve grown your knowledge so much since in such a short time. You deserve a rest!

If you’ve been over the HTML for Absolute Beginners article and this CSS for Absolute Beginners, then I’d be interested to hear your reactions to CSS vs HTML.

For me, being the pet project of one person initially, I think HTML feels a lot more coherent than CSS, which has been developed by committee since day one!

Anyway, I’ll be exploring CSS and HTML much further in the future, but in the meantime, download a CSS cheatsheet from this article you use can use as a reference and start practising your CSS right away!

Click here for your free HTML, CSS and JavaScript E-book

By


1 Response

  1. mahmoud zaki says:

    Really more than very excellent, simple explanation and orderly, thank you very much

Leave a Reply

Your email address will not be published. Required fields are marked *