CSS Coding & Development

[Newman]

What is CSS?​

CSS is an acronym. It stands for Cascading Style Sheets. I know that doesn’t do that much for you so I figure I’ll give you a more useful definition. Very simply speaking, CSS can be thought of as the style side of a web page. It’s the language designers and developers use to make the page background blue, or the font size 16px, or the line height 175%. It’s a language that cascades down upon itself, meaning, if I write one style for an element near the top of a style sheet and then redefine it down towards the bottom, the bottom style will override the top.

Style sheets allow you to set web page margins and position elements. They create the “responsive” in responsive web design. They are the power behind flipping through WordPress themes as fast as you can download them. Style sheets are powerful and fun and CSS is what everyone wants to learn. It’s offers some of the biggest bang for the buck and the wow factor that makes the amateur ask, “Did I do that?”

What’s the Difference Between HTML and CSS?

I’ve read and heard this a million times, but if you’re here to learn about what things are, I think it’s worth repeating. If you consider HTML as your skeleton or the structure of a building, you can think of CSS as your skin and hair or the shell of that building. HTML is a markup language – one that defines what things are and what they mean, while CSS is what gives that structure presentation. CSS formats structure.

For example, if you wanted to put a headline on your webpage, you’d most likely tell the page that it was a headline by using an HTML header tag. If you did that and stopped there, you would have a somewhat plain looking page that was functionally correct. You explained to the browser and humans and search engines that what you put on the page was a header. But what if you were the type of person who wanted that header to look nice? What if you wanted to make it red and really big and have a margin that would space it apart from all other text? If you used CSS to accomplish this, not only would you have a well structured document, you’d also have a well presented one. Now, imagine adding CSS to all your structured elements, such as paragraphs, images and so forth. By using CSS to define your page layout, you could really let your imagination fly.

If you’d like to learn more about the basics of CSS, I suggest you read this post by SitePoint. And if you want to check out a really cool tutorial that will help you get started with CSS, take a look at this set of pages by MDN (Mozilla Developer Network).

What if You Have No Style Sheet?​

Did you know that even if you don’t use a style sheet to take advantage of your own look and feel, your web page will still have styles applied to it? That’s right – every browser uses internal styles that they’ve built in. The problem is, not all styles are created equally. Internet Explorer may treat the H1 element differently than Chrome does and Firefox may treat the UL element differently than Opera does. To deal with this, many developers “reset” default browser styles with a separate style sheet that overrides all styles and sets them to zero. Others “normalize” their styles with a normalize file. This file simply created continuity among browsers. The most popular of these types of files can be found here. This file is maintained by Nicolas Gallagher and is widely used across the web.

If you’d like more information on default browser styles, I suggest you take a peek at the resources I’ve listed below.

– What Is A CSS Reset? by CSS Reset

And if you’d like to take a look at some of those default browser styles themselves, browse this post:

– User Agent Style Sheets: Basics and Samples by Jens Meiert

Now, what’s the reason a developer might want to take advantage of normalizing or resetting browser default styles? Well, the reason is because as CSS files are created and grow, styles held within them may affect default styles differently. Sometimes small differences across browsers may occur, but sometimes specific areas may not work as intended at all. It’s because of these unknowns and odd behaviors that developers have chosen to create a baseline.

The Syntax of CSS​

I think it’s high time to stop talking about CSS and start seeing what CSS looks like. I’m going to offer up some short code below:

h1 {font-family: Arial, Helvetica, sans-serif;
    font-size: 3em;
    color: red;
    }

In the above example, we have two important areas to look at. The first area is what’s called, the selector. Selectors in CSS target which elements on the page to format and style. In the case above, the selector is the h1 element and in this case, headers that are on a page that uses this specific style sheet would take on the appearance that is specified in the next part of the above code, which is called the declaration. The declaration gives the formatting instructions to the selector.

To learn about the various types of selectors and the rules that apply to them, take a look at these pages:

– CSS Selectors Reference by W3Schools

– The 30 CSS Selectors you Must Memorize by Tuts+ Code Tutorial

– Selectors – Web developer guide by MDN

To continue on with the example I gave above, I’m going to talk about the declaration. In this area of the code, you can see three rules. The first rule instructs which font to display by using the Ariel, Helvetica, sans-serif value for the font-family property. In the second rule, the font-size property was given the value of 3em and in the third rule, the color property was given the red value. So to summarize, each rule in CSS has a property and a value.

Selector Types​

There are a few major types of selectors that really should be covered. These selectors will handle the majority of your code, so it’s wise to understand them. I’m going to break them up into sections to make things as clear as possible.

Element Selectors

The element selector selects all elements with the specified element name. It’s a broad type selector that can cover a good portion of your entire site. I’ll give you an example of the element selector syntax below and then some examples of element selector in action.

element {
    declarations;
}

If you take a look at the long list of HTML elements, you can easily see why these types of selectors are so powerful. Say you want to style your paragraphs across your entire site to look a certain way. All you would need is some code that looks like this in your CSS file:

p {
    color: red;
    line-height: 150%;
}

It’s that simple. If you wanted more style, you would add more declarations. Be careful though because, like I said above, element selectors go a long way. When naming an element selector, all you need to do is use the tag name without the greater than / less than symbols. If you notice above, I use just the p as the selector. The same is true for h1, ul, li, etc…

Now, just to make things super clear, I’ll give you a quick example of a paragraph in an HTML file so you can see the p element.

<p>This is a sentence.</p>

You can see that the p selector in the CSS code in the first example is selecting the p from the paragraph element in the second example.

Class Selectors

If you’d like to narrow down somewhat and not touch every single element of a certain type across your entire website, you can create class selectors. Here is what class selectors look like:

.class {
    declarations;
}

The way class selectors work is like this – say you know you’re going to have an introduction paragraph and a secondary introduction paragraph on every page of your website and you know you want these particular paragraphs to look a certain way. In this case, you could apply a class to that particular type of paragraph. In HTML, the element and class would look like this:

<p class="introduction">First introduction paragraph.</p>
 
<p class="introduction">Second introduction paragraph.</p>

Now, you can select that class in your CSS file, no matter how many times it’s used on a page and no matter how many pages it’s used on your site. In your file, it may look like this:

.introduction {
    color: blue;
}

This would give all classes with the name introduction on your pages the text color of blue.

Here’s something interesting. Say you wanted to use that introduction class on other sections of your pages besides just the intro paragraphs, such as asides or navigation, but wanted to select just the paragraphs for some special styling. If this was the case, you can write code like this to limit those particular styles:

p.introduction {
    color: blue;
}

Notice how I placed the p in front of the .introduction. That limits the styling to the p elements with the introduction class. Lastly, when writing a class selector, you start the class name with a period.

ID Selectors

ID selectors display a hash, or an # in front of their names when used in a CSS file. ID selectors look like this:

#id {
    declarations;
}

While you can have multiple classes on a page, you can only have one ID. IDs are meant for something specific, such as a top content area or something like that. Here is what an ID in HTML may look like:

<div id="top">
 
Top content code goes here.
 
</div>

And this is what the ID selector in your CSS file might look like:

#top {
    background-color: grey;
    padding-top: 50px;
}

If we put the classes and IDs together into a working HTML file and then selected them in our CSS file, we might have something that looks like this:

HTML

<div id="top">

<h1>Our Page Top Content</h1>

<p class="introduction">First introduction paragraph.</p>

<p class="introduction">Second introduction paragraph.</p>

</div>

CSS

#top {
    background-color: grey;
    padding-top: 50px
}
 
.introduction {
    color: blue;
}

Descendant Selectors

Descendant selectors target all elements that are descendants of, or within a, specified element. This is fairly simple. Let’s take a look at some HTML code:

<h1>Our Page Content</h1>
 
<div>
 
<p>First introduction paragraph.</p>
 
<p>Second introduction paragraph.</p>
 
</div>
 
<p>Third paragraph.</p>

Say we wanted to select only the p elements that are contained inside the div element for some special styling. We don’t want to alter the third paragraph in any way. In order to do this, we could write some CSS code that looks like this:

ancestor-element descendant-element {
    declarations;
}

Or more specifically:

div p {
    color: blue;
}

The above CSS code would only target the first two paragraphs – the descendant elements – contained within the div element – the ancestor element. It would not affect the third paragraph.

In between the two selectors, we use something called a combinator, or “something that explains the relationship between selectors.” In this case, the combinator is a space, because we’re dealing with a descendant selector.

Grouping Selectors

Let’s say that, for some reason, you wanted to add a left margin of 10 pixels to all elements in our example code. So to refresh your memory of what that code is, I’ll show you again:

<h1>Our Page Content</h1>
 
<div>
 
<p>First introduction paragraph.</p>
 
<p>Second introduction paragraph.</p>
 
</div>
 
<p>Third paragraph.</p>

Instead of writing three duplicate declarations like this:

h1 {
    margin-left: 10px;
}
 
div {
    margin-left: 10px;
}
 
p {
    margin-left: 10px;
}

We could group our selectors together using a comma as a separator, like this:

h1, div, p {
    margin-left: 10px;
}

Now, our code is DRY (Don’t Repeat Yourself) and our code is lean, but still has the same effect.

HTML & CSS Best Practices​

