Tag Archives: css

How to Use CSS to Stylize Headings in Your WordPress Content

So the extra-large font on the post titles and teeny-tiny text on the headings of Twenty Eleven are not doing it for you? This tutorial will show you how to spice up any theme headings using CSS and discuss the pros and cons of doing so.

Styling Headings with the WordPress Customizer or Appearance Settings

Maybe just changing the font and colors will be enough for you to style the headings.

Experiment with the WordPress Customizer settings in Appearance > Customize. It’s all automatic, so there is no need to know how to code CSS.

Pros: You can customize the appearance of your theme to your exact specifications, though the specifications maybe limited or constrained.

Cons: If you switch themes the fonts will carry over, but the CSS will not. You will also lose your customization if you upgrade your current theme for security reasons. Take a look at the Frequently Asked Questions about Customizer for all the other restrictions. Continue reading How to Use CSS to Stylize Headings in Your WordPress Content

Advertisements

WordPress Words: DIV

A “DIV” is an HTML element that divides sections of your WordPress site.

Example: A user can customize their site by adding DIV tags around their content sections in the text editor. Then they can add custom CSS to their DIV’s by going to the Theme Editor in
Appearance–>Editor–>style.css and adding a new line in the file.

.main-grid-content {display:inline-block;background-color:#FFF;}

About the Word

The DIV tag in HTML is used widely on most websites today. By default, a DIV is a block level element, which means it will take up all of the horizontal space  in its current container. In WordPress DIV’s are used to create new sections of content within your site, that may be linked to current classes or new ones.

New sections can help you separate portions of your site to add embedded maps, special offers, promotions, contact information, images and other content.

For More Information

Web Accessibility: Text Justification

According to the Business Dictionary Text Justification is defined as

” A paragraph or block of text in which all words in all lines are spaced-out such that the first word aligns with the left margin and last word with the right margin.”

Providing text that is legible and easy to read is import for Web Accessibility. Some users may have difficulty reading text that is not aligned properly. Aligning text to both the left and the right of a paragraph can cause what is known as rivers in a page, these are noticeable spaces between words, you may have noticed this in some newspapers or a magazine article that you have read recently.Justifying your words to the left hand side of a column is usually the first step in avoiding this issue. Continue reading Web Accessibility: Text Justification

WordPress Words: Theme

A Theme is a collection of files that work together to produce a graphical front-end interface with an underlying unifying design for a site. A WordPress Theme modifies the way the site is displayed and designed, without modifying the underlying core programming of WordPress. While some associate a WordPress Theme with “skinning” your site with a design, a WordPress Theme contains programming code that influences the design, changing it with each generated page view based upon the programming with PHP, WordPress template tags, WordPress conditional tags, and CSS.
WordPress Theme in WordPress Codex Glossary

Continue reading WordPress Words: Theme

WordPress Words: HTML

HTML, or Hypertext Markup Language, is a markup language used to describe the semantic content of web pages. It is usually used with CSS and/or JavaScript. WordPress renders web pages to conform to the HTML5 standard. The standard is set by the World Wide Web Consortium.
W3C.org

The term HTML stands for Hypertext Markup Language. This is the language that the browser understands in order to bring you the contents of you web page. According to the article “HTML- HyperText Markup Language” on Webopedia, “HTML defines the structure and layout of a Web document by using a variety of tags and attributes.”

HTML consists of tags that hold the design and structural elements of a web page such as the header, headings, lists, images, and content in general. CSS (Cascading Style Sheets) hold the instructions to design the HTML architecture of a site, influencing colors, positioning, size, and design elements.

HTML in WordPress

HTML is the underlying architecture of a web page. In WordPress, HTML is found in WordPress Themes, holding the PHP and WordPress code to generate and display the web page.

HTML is generated when creating a post or Page in WordPress. The user has two choices when creating content in WordPress, using the Visual Editor that hides the HTML tags, or using the Text Editor that displays the HTML tags.

In the post or Page Edit Screen, there are two tabs above the content and toolbar area to the right labeled Visual and Text. The Visual Editor is where you can type in what it is you would like to say, and then WordPress does all the code for you automatically. The Text tab is the “behind the scenes” of what you’ve written in the visual editor. This will show you where all the tags that are surrounding your tags and giving them certain attributes.

Visual display of where the Text editor and Visual editor are located within WordPress

Screen shot of how the entities show up in the Text editorAdding Some Style

HTML allows you to build a base structure of how you want your page to look. You can think of HTML as the bones of your website. However, without Cascading Style Sheets (CSS) you’re websites appeal may fall flat.  wrote an article for ClarkWP about what CSS is, and what it can do to give your site the extra push it deserves.

More information on HTML

Related Articles:

WordPress Words: CSS

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.
World Wide Web Consortium (W3)

Example: “The CSS in this part of the code is not coded correctly. Are you sure that the color of that Page is correct in the CSS?”

According to the W3C (or World Wide Web Consortium), Cascading Style Sheets, or CSS, is a mechanism used in web development to style certain elements of a website. CSS originally applies to web coding alongside other languages, such as Hypertext Markup Language (HTML) and JavaScript/jQuery/jQuery Mobile. Currently the latest version of CSS, CSS3, is being used for many websites today.

What is the history behind CSS development? In Chapter 20 of Cascading Style Sheets, designing for the Web by Håkon Wium Lie and Bert Bos, both Lie and Bos delineate the origins of CSS from 1994 to their present year in 1999. Looking back over twenty years ago, it is easy to see how much of a struggle it was to establish CSS as a fundamental part of web browsers and the construction of the World Wide Web in general. Continue reading WordPress Words: CSS

Domain Name Services: Postman of the Internet

Domain Name Services (DNS) is a service which exist to help us humanize the addresses of networked resources. Humans remember words as a whole easier than numbers representing octal based Internet Protocol addresses of those same networked resources be them across the Wide World Web or just an arms length away on our local network.

That was a mouth full. Essentially through DNS you can type in a URL into your favorite web browser and through the process of name resolution your system contacts a server acting in your behalf to find the correct IP address that matches the human oriented address you type in.

Sounds simple but a lot of chatter between various servers near and far may happen just to pull up that favorite site that you wish to view. First your own system will see if it has the particular IP/URL pairing locally in it’s own tables. On your computer this information will be kept in a host.txt file and depending on the operating system the location varies. Continue reading Domain Name Services: Postman of the Internet

How to Create and Use Abbreviations in HTML

Our friend the <acronym> tag has been deprecated with the release of HTML5, so how does this affect the use of acronyms generated with HTML? Well, we have a new friend! The <abbr> tag joins the HTML element list with HTML5. Continue reading How to Create and Use Abbreviations in HTML

WordPress Theme Frameworks

To begin, you will need to understand what is meant by WordPress Theme Framework. Technically (according to the WordPress Codex) any stand-alone Theme can act as a Framework. This is in the sense that any stand-alone Theme that allows you to make alterations to it, can be used as a framework.

What is a WordPress Framework?

There is a bit of confusion when it comes to the term WordPress Theme Framework. While the concept is that a Theme Framework is a bare bones, well-designed WordPress Theme for a developer or designer to build many client sites upon, some people think that a WordPress Theme Framework is an ultra-basic theme that has next to no formatting. When someone refers to WordPress Framework they may also be referring to the archive of code used to create Parent Themes.

Continue reading WordPress Theme Frameworks

Inline CSS Styling in WordPress

WordPress by default strips out any code in posts and Pages that may be considered “code” or malicious. Yet, there are ways to add color, splash, and fun to a WordPress post or Page without WordPress Plugins to overwrite the default functionality of WordPress. Here’s a quick how-to of what you can do to jazz up your posts and Pages (and when not to) on WordPress.com or WordPress.org without using a Plugin or going into the CSS file.
Continue reading Inline CSS Styling in WordPress

Twenty Eleven Child Theme; Make It Tacky With These 3 Easy CSS Mods!

In the Clark College WordPress Class We have downloaded Instant WordPress, which is a server designed to act like WordPress.org. It is free to download, and includes features such as plugins and use of the editor. However, the website that you create with this software is NOT live, and remains on your hard drive. Where it stays. Reclused from the world and worn out while you test its limits. But I digress… Continue reading Twenty Eleven Child Theme; Make It Tacky With These 3 Easy CSS Mods!

Styled Positioning in Text Widgets

When playing around in your WordPress theme, sometimes you want to use widgets as decoration to make your page a little more interesting.

One of the more flexible widgets available is the text widget.

With this widget you can add any text or HTML you please, giving your website the flair it may or may not need.

While playing with this widget to see what it would do, I decided to test its limits with inline styling.
Continue reading Styled Positioning in Text Widgets

What Do You Need to Learn to be a WordPress Expert?

In “Wanna Create Dynamic Websites? Learn JavaScript” by Daily Blog Tips, Daniel Scocco says:

If you want to become an expert programmer and make a living developing software you’ll need to learn a wide range of stuff, from logic gates to how the hardware works, from algorithms to data structures and programming paradigms (if this is actually what you are looking for I suggest you peek at the curriculum of the Computer Science degree on some good university and follow along).

Luckily, Clark College’s degrees for Web Development, Web Programming, and Computer Graphics Technology degrees include the skills you need.

What do you need to learn to be a WordPress expert?
Continue reading What Do You Need to Learn to be a WordPress Expert?