#1 What is HTML and CSS?
HTML stands for Hyper Text Markup Language and it's a programming language for developing websites. The simplest way I can describe is that it helps you put together the building blocks of your site. CSS stands for Cascading Style Sheets and it's another kind of language that's concerned with the presentation of your site.
If you're using Blogger and you're adding/editing a post you can easily switch to the HTML tab to see the code. In Wordpress, you'd switch to text. But in both cases, what you're looking at is the HTML. More often than not, you won't have to edit the HTML because there's already an editor for making words bold, italic, bigger, smaller, etc. But there are a couple things that are nice to know like ...
Then you might be thinking, ok I aligned my image to the left but now the text is way too close to it when it wraps. How do I fix that?
The line above adds more space to the right of the image. If you want more space on the left, it would be margin-left. Adding the style="" in the img tag is called an inline style. It's one of the ways you can insert CSS easily into your HTML.
My biggest tip on how to help you use this is this nifty little tool called "inspect". For those of you using Chrome (which I hope is everyone), all you have to do is right click on a website and one of those options will be inspect. Inspect lets you see all the HTML and CSS associated with each element on your site. On my blog, currently all the links are pink. Let's pretend Blogger won't let me change the color so I'll use CSS to make it happen.
First I'll go to my site, right click on a link and choose inspect.
On the right, I can see the CSS (you'll notice the tab at the top says Styles). I can see the pink color associated with a:visited and a:link and I'm sure you can already guess that controls the link color.
I edit the color: attribute in each to be red.
I can see the change on my blog and it's the color I want.
Then I go to the Add CSS portion of the admin, to add the styles I just edited. That means all the links in my posts will be red.
That was the most basic example I could give of this extremely powerful tool. It lets you see changes right away so you can determine if that's really what you want and then you copy and paste the CSS into the Add/Custom CSS box to apply it to your site.
#2 How to make my images a specific size?
If you look at the HTML and try to find the image you added, you'll see something like this:
<img src="mypicture.png" width="200" height="500">
The above is called an img tag. If you want to change the width of your image without messing up how it appears on your site, update width="200" with the size you want and remove height="500". You should end up with something like this:
<img src="mypicture.png" width="350">
Then you might be thinking, ok I aligned my image to the left but now the text is way too close to it when it wraps. How do I fix that?
<img src="mypicture.png" width="350" style="margin-right:10px;">
The line above adds more space to the right of the image. If you want more space on the left, it would be margin-left. Adding the style="" in the img tag is called an inline style. It's one of the ways you can insert CSS easily into your HTML.
#3 How do I use the custom CSS page in my Dashboard?
This part is trickier and there's a lot to learn to truly utilize this page but it's so helpful! It's what I use most of the time, especially since I'm usually trying to overwrite certain things in a Wordpress or Blogger theme.My biggest tip on how to help you use this is this nifty little tool called "inspect". For those of you using Chrome (which I hope is everyone), all you have to do is right click on a website and one of those options will be inspect. Inspect lets you see all the HTML and CSS associated with each element on your site. On my blog, currently all the links are pink. Let's pretend Blogger won't let me change the color so I'll use CSS to make it happen.
First I'll go to my site, right click on a link and choose inspect.
On the right, I can see the CSS (you'll notice the tab at the top says Styles). I can see the pink color associated with a:visited and a:link and I'm sure you can already guess that controls the link color.
I edit the color: attribute in each to be red.
I can see the change on my blog and it's the color I want.
Then I go to the Add CSS portion of the admin, to add the styles I just edited. That means all the links in my posts will be red.
That was the most basic example I could give of this extremely powerful tool. It lets you see changes right away so you can determine if that's really what you want and then you copy and paste the CSS into the Add/Custom CSS box to apply it to your site.
***
Those are all my tips for now!
If you want to know more specifics into HTML and CSS, here are some tutorials: HTML Beginner and CSS Basics.
But if you're anything like me, you probably won't want to read through all of that. So if you want to know more – tweet or email me or comment below and tell me what you'd like to learn about!
This post is great Rachel! I wish I had found something like it when I was first starting out. A lot of what I've learned about HTML/CSS came from trial and error or the core classes I had to take in college and grad school.
ReplyDeleteYay for helpful HTML/CSS tips! I think it would be fun if you made this an entire series ;) (I honestly wouldn't know what I'd do without you helping me out with this stuff!)
ReplyDelete