The final area I’d like to discuss in this post has to do with the best practices you should follow when coding your HTML and CSS. While many styles of coding may “get the job done,” a well thought out and foresighted approach will be well worth your efforts.

While much of what James Williamson discussed in the class I’m taking currently (CSS Fundamentals) had to do with how to best use classes and IDs in HTML and selectors in CSS, I’d like to go a bit further. Instead of only discussing the areas where HTML and CSS intersect, I figure a more broad overview of coding HTML and CSS would be helpful. I did some poking around online and came across a few referral pages that I think would help if looking into this area. They are:

– 30 HTML Best Practices for Beginners by Tuts+ Code Tutorial

– Writing Your Best Code by Learn to Code HTML & CSS

– Front-end Code Standards & Best Practices

– HTML5 (and Some CSS) Best Practice by CodeProject

I hope those references help. There’s a lot to learn when it comes to coding and getting on the best practices bandwagon early on is the way to go.

That’s it for this post. I think I covered some good areas. If you’re interested, keep your eye on the Coding forum here because I’m going to continue my discussions on CSS and beyond. Up next, something about WordPress page templates.

 

[Newman]

Getting a Handle on CSS​

In this post, I’m going to be taking notes on Guil Hernandez’s “Basic CSS” course over at Treehouse. I already took the course a few months ago, but that was before I started this blog. I’d like to take it again for a few reasons.

First, without writing about the course, I have nothing the look back on. It’s important for my learning and retention that I have a tangible something of every course I take. Videos aren’t going to cut it in that department. Not to say that videos aren’t useful for learning in the first place. Now that I’ve had a taste of the good life at Treehouse, I couldn’t do it any other way.

The other reason I’d like to take this course again is I’d like to get a better understanding of what Guil went over. While I do understand and can write CSS fairly well, I’m sure there were a few quiz questions I got wrong at the end of each section. Since I’ve been blogging about the courses, my “correct” rate is nearly 100%. Let’s just say that writing about learning to code helps tremendously.

Before I get into the actual material we’re going over, I want to talk about CSS in general for just a few moments. In the past, I’ve read a bit from more than a handful of websites out there that CSS is a “given” when it comes to designing and developing websites. Well, actually, they said that HTML and CSS are givens, like, “Yeah, you just wake up one morning and know the stuff.” It’s almost like they dismiss CSS and treat it like some red headed stepchild. These days, everyone wants to learn and talk about JavaScript. Well, I’m here to tell you that CSS is rather important and if you’re into designing websites or becoming a WordPress developer, CSS is where it’s at. Make no mistake, once you start getting your hands dirty, you’ll spend a lot of time writing this stuff. It’s what everyone looks at and at this very moment, it’s pretty hot. With the whole responsive thing going on, if you’re a CSS master, you’re in demand.

So, with that said, I feel a little better about continuing on with this post and looking into the basics of CSS.

Resources For CSS​

I bought a book on CSS a while back. I keep it handy and enjoy browsing through it for some leisurely reading. I think books are great as reference and can really help out when trying to find something fast, especially if you’re a good bookmarker.

There’s some growing competition to coding books out there though, and that competition is from the web. The difference between books and the web is, obviously, that the web can be updated very quickly. Books, well, to update them, it takes a while. So where on the web can you get some great CSS resources? I’ll list them here:

MDN CSS Reference – An enormous list of everything CSS. Mozilla puts selectors, properties and concepts all on one page. And for ease of use, they list these things alphabetically.

Web Platform Docs CSS – A community and contributor based CSS resource. This website covers learning, selectors, properties, functions, rules and media queries. Also, it gives a heads up on whether of not something is ready for use with browsers or not. Handy.

W3C Cascading Style Sheets – If you like the horse’s mouth and want to read some words from it, here you go. These are the people who can give you the information on the CSS specification, the current state of CSS development and things that are around the corner. If you’re a normal web developer like I am, you most likely won’t need to view this resource often, but it’s good to know it’s there.

Can I Use? – Coding with CSS is sometimes like trying to nail jello to a wall. It’s challenging. The challenge primarily lies in the fact that CSS is a moving target in that it’s never quite finished. There’s a steady flow of improvements, changes and alterations that happen over time. Browsers implement those changes at a varied pace, so as a developer, you really need to know what you can use in your code and what you can’t. Well, with this resource, your life just got a little easier. Click a link and you’ll be presented with information on browser support for just about every bit of code out there.

Adding CSS Styles to Your Page​

There are generally three ways to add CSS styling to your page. I’ll go over each one below.

Inline Styles – Inline styles are included directly inside of an HTML tag and has the ability to add styling to a specific element. This type of style is useful if you, for some reason, don’t have access to external style sheets. This type of style is not recommended because, as the number of pages on your website grows, updates and changes to your pages becomes difficult. Also, this adds weight to your HTML pages, which is not preferred. I’ll give you an example of an inline style here:

<h1 style="color: #CCC; margin: 15px; font-size: 24px;">Web Page Heading</h1>

Again, while this seems easy and very direct, get into the habit of avoiding this method of adding styles to your pages for the reasons I mentioned above.

Advantages

– Testing: You can easily test the look and feel of a page by using inline styles.

– Quick-Fixes: Sometimes you need to fix something small and temporarily that you’ll permanently fix later on.

– Tiny Websites: If you want to keep things simple and you operate a very small website, this may be your solution.

– Fewer HTTP Requests: By using inline styles that are placed directly inside HTML tags, you reduce the number of HTTP requests by not linking to external files.

Disadvantages

– Overriding: Inline styles are very powerful and override all other CSS styles for a particular element.

– Every Element: You must apply styles to every page element you want to style. This type of inefficiency is exactly what CSS was developed to avoid.

– Pseudo-Elements and Classes: You can’t use pseudo-elements and classes with inline styles.

Internal Styles – Internal styles are held towards the top of an individual web page in the head section. They are similar to inline styles in that they reside inside an HTML page and that you can use them if you don’t have access to an external style sheet, but the same pitfalls apply to this type of page styling. As sites grow, this type of styling becomes cumbersome and if the CSS code on a particular page becomes verbose, it can affect page download time. I’ll give you an example of internal styling here:

<head>
<style>
body {
    background-color: #f5f5f5;
}
 
h1 {
    color: #CCC;
    margin: 15px;
    font-size: 24px;
}
 
p {
    font-weight: bold;
    font-size: 16px;
}
</style>
</head>

The code for this type of page styling resides inside “style” tags and like I said above, the entire page element resides inside the “head” tags. Unless you have a very good reason, steer clear of this type of page styling as well.

Advantages

– Pseudo-Elements: You can take advantage of pseudo-elements with internal style sheets.

– More Control: Internal style sheets offer more control over page elements than inline styles do. You can apply styles to all elements of a certain type, as opposed to just one single element at a time.

– Fewer HTTP Requests: With internal style sheets, additional HTTP requests are not required.

Disadvantages

– Multiple Pages: Internal style sheets do not span over multiple pages.

– Page Load: Internal style sheets slow the loading of web pages.

– File Size: As your internal style sheet grows in size, so does your page file size, which slows loading as well.

External Styles – The preferred way of adding styles to a web page and a web site is through the use of external style sheets. These types of “sheets” or files, end in a .css extension and can live virtually anywhere. If an external style sheet exists and is live somewhere on the internet, you can use it in your website.

Here is what code inside an external style sheet looks like:

body {
    background-color: #f5f5f5;
}
 
h1 {
    color: #CCC;
    margin: 15px;
    font-size: 24px;
}
 
p {
    font-weight: bold;
    font-size: 16px;
}

Advantages

– Multiple Pages: External style sheets can span across all your website pages.

– Reduced File Size: By removing code from your HTML documents, every one of those documents becomes smaller in size.

– Pseudo-Elements and Classes: You can use pseudo-elements and classes with external style sheets.

– Grouping: You can easily group your styles to write more efficient code.

– Location: All your styles are kept in one place for maximum efficiency.

– Cache: Once your external CSS document is cached by a browser, it doesn’t need to be downloaded again.

– Pre-Processors: You can take advantage of the power of pre-processors, such as Sass and Less, with external style sheets.

– Separation: External files separate the content and presentation of your website.

Disadvantages

– File Size: External style sheets can get large in size, which takes a while to download.

– HTTP Requests: The more style sheets to call into your document, the more HTTP requests you make to the server. This slows page load time.

Linking & Importing External Style Sheets​

So, how do we pull in external style sheets to a web page? Well, there are two ways.

LINK Element

You can use the “link” element inside the head element of your web page to attach an external style sheet to that page. Here is what the link element looks like:

<link rel="stylesheet" href="styles.css">

@import Command

In order to pull in external styles to your web page, you may also use the “@import” command. This is similar to the previous method and looks like this:

<style>
    @import url('https://www.example.com/styles.css');
</style>

This method is also used inside the head section of a web page.

Well, that’s it for another fun filled post about web design and development. If you have any comments or questions about this post, please leave them below.

 

[Newman]

Learning CSS Selector Basics​

In order to get into CSS a bit more deeply, I think we need to define what it is that we see behind the scenes. What those chunks of code are that we peek at when spying on someone else’s stylesheet. In order to do that, we need to get into what’s called, “CSS syntax.” Not too much – just a bit.

The first things I’d like to cover is what’s called a “CSS rule” (or rule set). Take a look at the following code and I’ll go over it below.

