Easy CSS Tips For HTML Templates

Easy CSS Tips For HTML Templates

Jul 28, 2016, 12:40:15 AM Tech and Science

If you’ve never visited this site before you might think it looks okay, just alright. You might think that there’s something lacking in design, or functionality but trust me I have been working on some of these issues. This is primarily a blog, but you can find other things on it as well, I’ve always been eclectic. Say what you must about the aim of the site and the design, the troubles I’m having with the coding are not the usual website design problems. This site is hosted by WordPress.com and they’re great if you want a free place to blog and a good content management system. But this is much different than hosting your own site and using WordPress.org CMS, but the management systems are basically the same so there is no complaint here.


Having trouble with templates?

Most hosting companies have a site builder or templates that you can use for your site when you buy a URL. Not exactly being an expert in HTML I decided to use a template. I just wanted to blog right? What I didn’t know is that there is no option for coding in HTML on WordPress.com sites aside from a simple text box you can place, which I have utilized. You may, however, style your site with a cascading style sheet (CSS). This a simple form of code that is easy even for beginners, but not having the option to use HTML limits you in a lot of ways. Believe it or not, you could basically code an entire site in CSS, but most people use a variety of languages to accomplish this goal. Although I already knew some code I’m learning more as I go, and the last time I designed a website was about a decade ago and things have changed. Coding has gotten easier, not harder as time went by. There are some simple things to know about CSS, and while trying to avoid writing some nonsensical pseudo-code I’ll explain them.


Simple rules to follow

CSS is for styling your fonts, menus, setting colors, backgrounds, and anything you can think of when you hear the word “style”. The code follows some basic principals, you use a selector that targets a certain element of the page, then in these {  } you put your attribute that sets the style for that element. Say for example you wanted to make a red font. you would simply target a <p> (paragraph), <H1> (a header in this case the first and largest), or any other text contained in an HTML tag. The code would look something like this:

<H1> {  font-family: “Times New Roman”;

font-size: 12 pt;

font-color: red;


So there you have a Times New Roman font style in 12 pt font of a red color. The list goes on with attributes, the code only gets more diverse with time but it also gets easier to use. If you have more than one way to do something it’s easier to remember at least one way. I’ll only give you one more example because this CMS is not a code editor. Say you wanted to make a box, put some text in it, and maybe add a simple border. There are many options for each of these attributes but how do you select the element? Certain selectors use certain attributes. If you wanted to style an HTML <class=”arbitrary-name”> you just use a period in front of what’s in the quotations and then add your style in those squiggly little brackets. Since the tag may be a <div> tag you could even elaborate on it and do this:


div.arbitrary-name {  background-color: blue;

width: 100px;

length: 200px;

border-style: solid;

border-color: black;

border-width: 2px;

content: “Your text here”;


And there I’ve made a blue rectangle with a solid black border and some text in it. You would still have to style the font as before but you get the point. Only this won’t work sometimes. Remember for a template you didn’t write the original code, and I could only use CSS, so things become tricky. It is truly a cascading assortment of code because that’s all there is CSS. You have to do something sometimes that gets annoying, and that most commenters on the web design pages I visited vilified and ridiculed.


designing with CSS in WordPress

Ladies are programmers too!


One code to rule them

There’s a simple piece of code that makes the bit of CSS you’re doing have the emphasis you want to override the template’s CSS style sheets that you don’t like. Have you guessed it already? It’s !important; but there’s a certain syntax to it. when adding an attribute that you want to stand out above all other preceding code you enter it after the attribute but before the closing semi-colon, like such .arbitrary-class { font-family: “Comic Sans” !important; }. this is how you would make the font Comic Sans even if you first attempt wasn’t working for some reason, usually because of an existing style sheet in place. You can eliminate ALL the CSS if you want and start from scratch, but I wanted to write this article and not still be designing sans HTML. But still no complaints here about WordPress. The add-ons they do have are helpful with SEO and other analytics and the social media connectivity is of a higher caliber. However soon, I will be hosting my own site and hopefully with this same CMS because we as writers swear by the ease of use and the functionality that of the host so that we can focus on the content and not technical aspects. I for one, enjoy the designing occasionally, and if you’re planning to build a site you’ll need the style this high-level language provides, and yes it’s a high-level visually based language. My short tutorial on the subject didn’t even graze the surface of the styles it offers. Leave a comment if you want more CSS!


Originally posted on the author's blog BlakeGardnerWriting

Published by Blake Gardner

Reply heres...

Login / Sign up for adding comments.