selector { property: value; }

As you may have deduced from the title of this post, we’re going to discuss CSS selectors a lot. Just as luck would have it, the first part of the CSS rule above is just that – a selector. A CSS selector is what we use to select element(s) we’d like to style on a web page. They’re what we use to grab HTML elements, based on their id, class, type, attribute, and more. After we select an element, we can manipulate (style) it in many different ways.

Now, in between the curly braces is what we call the “declaration block.” Declaration blocks encapsulate, yep, you guessed it – declarations. Each declaration is separated by a semicolon and you can include as many declarations as you’d like inside each declaration block.

If you look at the code above one more time, you’ll notice that a declaration is made up of a property name and a value. These two items are separated by a colon. The property is what we would like to style and the value is what we’d like to do to it. So, for example, a property might be a color and a value might be red. We’ll go over this ad nauseam in this and future posts, but for now, take a look at this simple example:

p {
    text-align: center;
    color: red;
}

In the code above, the “p” is the selector. Everything inside the curly braces is part of the declaration block. Inside this block, we’ve got two declarations. In the first declaration, the property is “text-align” and the value is “center.” In the second declaration, the property is “color” and the value is “red.” Notice how the declarations are separated by semi-colons.

If you’re interested in learning more about CSS syntax, you can visit the source over here. Also, if you’d like to get a jump-start on CSS selectors, you can do that here.

Universal Selector​

The universal selector is used when you want to select every element on a page. To take advantage of it, you’d need to use the “*” (asterisk) as the selector. It’s a very handy, but quite far reaching selector, so I’d suggest you use is sparingly. Here’s an example of the universal selector in action:

* {
    text-align: center;
    color: red;
}

If you’ll notice, the code example above is almost exactly the same as the one right above it. All I did was change the “p” selector to the “*” selector. While this alteration was small, it can introduce drastic changes.

In the first example with the p selector, the text-align and color properties were limited to paragraphs. Since I changed the p to an * though, those changes would not only apply to the paragraphs, but all other elements.

Type Selectors​

Type selectors are probably the lowest hanging fruit out there when it comes to CSS. These types of selectors isolate the actual element, or node, itself. So, if you wanted to style all p tags or div tags or span tags, you would use a type selector. Let’s go over a few examples:

Let’s say that you have this HTML code on your web page:

<body>
    <header>
        <h1>This Is My Heading</h1>
    </header>
        <p>This is a paragraph in the body section.</p>
</body>

You would easily be able to style these elements with the following CSS:

body {
    background-color: #cccccc;
}
 
header {
    background-color: #ffcccc;
}
 
h1 {
    color: #ffffff;
    font-size: 24px;
    padding: 10px;
}
 
p {
    font-size: 18px;
}

So, if you take a look at the code above, you’ll see that we had a few elements in our HTML that were styled in our CSS. This is the base of what we’ll be going over and this is the base of CSS in general. Grab something from your HTML and style it in your CSS. The only thing that gets more complicated than that is what you grab and how you grab it. Of course, the styling options because more plentiful as well, but to get that down, all that’s needed is experience and a bit of ongoing scavenging of information.

ID Selectors​

Let’s say we wanted to target something specific on our page to style. If it’s a very narrow styling, we most likely don’t want to use type selectors. What would suit us well is called an “ID selector.”

Every element on an HTML page can have an ID attached to it. It’s the ID that we can target in our CSS file to give styling to. Now, there are a few rules to follow here. We can’t apply more than one ID to an element and IDs must be unique to each web page, meaning we can’t give a div element IDs of “primary” and “main” and then repeat the “main” ID all the way down the page. We have other selectors for that kind of business. Like I said above, ID selectors are very specific.

Let’s take a look at some code, so you know just what I’m referring to. Pretend that I just updated my HTML page with a few columns. I created a “section” element along with an “aside” element. For both of those elements, I assigned IDs of “primary-column” and “secondary-column” respectively.

<body>
    <header>
        <h1>This Is My Main Heading</h1>
    </header>
    <section id="primary-column">
        <h2>This Is My Left Column Heading</h2>
        <p>This is a paragraph in the left column section.</p>
    </section>
    <aside id="secondary-column">
        <h2>This Is My Right Column Heading</h2>
        <p>This is a paragraph in the right column section.</p>
    </aside>
</body>

Now, in order to style those two columns so they format correctly, I had to add some ID selectors to my CSS file. As you can see, to target an ID, you would type a “#” (hash) and then the name of the ID after that. No spaces. After that, style as you would a type selector.

#primary-column {
    width: 70%;
    float: left;
    border: 1px solid red;
}
 
#secondary-column {
    width: 25%;
    float: right;
    border: 1px solid red;
}

I’m going to give you a small hint here: IDs are very handy when creating an HTML page. They have multiple uses in not only CSS, but HTML page navigation as well as JavaScript. Keep your eye on the ID attribute and learn more about it here.

Class Selectors​

Class selectors are similar to ID selectors in that you can apply them to an HTML element. They have one primary difference though. Class selectors can be applied to multiple elements, not just one. In other words, they don’t need to be unique to a page. Also, you are allowed to apply more than one class selector to an element. While I’m not going to give an example of multiple class selectors per element in the example below, I will go over that later on.

Let’s take a look at some code:

<section id="primary-column">
    <h2>This Is My Left Column Heading</h2>
    <p class="bold">This is a paragraph in the left column section.</p>
</section>
<aside id="secondary-column">
    <h2>This Is My Right Column Heading</h2>
    <p class="bold">This is a paragraph in the right column section.</p>
</aside>

This is the same code as I shared above, but in this code, I added class selectors to both p elements. Basically, I wanted to bold the text within them. Take a look how I styled this in my CSS file:

.bold {
    font-weight: bold;
}

Notice how I used the “.” (period) in front of the selector as opposed to the hash. Just as the word “class” indicates a class in HTML code, a period indicates a class in CSS.

Multiple Classes​

Like I mentioned above, more than one class selector can be applied to an element. I gave an example of a class that bolded the text of a paragraph above. Now I’ll give an example of applying two classes to an element. One that bolds the text and one that italicizes it.

<section id="primary-column">
    <h2>This Is My Left Column Heading</h2>
    <p class="bold italic">This is a paragraph in the left column section.</p>
</section>

Let’s say that we would like to make the bolded text in the primary column not only bold, but italic as well. Since we already have the “.bold” class selector applied to the p element, all we need to do is apply an “.italic” selector to that same class attribute. You can see how I did that in the code above. All we need to do now is create the rule in our CSS file.

.bold {
    font-weight: bold;
}
 
.italic {
    font-style: italic;
}

And with that, we’ll have a bold and italic paragraph.

Descendant Selectors​

This is the first area of CSS that’s going to make you think. While type, ID and class selectors are very straightforward, descendant selectors are more creative.

Descendant selectors are sort of like ID selectors in that they can really drill down into the specificity of styling a document. The way it works is this: say you have two “p” elements, like we do in the above examples. One is contained inside a “section” element and one is contained inside an “aside” element. We only want to style one of the p elements. What do we do? Well, I suppose we could create a class or an ID and apply some styles to it, but we now have another choice as well. Take a look at this:

<section id="primary-column">
    <h2>This Is My Left Column Heading</h2>
    <p class="bold">This is a paragraph in the left column section.</p>
</section>
<aside id="secondary-column">
    <h2>This Is My Right Column Heading</h2>
    <p class="bold">This is a paragraph in the right column section.</p>
</aside>

This is the same code as I displayed up above. Now, let’s say that we wanted to give a weird olive green background to the paragraph inside the section element. In this case, we could use a “descendant selector” to get the job done. Here’s the code for that:

section p {
    background-color: #cccc00;   
}

Now, the background for only that p element is green. If you’ll notice in the code, all I did was to use the “ancestor” section selector, type a space, and then use the “descendant” p selector and call it a day. If I wanted to, I could have used the ID selector (or a class selector) in the place of the ancestor selector. That would look like this:

#primary-column p {
    background-color: #cccc00;   
}

This would have achieved the same result as using the section type selector. Think of it as a staircase. You start at the top and keep stepping down to get more and more specific. Of course, you don’t want to go overboard because you’ll end up creating a maintenance nightmare. These do have their uses though.

Pseudo-Classes​

Pseudo-classes are a keywords added to selectors that specify a special state of the element to be selected. We’ve seen these all over the place. I remember way back when, when I first began discovering the magic of CSS, I wondered how developers made the links on the page change colors when I rolled over them. Well, as it ended up, it wasn’t too difficult.

I’m going to add a link to the first paragraph in our code:

<p class="bold">This is a <a href="#my-link">paragraph</a> in the left column section.</p>

We can do all sorts of things to this link. I’ll show you some CSS code below and then go over what each pseudo-class does.

/* unvisited links */
a:link {
    color: blue;
}
 
/* visited links */
a:visited {
    color: purple;
}
 
/* user hovers */
a:hover {
    font-weight: normal;
}
 
/* active links */
a:active {
    color: lime;
}

If you’ll notice in the code above, I added some CSS code that includes pseudo-classes behind the “a” selector. The way to do this is to use a “:” (colon) after the type selector.

I’ve added some random styling to our link. In the first a:link example, I made our link blue on the page. If someone clicks and visits that link, I made it’s “visited” state purple by using the a:visited pseudo-class. After that, I wrote some code that changes the link text from bold back to normal. Do accomplish this, I used a:hover. Finally, I used a:active to change the link color to lime as long as the link is being actively clicked on.

There’s a heck of a lot more to pseudo-classes than I mentioned here, but this is a good start.

Commenting In CSS​

If there’s one thing you want to do inside your CSS code, it would be to add comments. This type of code can get extremely long and confusing and by adding comments to it, you can create sections that’ll make life not only much more clear for yourself, but for others who may be working on your code as well.

I added a few comments to the code above. If you take a look, you should see something that looks like this:

/* this is a comment */

Anything inside the /* and the */ will not be interpreted by the browser and is as safe as regular text. You can even write multiple line comments:

/***************************
****************************
this is another comment
****************************
***************************/

You can add comments anywhere you want in your CSS file, such as inside a declaration block:

a:active {
    color: lime; /* changes active link to lime color */
}

You can even make the interpreter ignore some of your CSS code by commenting it out:

/*
a:active {
    color: lime;
}
*/

Well, that brings us to the close of another post on CSS. If you have any questions or comments, please leave them below.

 

[Newman]

CSS Values & Units​

If there’s one area of CSS that confuses me, it’s got to do with values and units. Especially since the onset of responsive web design (mobile), varying screen resolution, the plethora of screen sizes, etc… What once was a pixel displaying on a desktop has taken on new life. There are considerations today that we once hadn’t contemplated. But, I suppose, like everything else, we’ll adapt.

Values​

If you remember back to my previous post on CSS selectors, you remember the layout of a CSS rule. If you don’t, then just take a look below:

selector {
    property: value;
}

In the above example, we have a selector followed by a property and a value. In this post, I’m going to be talking about what’s inside the declaration, or what’s inside the curly braces. More specifically, the value that comes after the property.

In order to make things a bit more clear, I’m going to use an example to help understand the rule above. Pretend our web page is a neighborhood with a whole bunch of houses in it. In the code above, our selector is a house. We could have selected a tree or a car, but we chose a house. Now that we’ve selected something, we can style it. So, say we’d like to paint the house. In the code above, we would use the property inside our declaration block (curly braces) to identify that we’d like to target a color. Since we’ve chosen the property to be color, we are limited to what we can use as values for that color. Obviously, we can’t say that we want to color to be “5.” We also can’t say that we want the color to be “center.” What I’m trying to say here is that once we choose a property, we’re limited to values that pertain to that specific property. We can’t willy nilly throw anything at it. If we chose to align the house on a piece of land somewhere, we certainly couldn’t identify the alignment as being blue. For every CSS property, there are a specific number of values that can be associated with it. Those values are categorized into data types. And in this case, it would make perfect sense to paint our house in the example a color of red.

To learn about CSS data types, check out the MDN page on exactly that.

Pixel Units​

Sometimes in CSS, two datatypes are combined to create a value. In the example below, I think we’d agree that there’s something wrong.

.container {
    width: 1000;
}

What’s missing? That’s right – we have no idea what “1000” is. Is it miles? Feet? Inches? Or perhaps pixels? in this case, it’s 1000 pixels, which is a “fixed” length unit. To learn about length data types, check out this resource:

MDN Length Data Type

To learn about relative units and fixed units, simply scroll down the page.

To correct the code example above and allow it to function correctly, we’ll add the length data type to the number data type.

.container {
    width: 1000px;
}

To learn about number data types, take a look at this resource:


MDN Number Data Type

As I mentioned above, pixels are a fixed length unit. This means that when you use one in your CSS rule, there’s no flexibility. If you make a box a specific pixel height or width, that’s what it’s going to be across all devices. Sometimes, especially today, you’ll see scroll bars appear in the browser window because of this. We’ll talk about relative units later and the length data type’s impact on responsive web design, but for now, just be aware that designers have been using fixed pixels for years and for some areas of your design, they’re perfectly suitable.

Percentage Values​

If you’ve ever seen a fluid layout, or an object held within a layout, shrink and grow on a screen, depending on the size of that screen, you may have been viewing a layout that uses percentage values as a length property. There are quite a few CSS properties that will accept percentage values and the way it works is this: whatever the percentage value is, it’s relative to its parent’s width. If you have a container in your layout that measures 1000 pixels wide and a box inside that container that measures 90%, then the box measures 900 pixels wide.

In order to use percentages as values, you’ll need to define a number and then put the % symbol directly after it. As with all combined data types of this nature, you can not have a space between the two. To learn more about percentages, please review this reference:

MDN Percentage Data Types

For an example of what a percentage value look like, check out the code example below:

.container {
    width: 90%;
}

Em Units​

Em units are primarily used when sizing fonts and are great when you need to make those font sizes scalable in your layout. They way they work are like this: If you were to not size a font at all, the font would be sized according to the browser’s default size, which is normally 16 pixels. In ems, the 16 pixels are equal to 1. So:

1 em = 16 pixels
2 em = 32 pixels
3 em = 48 pixels

etc…

To learn about these relative length units in more detail, take a look at this resource:

MDN Length Data Types – Relative Length Units

Just scroll down to the “Units” heading.

Like I described above, ems are relative to their parent element. And if we work off the premise that the most parent element is the document itself, we’re working off the premise that 1 em equals 16 pixels. Take a look at the following code example:

p {
    font-size: 1em;
}

In the code above, the paragraph’s font size will be 16 pixels tall. Here’s the thing – what if we adjusted the font size for the entire body?

body {
    font-size: 2em;
}
 
p {
    font-size: 1em;
}

This is going to get a bit confusing, but stay with me.

If we adjust the font size for the body element to equal 2 ems, this becomes the new base for everything else in our document to work from. So when the body element text size equals 2 ems and the paragraph font size equals 1 em, they both equal font sizes of 32 pixels tall. 2 ems is 32 pixels and the paragraph size equals one of those 2 em units, so that’s also 32 pixels.

Let’s say that we want to make our paragraph text really big, so we change the em size of it to:

body {
    font-size: 2em;
}
 
p {
    font-size: 3em;
}

Can you guess how many pixels tall the paragraph text will be now? Well, since we’re still working from the premise that we have a base value of 32 pixels, all we need to do is multiply our paragraph em size by that for our result. So, 32 pixels multiplied by 3 ems equals 96 pixels.

32 pixels * 3 ems = 96 pixels

What if we had an existing stylesheet that was created without the use of these relative em units? What if all font sizes were sized in fixed pixel units and we wanted to change that? Well, what we’d need to do is a bit of math. Here’s what our code might look like:

p {
    font-size: 100px;
}

If we wanted to change this pixel sized font to ems, we’d need to do some division.

100 pixels / 16 pixels = 6.25 ems

This is what our new code would look like:

p {
    font-size: 6.25em;
}

If we changed our code to look like this, our text size would be exactly the same. Let’s do another example:

body {
    font-size: 2em;
}
 
p {
    font-size: 100px;
}

Since our base is now 2 ems, which is double the previous start point of 1 em (the default browser size), we need to alter the values of our equation:

100 pixels / 32 pixels = 3.125 ems

Our new code would look like this:

body {
    font-size: 2em;
}
 
p {
    font-size: 3.125em;
}

Again, our paragraph font size would be identical to what it was before we switched to using em units.

Here’s the thing: there’s a rabbit hole associated with relative em units. Let’s say that we add some code to our example:

body {
    font-size: 2em;
}
 
.container {
    font-size: 3em;
}
 
p {
    font-size: 3.125em;
}

Since ems are relative to their parent element, they can “compound,” the further down they go. And since our paragraph is now inside a container class, our text is going to get large, fast. Let’s do the math.

If our baseline is 2 ems (body element), which equals 32 pixels, that means that the text inside our container class (inside the body element) will be three times that, or 96 pixels.

32 pixels * 3 ems = 96 pixels

Since our paragraph is nested within the element with the container class, our paragraph text will be 3.125 times larger than it. So:

96 pixels * 3.125 ems = 300 pixels

As you can imagine, this can get out of control if you have lots of nested elements with a variety of relative font sizes. This is where Rem units come into play.

Rem Units​

Rem (or “root” em) units are scalable like em units, but they don’t follow the same compounding rules as em units do, thus, no rabbit hole. The html element is the parent of all rem units, so you won’t get stuck trying to figure out what’s a parent and what’s not, as well as what font sizes are across your document. If you know that the html element has a font size of 1 em, or 16 pixels, you can rest assured that your paragraph element with a font size of 2 rems is actually 32 pixels tall. Here’s what this code looks like:

body {
    font-size: 2rem;
}
 
.container {
    font-size: 3rem;
}
 
p {
    font-size: 3.125rem;
}

The code above is equivalent to this code:

body {
    font-size: 32px;
}
 
.container {
    font-size: 48px;
}
 
p {
    font-size: 50px;
}

Rem units offer some beautiful scaling as well. If we added another rule to our code, we can change the font sizes that utilize rem units across our entire document. Take a look at this:

html {
    font-size: 2rem;
}
 
body {
    font-size: 2rem;
}
 
.container {
    font-size: 3rem;
}
 
p {
    font-size: 3.125rem;
}

Now, the pixel dimensions would change and the new sizes would be the equivalent of this:

html {
    font-size: 2rem;
}
 
body {
    font-size: 64px;
}
 
.container {
    font-size: 96px;
}
 
p {
    font-size: 100px;
}

Since we changed the parent element (html) font size to 2 ems, all child elements that use rem units doubled.

To chime in on some of the discussion out there on em and rem units, check out these posts:

Font Sizing With Rem – Snook.ca

Confused About REM and EM? | Jeremy Church

Relative is the New Absolute: the Rem Unit

Web Design Basics: Rem vs. Em vs. Px — Sizing Elements In CSS

Font Size Idea: Px at the Root, Rem for Components, Em For Text Elements

Color Data Types​

The world of color is a very deep one. University courses have been taught on the topic. Every time I think about color, my head spins because what begins as something simple, quickly turns into a project.

CSS once handled aspects of color in a narrow way. As time marches on though, more and more options and features get added to CSS, making color a significant part of coding in this language. For our purposes though, it makes no difference how complex things get, because we’re going to stay on the straight and narrow. In this post, we’re going to keep it simple.

The three values of color we’re going to look at here are color keywords, hexadecimal (RGB hex) and RGB. If you’re interested in learning about more color values when it comes to CSS, feel free to check out this reference:

MDN Color Data Types

Let’s say that we want to make our primary page heading blue. We can do this in a number of ways. The first way being through the use of a color keyword. This is the fastest and most simple method of adding a color value to a CSS rule.

h1 {
    color: blue;
}

By using this code in our CSS file, our H1 will be blue. We can also use many other keywords. Let’s say we wanted our H1 element to be corn flower blue instead. We can simply update our code to look like this:

h1 {
    color: cornflowerblue;
}

This seems easy, but it begs the question – where in the heck do I find the names of these color keywords? I mean sure, red, blue, green and yellow are the easy ones, but I would never have thought of corn flower blue. If you browse the link I shared with you above, you’ll see the color keywords that CSS accepts. You can also use a handy tool, such as:

RGB.to

This will help take some of the pain away from searching through many, many colors. It also converts keywords to their respective hex and RGB values.

Color keywords are straightforward. What if we wanted to get away from using keywords and start using hex values instead? Many designers prefer to take advantage of hex values because they are easier to write and can be abbreviated. There are also many more hex value combinations than color keywords. Next, we’re going to convert our color keywords to hex values.

h1 {
    color: #0000ff;
}
 
h1 {
    color: #6495ed;
}

The above colors are blue and cornflowerblue, respectively. How did I get those hex values? There are a number of ways. Two being the sites I listed above. If you visit this page on the RGB site, and then click blue and cornflowerblue, you’ll see everything you need.

Notice the hash in front of the six character code. Hexadecimal codes always begin with a hash.

I’m going to give you a hint here and you can choose whether or not you want to use it. I don’t. I always write my hex values out long hand, but if you wanted to, you could shorten certain hex values. Let’s take a look at some examples here:

#0000ff = #00f

#006699 = #069

#000000 = #000

The way hex values work is that the first two characters equal the red value, the second two characters equal the green value and the third two characters equal the blue value. So if you have two identical characters for each color value in your hex code, CSS only makes you write one of those characters.

Quite honestly, the way I choose my hex values is to open Photoshop and use the color picker. If you don’t have Photoshop, you can use a similar tool like something found here.

The last color value I’m going to talk about is RGB. To make things easy, I’m going to convert our blue and cornflowerblue keywords and hex values into RGB values in this next example:

h1 {
    color: rgb(0, 0, 255);
}
 
h1 {
    color: rgb(100, 149, 237);
}

The previously covered color keywords and hex values are equivalent to these RGB values you see directly above. I used the tools I spoke of to convert the colors the same way I did previously. Again, if you want a really easy to use tool to help out with this, check out:

W3Schools HTML Color Picker

There is one last thing I want to cover, though, and that’s how to use the RGB opacity value to add some transparency to your chosen colors. Take a look at this code:

h1 {
    color: rgba(0, 0, 255, .8);
}
 
h1 {
    color: rgba(100, 149, 237, .3);
}

By adding an “a” after the RGB in the code above, I told the browser that I want to make my color somewhat transparent. The only other task that needs completing is to tell the browser how transparent I’d like to make it. That’s where the final fourth value comes in, inside the parenthesis. In the first color above (blue), I added an 80% transparency to our fully saturated color. Remember from math class? 1 equals 100%, so .8 would equal 80%.

In the next block of code (cornflowerblue), I added a 30% transparency value to our color. Now, both colors will be shown at a level of transparency, meaning, they will appear lighter when on white backgrounds or whatever is behind them will show through at the set degree on textured or colored backgrounds.

Formatting Text​

Formatting text with CSS is fairly straightforward. Later on, we’ll get into some more creative and involved formatting options, but for now, we’ll just focus on the easy stuff – making text look presentable on a web page.

I think I’m going to give code examples and then explain what’s going to happen to our text because of that code. I’ll also link to resources when relevant.

h1 {
    text-align: center;
}

The “text-align” property describes how inline content, like text, is aligned in its parent block element. The above code will center our heading text. There are further options available with the text-align property, such as left, right, justify, justify-all, start, end, match-parent and inherit. For more information on the text-align property, please look at this page.

h1 {
    text-transform: uppercase;
}

The “text-transform” property tells the browser how to display our text with regards to its capitalization. In the code example above, our heading text will be capitalized – every letter of it. There are more options available for this property, such as capitalize, lowercase, none, full-width, and inherit. For more on this property, you may browse this page.

h1 {
    text-decoration: underline;
}

The “text-decoration” property tells the browser what type of formatting to give the text in regards to underline, overline, line-through or blink. In the example above, our specified text would be underlined. For more information in this property, take a look at this page.

h1 {
    font-weight: normal;
}

The “font-weight” property is what we use to set the weight of our specified text. Since heading tags are normally set to bold by the browser, in the example above, I set the weight to normal. There are many other weights to choose from with this property, but you need to concern yourself with their availability regarding the fonts you choose to use. Not all fonts support all weights. The available weights for this property are normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900 and inherit, with 100 being the lightest and 900 being the heaviest. If you would like to choose a font weight for text that’s relative to its parent’s font weight, you could go with lighter and bolder. To learn more about font weights, take a look at this page.

body {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

The “font-family” property lets us tell the browser what our prioritized list of font family names and/or generic family names for the selected element is going to be. In the previous sentence, notice the word, “prioritized.” If you take a look at the above code example, you can see that I set the font family “font stack” for the body element. This means that, if no other fonts are specified for any other element on the page, all fonts will be set to Arial. If Arial isn’t available on the user’s computer for some reason, the next font, “Helvetica Neue” will be used. If not that one, Helvetica, etc… Each font in the list is a fall back for the previous one.

Also, notice how the ‘Helvetica Neue’ is in quotes. These can be either single or double quotes. The reason quotes are used is because it’s a font that has two or more words in it. Single word fonts don’t need quotes and multiple word fonts do. To learn more about the font-family property, take a look at the MDN page on the topic.

body {
    font-style: italic;
}

The “font-style” property allows us to select whether we want our font to take on italic or oblique faces within a font-family. This is fairly straightforward. In the above code example, all the text on our page would be in italics. To learn more about this, check out this page.

body {
    line-height: 1.5;
}

The “line-height” property specifies the minimum height of line boxes within an element. This is actually a fairly deep topic and I’ll be talking about line height at length in future posts, but I wanted to give you a taste of it here. Basically, line height spaces text lines vertically from one another. Be default, lines can be cramped. By adjusting line height, you can easily make things more readable.

In the code example above, I set all the text in our document to a line height of 1.5. This is a unit-less value and is in direct relation to the font size it’s adjusting. For many of my personal projects, I set the line height to 175%, because that gives some nice spacing as well.

When adjusting line height, we’re able to take advantage of a few data types. We can use numbers, such at the 1.5 I used above. We can also use lengths, such as ems as we discussed previously in this post. An example of that would be 1.8em. We can also use percentages like I just talked about. Remember though, many of these data types are relative, so that compounding effect can creep in when you aren’t expecting it. Lastly, if you’d like to delve into the line height arena, be sure to read up on the topic over at the MDN page.

——

Wow, this was a long post. I think I’m going to stop here. If you have any questions or comments, please leave them below.

 

[Newman]

Understanding the CSS Box Model​

In CSS, the box model is where we start to have fun. It’s the basis of page layout, so it sort of constitutes the building blocks of what our pages will look like. The box model isn’t difficult to understand either, once we grasp a few key concepts.

In the most basic sense, the box model applies to each and every element on an HTML web page. Included in the box model are both inline and block-level elements. An inline element occupies only the space bounded by the tags that define the inline element, while a block-level element occupies the entire space of its parent element (container), thereby creating a “block.”

Here are some great examples of inline and block-level HTML elements:

Inline

<span></span>
<b></b>
<td></td>
<a></a>
<img>

Block

<div></div>
<h1></h1> //ALL HEADING TAGS
<p></p>
<ul></ul>
<table></table>

To explain this a bit better, inline elements can reside inside an HTML document similar to how a word resides inside a paragraph. It only takes up the space of the element (or word) itself. “The boy has red hair.” Think of the word, “boy” as an inline element. It goes with the flow of what’s around it.

A block-level element takes up the entire line, or space, from side to side, within its parent container. Take a look at the paragraph before this one. Now take a look at this paragraph. Notice how they both consume the entire row, from side to side. Block-level elements stack upon one another. It’s as if there is a line break in between each of them.

All in all, each element on a page is considered a box. To start with, if a box is empty on a page, it’s invisible to the eye, meaning a user won’t be able to see it. The empty box would be considered the content area. If we put something inside the content area, such as a sentence or an image, we’d have a visible box. No spacing or formatting would be applied to it.

Before reading the sections below, I suggest you take a quick look at this MDN page because it displays a nice example of what a block looks like and it separates out each level of the formatting I’m going to discuss next.

Padding​

If we wanted to adjust the spacing of our box, we can apply a bit of formatting to it by way of padding. What’s padding? Well, padding inside a box is the space that’s between the content area and the edge of the box itself. It’s a buffer area, that allows the content of a box to distance itself from what’s outside the box.

I’ll give an example of some code below. This is the basic syntax for padding and it will be applied to a div element.

div {
    padding: 10px;
}

In the example above, the content inside the div element would be padded by ten pixels on every side. Next up, I’ll show you how to pad something side by side.

div {
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

The code above would pad the content of the box exactly the same way as the first example. You can see though, if you wanted to adjust the distance of each side, you could easily do that by giving different values for each property. If you have identical values for the top and bottom of the box and two different identical values for the left and right sides of the box, you could write some shorthand code like this:

div {
    padding: 10px 15px;
}

The first value would pad the top and bottom and the second value would pad the left and right.

div {
    padding: 10px 15px 20px;
}

In the example above, the first value would pad the top of the box, the second value would pad the left and right sides of the box and the third value would pad the bottom of the box. If we wanted to continue our shorthand method of padding with unique values for each side, we could do it like this (a shorthand way to accomplish what the second example did):

div {
    padding: 10px 15px 20px 25px;
}

The way this works is like this: each value in the rule above rotates around the block in a clockwise fashion. So, 10px would be the top, 15px would be on the right, 20px would be at the bottom and 25px would be on the left.

Borders​

When it comes to adding borders to our boxes, much of what I covered above applies. The majority of what changes has to do with the additional rules we are about to take advantage of. Let me show you some code below:

div {
    border-width: 5px;
    border-style: solid;
    border-color: #cccccc;
}

As you can see, instead of simply adding a border width, which would be comparable to the rule for padding, we’re able to designate a style as well as color. For lots of great details on these properties and values, please take a look at this page.

What I’d like to show here is not so much about the micro details of all the possible values we’re able to give our properties, but more about how to go about writing the rules themselves. For instance, let’s say we’d like to vary what’s displayed, regarding borders, for each side of our box.

div {
    border-width: 5px 10px 15px 20px;
    border-style: solid dotted dashed double;
    border-color: #cccccc #dddddd #eeeeee #ffffff;
}

Now, as you can see from the code above, we can give each side of our box a unique border property. And just like the padding examples above, the application of these properties flows around the box in a clockwise fashion.

If we were interested in sticking with the same border values all the way around our box, we could skip writing out three rules and simply write one rule in shorthand. It would look something like this:

div {
    border: 5px solid #cccccc;
}

In the above example, I created a border with a width of 5px, a style of solid and a color of grey.

Now, let’s pretend that we only wanted to have a top border. We can accomplish this by using the same shorthand as I just showed, but by adding a few keywords in the property:

div {
    border-top-style: 5px solid #cccccc;
}

Now the box would only have a top border with the values I discussed previously.

Margins​

The wonderful thing about margins is that they are strikingly similar to padding. But instead of padding the content inside our box (squeezing our content area), we’re buffering space outside our box, pushing it away, (or drawing it closer with negative values) from other elements on the page. So, to recap: padding inserts spacing inside the box edges and margin adds spacing outside the box edges.

Let me give you some code examples so you know how to write margin properties:

div {
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}

I think you see where I’m going with this. If you re-read the padding section above and replace all instances of “padding” with “margin,” you’d be all set. There is one thing I’d like to fill you in on though. With margins, if you wanted to center a block-level element on the page, you could do it with a value of “auto.” So take a look at this:

div {
    width: 50%;
    margin auto;
}

In the above example, we have a div element that only takes up half the width of the page. To center it, or give the same margin value on all sides, we use the “auto” value.

Display​

For the final section of this post, I’d like to discuss display values. While I won’t go into minute details here, I will cover a few of the more popular values you may find or might want to use in your own designs. For a full immersion into the CSS display property, please take a look at these resources:

MDN Display

W3Schools Display Property

CSS Tricks Display

Learn CSS Layout: The Display Property

The four values I’d like to go over are “none,” “inline,” “block” and “inline-block.” These are the most prevalent on the web as well as the most useful. In order to keep things simple, I think I’m merely going to give a definition of each value below.

None – When using the none value with the display property for an element, that element will become invisible. All descendant elements will become invisible as well.

Inline – If you apply an inline value to an element that comes with a block-level value by default, you essentially switch the block-level attribute to inline. So, if you were to use an inline value for an H1 element, that heading would fall into the flow of the document, as opposed to following the standards for block-level elements.

Block – The display block value is the opposite of the inline value. This value switches an inline element to a block-level element, giving it the properties of that.

Inline-block – This value changes an element’s default value to an inline-block value. In essence, this value displays an element as an inline-level block container. It maintains the characteristics of a block-level element, but flows with the document like an inline element does.

——

If you have any questions or comments regarding this post, please leave them below.

 

[Newman]

Layout Methods Using CSS​

If something is all the rage these days, it’s got to be website layout. I suppose layout has always been popular, but with Google’s recent “Mobile Friendly Update,” the topic of layout has increased in importance exponentially. I wish I had ridden that wave, because there was, and still is, tons of work to be done bringing the world’s websites up to snuff.

In this post, I’m going to go over some basic principles of website layout using CSS. The whole idea isn’t terribly complicated. It’s just that there are a few areas that you need to keep in your head when positioning elements on a page. If you’re interested in making a website mobile friendly, don’t despair – I’ll be writing a whole bunch of posts on that topic in the future.

Setting Box Dimensions​

Let’s say we’ve got a paragraph of text that’s held inside a div element. The sizing for that div element would be relative to the text that’s held inside. As the page shrinks and expands, so does the width and height of the div element. This is the default way boxes are sized in CSS.

If we wanted to add some more control to the sizing of our box, we can take advantage of two properties. These are:

width: The width property tells the browser what we want the width of our element’s content area to be. Remember, the content area is the innermost area of a box, minus the padding, border and margin.

height: The height property acts the same way as the width property does, but controls the height of the element’s content area. All the same rules apply.

The initial value of both of these properties is auto, meaning (like I discussed above), the width and height will adjust as the browser sees fit, based on the size of the browser window and the content the element is encapsulating.

Both of these properties use length and percentage values to complete the CSS rule. These values would include pixels (for precise measurement), percentage or ems (for more flexibility). Here’s an example of what width and height properties look like:

div {
    width: 100%;
    height: 850px;
}

When laying out a web page, designers often run into an issue when establishing width and height properties for an element. I’ll tell you what I’m talking about.

Let’s say you’ve got a container div with the width of 1000 pixels. That CSS code might look like this:

.container {
    width: 1000px;
}

Now, let’s say you’ve got two boxes inside that container that you want to use as columns on your page. This means that the intended use will be boxes sitting side by side. Take a look at this code:

.container {
    width: 1000px;
}
 
.box-one {
    width: 200px;
}
 
.box-two {
    width: 800px;
}

As you can see, these boxes fit perfectly inside their container element. The problem is that if we fill these two column boxes with content, that content will be touching the very edges of the boxes, making the page look awkward and tightly stuffed. This is exactly what the padding property was created to alleviate.

So, like any good designer, we add some padding properties to our boxes.

.container {
    width: 1000px;
}
 
.box-one {
    width: 200px;
    padding-right: 10px;
}
 
.box-two {
    width: 800px;
    padding-left: 10px;
}

That should fix things, right? Well, if you refer back to what I wrote in my previous post, you’ll see that we’ve actually pushed our boxes out of their intended areas and have left ourselves with stacked elements, instead of elements that sit side by side. Why did this happen? Instead of creating two boxes that total 1000 pixels (800 + 200), we’ve created two boxes that total 1020 pixels (800 + 10 + 200 + 10). This is annoying, to say the least. And padding isn’t the only culprit for messing up our design – borders and margins have the same effect. Remember, padding, borders and margins occur outside the content area of a box, therefore those values get added to the total width or height of our box.

Using Box Sizing and Max Values​

To deal with the oddities that adding padding and borders to a box can cause, the fine folks who created and released CSS3 have included a nice new property for us to use with our designs. This new property is called, “box-sizing” and essentially keeps our boxes sized according to the widths and heights we declare, adding any padding and border values to the inside of the boxes, instead of the outside. So instead of our example above resulting in a box width total of 1020 pixels, the total would remain at its initial 1000, just the way we intended it to. But just as a reminder, any padding and borders you add to your box will decrease the size of your content area.

The most usable values for the box sizing property are:

padding-box: Our initial box size dimensions include the padding values we declare, but don’t include border or margin values.

border-box: Our initial box size dimensions include the padding and border values we declare, but don’t include margin values.

For more background and information on the box sizing property, check out these resources:

Box Sizing | CSS-Tricks

CSS3 Box Sizing Property – W3Schools

Box Sizing – CSS | MDN

If you take a look at the CSS Tricks page, the author offers a tip that can help us throughout an entire design. He uses the HTML and universal selectors to apply box sizing. Here’s that code:

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

By implementing the above code in our stylesheets, we don’t have to concern ourselves with utilizing the box sizing property for every element we’d like to size this way, causing very redundant code.

Max Width​

I’d like to take a moment to talk about two really great tips that will assist you with creating a responsive design for your websites. The first one has to do with the use of the “max-width” property.

Let’s say you set your container element to a width of 95%. That works fine until you see someone browsing your website with one of those enormous monitors. Of course, seeing your beloved site design stretched out three feet wide causes a bit of dismay, so you decide to take advantage of max width and adjust your code to look like this:

.container {
    width: 95%;
    max-width: 1000px;
}

Now, when your site is viewed on a larger monitor, the width grows no larger than a maximum of 1000 pixels. So, what is max-width? Well, the max-width property is used to set a maximum width for an element. It’s value overrides the width element’s value and keeps designs looking great.

The second tip I’d like to share is one that allows your images to become fluid in your layout. If you’ve ever seen a site design with images that shrink and grow, relative to the size of the browser window the site is being viewed on, you’ve seen the max-width property in action. For images though, things are a bit different. In order to make the fluid sizing work correctly, you’ll need to set the image type selector to a max width of 100%. Here’s what that looks like:

img {
    max-width: 100%;
}

Backgrounds​

Color​

Many elements in our HTML pages can hold background properties. I’ll talk about some of them in the next few sections, but the one I’d like to go over first is the “background-color” property. The idea behind the background-color property is pretty easy to grasp. Yes, you guessed it – this property sets the color of an element’s background and uses many of the color data types I discussed in one of my previous posts (scroll down to the “Color Data Types” section). I’ll give you some examples of what types of values you can use below. These are the most popular:

background-color: blue;
background-color: rgb(128, 255, 64);
background-color: #bbff00;

As you can see, the typical background color values used are color keywords, rgb values and hex values.

Image​

If you wanted to go one step further, you can easily utilize an image as an element’s background, instead of a color, by using the “background-image” property. The syntax is slightly different, but it’s still straightforward. Here is an example of the code you would use to apply an image as a background:

background-image: url(https://www.mywebsite.com/background.png);
background-image: url(../img/background.png);

I gave two different examples above. They both use the “URL function” to direct the website visitor’s browser to the specified image to be used as the background. In the first example above, I specified the image using an absolute URL and in the second example, I specified the image using a relative URL. If you aren’t familiar with the difference between absolute and relative URLs, please review this resource.

Image Size​

When setting a background image, the image may not display exactly the size you’d like. Most likely, you’ll either find that you’re image is too small and tiling (by default) or too large and overflowing the element’s bounds. This is where the “background-size” property comes into play. By using the background-size property, we’re able to vary our image size in a variety of ways – actually, quite a few ways. I’ll only go over a small number of them below, but if you’re interested in studying this topic in further detail, please visit the reference I just linked to above.

Here’s some example code for the size property:

background-size: 95%;
background-size: 12em;
background-size: 850px;
background-size: cover;

Now, there is something you need to keep in mind when setting a background image size. When using percentages, our background image size will be relative to its parent container. This isn’t new, I know, because I discussed this idea earlier in this post. I just felt as though it needed coverage.

If your image is too large for your element’s area, you can use the “cover” value to proportionally adjust the image’s size in relation to the element’s size. This means that the background image will shrink to fit the element.

Repeat​

As I just mentioned, the default value for a background image is “repeat.” What that means is that if an image is too small to completely fill in an element’s area, it will repeat both horizontally as well as vertically. Now, this may not be ideal for many designers, so it might be wise to take advantage of CSS’ “background-repeat” property. To discuss this property, I’ll give some code examples below and then talk about them after that.

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

Like the background-size property, there are many more background-repeat values available for use. This is a sample of them. If you’re interested in learning more about the others, please visit the resource I linked to above.

In the previous code example, the “repeat-x” value limits a repeating background to only the horizontal axis, meaning, the image will only repeat left and right. Not up and down as well. If you’d like to limit the image repeating to the vertical axis, you would use the “repeat-y” value and if you’d like to stop your image from repeating all together, you would use the “no-repeat” value. By using no-repeat, you’ll be left with your single image that’s most likely not filling the entire element’s area.

Position​

Let’s say you decided to use the no-repeat value for your background image. If you did this, you’d notice that the image is hanging out up in the upper left corner of your element’s content area. That’s the default position of the image. Again, this location might not be ideal for many designers and if it isn’t, they can take advantage of the “background-position” property, which allows for changing the position of the image in relation to the parent element’s area. I’ll give some examples of this property below and go over what each means below:

background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
background-position: 25% 75%;

Actually, I’m not sure I even need to clarify what the above values accomplish. They’re fairly self explanatory. The only one that may be a challenge is the last one that uses percentages. In that case, the 25% simply moves the upper left corner of the image over to the right by 25% of the parent element’s content area and the 75% moves the same part of the image down 75% of the content area.

Shorthand​

Wow, we went over quite a few background properties in this post so far. If we were to write all these out like I displayed them above, that would certainly be a lot of writing. Luckily, there’s a shorthand property available that cuts out a lot of writing. I’ll give an example of what that shorthand might look like:

background: blue url(../img/background.png) no-repeat center / cover;

This one background property applies all the values we discussed above to a single rule. Now that’s efficient.

Floats​

One of the most popular layout methods available in CSS has to do with “floats,” or floating elements. This method has been around as long as I can remember and I’ve used it in numerous projects. While it does have a few drawbacks, it’s quite effective in what it’s meant to do – and that’s position elements where a designer would like them.

If you remember back to my previous post on the CSS box model, you’ll recall that I discussed inline elements and block-level elements. Basically, inline elements follow each other all the way down the flow of the page, sort of like a snake. These types of elements, if small enough, can travel like words in a paragraph, side by side, until they reach the end of the line. Once that happens, they begin a new line and start all over again.

Block-level elements are totally different. With these types of elements, it’s as though someone hits the enter key every time they type a word. They don’t travel down the page like a snake – they stack on top of one another and create a column, no matter how small the “box” is. That’s the difference between inline elements and block-level elements. Both have their place in page layout.

Sometimes, when positioning elements on a page, a designer wants to place block-level elements next to each other, as opposed to on top of one another. Without the use of floats, this can be a challenge.

Let me give you a code example and when I’m finished with that, I’ll tell you what’s going on:

.left-column {
    width: 48%;
}
 
.right-column {
    width: 48%;
}

Let’s pretend that the two classes above are applied to two div elements. Under normal circumstance, written like this, these two elements would stack above and below one another, even though they only consume less than half of the width of the entire parent element. This is because div elements are block-level elements. Remember, block-level elements take up the entire width of their parent element, no matter the stated width of the element themselves.

In order to work around this issue, we can use what’s called a “float.” By using a float, we can circumvent the traditional block-level challenges and essentially turn our block-level element into an inline one.

So, if we took advantage of the float property, our new code would look like this:

.left-column {
    width: 48%;
    float: left;
}
 
.right-column {
    width: 48%;
    float: right;
}

With this code in place, our layout would be as we would like it – two columns of equal width.

If you’re interested in learning more about floats in CSS, please take a look at these resources:

CSS Float – W3Schools

All About Floats | CSS-Tricks

CSS Floats 101 · An A List Apart Article

Clearing Floats​

As I mentioned above, using floats as a layout technique has its drawbacks. One of those drawbacks is that once you float an element, you take it out of the normal flow of your page. While a floated element will remain situated inside a block-level element, code-wise, the element it’s inside, may “collapse,” meaning the floor of the surrounding element may rise and occupy the same space as the floated element. Its content will likely overlap, hide behind or wrap the floated element. Any way you look at it, it’s not good. It’s sort of like playing with blocks as a kid. Imagine trying to stack blocks on top of each other and instead of stacking, they kept melting into one another.

There is a technique that’s used to, what we like to call, “clear a float.” Basically, we can use the “clear” property to put things back where they’re supposed to be. Take a look at this code:

<div style="clear: both;"></div>

In order to clear a float and allow the parent element to surround the floated elements the way it’s supposed to, all we need to do is add this bit of code after our last floated element. It’s that easy.

There is another method that the pros like to use. Take a look at this code:

.group:after {
    content: "";
    display: table;
    clear: both;
}

Instead of adding an new element to your HTML code like the method I first described, all you would need to do is to add the “.group” class to any parent element that you’d like cleared. This will have the same effect as the first method. So basically, the parent div in our HTML code would look like this:

<div class="parent-element group">
    <div class="left-column">
        // CONTENT
    </div>
    <div class="right-column">
        // CONTENT
    </div>
</div>

 

[Newman]

Learning the Best New Features of CSS3​

CSS3 has introduced many really neat features to the playing field, many of which were once (and still are) handled by image editors or JavaScript. And after toying with much of what CSS is now capable of, I have to say, the lines are getting fairly blurred. It’s almost like “coding” an image editor, if that makes any sense.

In this post, we’re going to take a look at some of these features, many of which relate to text, borders, boxes, fonts, media queries and gradients.

Text Shadows​

In order to take a first look at text shadows in CSS, I’ll give a code example below and then I’ll discuss what’s happening beneath that.

.text-shadow {
    text-shadow: 5px 5px 2px #CCC;
}

Basically, as the name implies, the text shadow property applies shadows to text. The coding of this property in CSS is actually quite similar to giving text shadow values in Photoshop. In both cases, a few things need to be defined.

In the example above, I created a class called, “text-shadow” and applied the text-shadow property to it. I also defined four values of the property. The first two specified properties are required. They define the “X” offset and the “Y” offset, meaning, how far the shadow will appear away from the text in both directions (X is left right and Y is up down).

The next two values are optional. The first is “blur radius,” meaning how soft the shadow will appear. The second is “color,” meaning what color the shadow will display. Like I said, these two values are optional. If the blur radius is not defined, it will default to a zero length value and if the shadow color is not defined, it will inherit the text color value.

So again, in the code example above, the order of the values are x-offset, y-offset, blur radius and shadow color. The first three values are length values and the last one is a color value.

Below, you can find some resources that cover the text-shadow property in CSS:

CSS3 text-shadow Property – W3Schools

CSS3 Text Shadows Generator (Text-Shadow) – Webestools

12 Fun CSS Text Shadows You Can Copy and Paste

text-shadow | CSS-Tricks

Box Shadows​

Box shadows in CSS are similar to text shadows in that they add shadows to elements. In this case though, the shadow will appear around a box, as opposed to around text.

Again, I’ll give a code example to get started and then I’ll discuss what’s going on beneath that.

.box-shadow {
    box-shadow: 10px 10px 15px 20px rgba(0, 0, 0, 0.5);
}

In the example above, the first two values are required. They are, again, the X offset and the Y offset. Both use length values and determine the horizontal and vertical distance of the shadow from the element it’s shadowing.

The third length value is blur-radius and is optional. Just like the text-shadow property, if no blur-radius is defined, it will be set to zero by default.

The fourth value is new to these examples and is called, “spread-radius.” This length value determines how large the shadow can grow or shrink in relation to its element. If this value is left out, it will be set to zero by default.

The fifth value in this example specifies the color of the shadow and is slightly different than the color value of the text-shadow in the first example. In this case, we’re using the rgba color value instead of the hex color value. If you’re interested in how the rgba color value works in CSS, please visit my previous post. Simply scroll down to the “Color Data Types” section.

There is one other value that I didn’t mention in the above example. That value is called, “inset” and must be placed in either the first or last position in the rule. The inset value puts the shadow “inside” and in front of the element, as opposed to “outside” and behind.

Lastly, in my recent post on layout methods using CSS, I remember mentioning that padding and borders add to the actual calculated size of a box. In order to deal with this, the team that manages CSS created a new value called, “box-sizing.” Well, I’m please to tell you that adding a shadow to an element does not affect that element’s width or height. The shadow is actually separate from the element itself, so it won’t push your layout in any direction.

If you’re interested in learning more about or taking advantage of the box-shadow property, please take a look at these resources:

Box Shadow CSS Generator | CSSmatic

CSS3 box-shadow Property – W3Schools

CSS Box Shadow | CSS-Tricks

CSS Box Shadows Effects – Paulund

CSS Shadow Experiments | Playground from ZURB

Border Radius​

If you’re interested in applying rounded borders to boxes and images, then the “border-radius” property is what you want to use. When using the border-radius property, authors can either write out each rule long-handed or take advantage of the short-handed method.

In the example that follows, I’ll show you what the long-hand method looks like:

.box {
    border-top-left-radius:     5px;
    border-top-right-radius:    10px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius:  10px;
}

In the above example, our box will enjoy rounded corners of 5, 10, 5 and 10 pixels respectively. And if you’ll notice, the modification of the corners rotates around the element in a clockwise manner, as I discussed in my post on the CSS box model.

Now, if we wanted to save our fingers from typing so much, we can use the short-hand method to accomplish the same thing:

.box {
    border-radius: 5px 10px 5px 10px;
}

Again, notice how each value will affect the element in a clockwise fashion. And since we’ve got some duplicate values in this rule, we can shorten it even further:

.box {
    border-radius: 5px 10px;
}

The above code will give the same rounded borders as our very first example did.

If we wanted to apply the same rounded measurement to each corner, we could simply use one value:

.box {
    border-radius: 10px;
}

As you can see, when calculating each corner radius, I used a length unit of pixels (I could have also used ems). If we wanted something more dynamic, we could also use percentage.

.box {
    border-radius: 10%;
}

The percentage radius value is calculated based off the dimensions of the element it’s affecting. So if the element is shrinking and growing dynamically on a page, so are the rounded corners.

Are you curious about how designers code image elements to they appear circular on a page? Well, all they do is make sure their element is perfectly square and then apply a 50% border radius to that element. Their code might look something like this:

.box {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

If you’d like to look into the border-radius property even further, feel free to browse through these following resources:

CSS3 border-radius property – W3Schools

border-radius and -moz-border-radius < CSS | The Art of Web

CSS Rounded Corners – border-radius – David Walsh

How to Enable CSS3 Border Radius in Internet Explorer 8 and Below

CSS3 Border-Radius & Rounded Avatars | Trent Walton

Gradients​

Linear Gradients

Gradients are relatively new to CSS and while some folks may not find them entirely useful, others might need to implement them in something or other.

In the most basic sense, gradients allow us to blend two colors on our web pages, beginning with one color and ending with another. The linear-gradient() function accepts many keywords and values, so looking into it further than what I’m about to post below is suggested, if you’re interested in using this feature on your pages to any great extent.

Like I’ve done before, I’ll post a code example and then go over it below.

.box {
    background: linear-gradient(red, blue);
}

In the example above, our element with the class of “box” will display a gradient of red to blue, with red being at the top and blue being at the bottom. By default, linear gradients begin at the top.

If we wanted to reverse the direction of the gradient, we could do so like this:

.box {
    background: linear-gradient(to top, red, blue);
}

If you’ll notice, I added the “to top” keywords right before the color values, followed by a comma. Other directions include “to left” and “to right.” If you were interested in creating a diagonal gradient, you can use the keywords “left top” and “bottom right.”

What’s probably the most flexible method of angling your gradients is using degrees. I’ll show you some code that would create a 45 degree gradient.

.box {
    background: linear-gradient(45deg, red, blue);
}

If you imagine the gradient beginning at the bottom left of your element, it’s easier to get a handle on where you would be pointing it when using degrees. If you created a 0 degree gradient, it would go straight up, beginning at the bottom left. If you created a 45 degree gradient, like the one in my example above, it would point to the upper right corner. Remember, degrees move clockwise, so the more degrees, the further around the clock you go.

Look learn more about the linear-gradient function, please visit the MDN page on the topic.

Radial Gradients

Radial gradients begin at the center of the element you’re applying them to and spread outward. Here is an example of a radial gradient:

.box {
    background: radial-gradient(red, blue);
}

Looks just like a linear gradient, doesn’t it?

In this case, the red color would be in the center of the element and it would blend into blue as it travels to the outward edges.

To give a gradient a perfect circular shape, as opposed to its default ellipse shape, we can add the “circle” keyword. Here’s an example of what that looks like:

.box {
    background: radial-gradient(circle, red, blue);
}

If we were interested in moving the center of the circle to the top of our page, we could use the “at top” keywords to do so. This is what that looks like:

.box {
    background: radial-gradient(circle at top, red, blue);
}

We could also switch out the “top” keyword with bottom, left or right or even add keywords after the “top” keyword. For instance, we could add “right” after “top” and have the center of our circle reside at the top right corner of our element.

If you’re interested in learning more about what the radial-gradient function can do, please visit the MDN page on the topic.

Color Stops

Think of color stops as the colors and positions of those colors that you’ve included in your gradient. If you’ve included only two colors, you have two color stops. If you’ve included three, then you have three – and so forth. Below, I’ll give you an example of a linear gradient with three color stops.

.box {
    background: linear-gradient(red, blue, yellow);
}

In the above example, we have a gradient beginning with red and then transitioning to blue and then yellow. The gradient would begin at the top and end at the bottom. It would also display all color stops equally.

If we wanted to alter the center positions of our colors, we could do so be adding a percentage value after each color value. So instead of our red color center having a position of 0% and our blue color center having a position of 50% and our yellow color having a center position of 100%, we can move those positions to anything we want. I’ll show you what I’m talking about.

.box {
    background: linear-gradient(red 0%, blue 15%, yellow 100%);
}

In the above example, the center of the blue color will now reside at the 15% mark of the entire gradient. I’m sure you can see the potential here. Adjusting all the values and keywords in this section of this post is really the only way to become familiar with gradients, so I encourage you to have at it.

If you’re interested in learning more about gradients in CSS, please take a look at the following resources:

CSS3 Gradients – W3Schools

CSS Gradients | CSS-Tricks

CSS3 Linear Gradients [CSS3 Tips] – Hongkiat

——

If you have any questions or comments, please leave them below.