Posts Tagged ‘stylesheets’

Myth is a CSS preprocessor that allows you to write easier-to-manage CSS, similar to LESS and SASS. The difference with Myth though is that you are writing “pure CSS” while still using features that will be available in the future (such as variables and maths). It then acts as a polyfill for browsers that do not support it.

You can see the full spec on the Myth website.

Should you use it instead of LESS and SASS? In my opinion, no. Not yet anyway. While it does offer some of the features, it does not offer the really useful ones yet. Nested roles and mixins are the big winners for me. Myth does not have these. Nor does it support includes.

It’s one advantage is that it does fill in prefixes. So if you are using flexbox, you can just have a flexbox entry, rather than the endless series of browser-targetted prefixed flexbox commands you currently have to use. You can do this using mixins in LESS and SASS, but it is messier than the way Myth implements it, where you just type the standardised CSS property.

While possibly not that useful right now, Myth is one to watch for the future.

A lot has changed since I wrote my first line of CSS – which is probably going on a decade ago now. Other things have been there all along, but have sometimes been overlooked or neglected. Below is a collection of CSS that it is easy to forget exists.

Selectors

Obviously you can use . # * etc, but there are actually far more options. As well as chaining them (p, div) and specifying them being inside each other (p div) you can also specify they must be the parent (p > div) or immediately after one another (p+div).

As well as checking attributes (input[type=text]) you can also do contains (input[title~=something]) and starting with (input[type|=something]).

We’re probably all familiar with :visited and :hover states, but there are actually dozens you can use – :focus, :first-letter, :first-line, :first-of-type, :last-of-type, :only-child, :empty, :enabled and “checked just to name a few.

Sizing in rem

It’s good practice to use em sizing to make everything relative – that way if a user scales up the page then everything stays in proportion (though modern browsers tend to handle this well anyway). But isn’t it annoying that it stacks? A 2em value inside a 2em value will give you a font size of 4.

You can solve this by using rem. Specifying 2rem will make it 2 x the root (html) element of the document – so you can make it all relevant to that and not worry about nesting.

Gradients

You can add gradients as backgrounds and even create complex patterns with multiple colours starting and stopping at different points.

background-image: linear-gradient(bottom, #22E7D2 12%, #3EFFFC 56%, #2FAB24 100%);

Shadows

It’s simple to add a drop shadow to an element.

box-shadow: 10px 10px 5px #888;

You can add it to text as well.

text-shadow: 2px 2px #ff0000;

Box sizing

Tired of having to work out what width you want something to be, then taking off the padding and the border? Sometimes maybe you don’t even have the option to do that because you want it to be 100% wide. Box sizing to the rescue. Set the box sizing to border and it will calculate the width factoring these properties in.

box-sizing: border-box;

Border radius

Want some nice rounded corners? Easy.

border-radius: 5px;
border-top-left-radius: 3px;
border-bottom-right-radius: 10px;

Clipping

You probably shouldn’t clip as it means you’re sending an image to the browser that is too big and then cutting it down. However, the functionality to do it does exist within CSS>

position:absolute;
clip:rect(0px,70px,100px,0px);

There is a background-clip property too.

Columns

Want to present your text in a series of columns? Theres a property for that.

column-count: 3;
column-gap: 5px;

Still writing regular CSS? Pfft, you’re living in the dark ages! These days it’s all about two new technologies that are almost identical, so I’m going to discuss them in the same post.

The idea is dynamic stylesheets – bringing concepts we use every day in regular programming and implementing them in stylesheets to avoid duplication and make everything cleaner, nicer and more up to update with current paradigms.

So what can you do with these tools? Here is a quick overview…

Variables

Using a colour everywhere that you might want to change later? No worries, just save it as a variable and if you do need to change it at a later date, you just update the variable and it will be changed everywhere.

@myColour: #FFCC00;

.header { background: @myColour; }
.footer { background: @myColour; }

Mixins

Inheritance! What a sexy thing to have in CSS. No longer do you have to place loads of DOM references in lots of different places. Now you can just write it once and included it wherever else you need it.

.bigBorder { border: #FF99CC 10px solid; padding: 5px; }
.header { .bigBorder; background: @myColour; }
.footer { .bigBorder; background: @myColour; }

Nested rules

This one is a huge time saver! How many times have you had to reference half a dozen elements in one DOM reference? Probably very rarely, but certainly two or three tags is the every day reality. No longer though, because you can now nest your rules.

.header {
	.bigBorder
	
	a {
		font-size: 200%;
	}

In this example, the 200% font size will only apply to a tags inside .header, just as if you had done .header a in your DOM reference.

Operations

Want to make a header colour slightly darker? No worries, just add two colours together.

@mainColour: #FFCC00;

.header { background: @mainColour + #333333; }

But these are just a few of the features of these languages. They allow you to do a lot more – including things like full blown functions that you can pass parameters into, guards and much more.

The main difference between LESS and SASS is that LESS is a client-side JavaScript library (although has now been ported to Node) – you send the browser your .less file and include a JavaScript library that converts it. Meanwhile, SASS is a Ruby Gem that compiles a stylesheet to send to the client each time you edit your .sass file.

To find out more, visit the LESS and SASS websites.

You can easily add CSS styles to your text. All you need to do is add a <p> style.

p {color: #000099; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif
}

Now whenever you have text inside the paragragh tag, it will use the above style. You can also add special headings.

p.h {color: #CC0000; font-size: large; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif
}

To use this in your text just add the code:

<p class="h">Some Headline</p>

You need to use CSS Styles for your texr as the W3C are cutting out the <font> tag from XHTML 1.0 Strict upwards. Although you can still use it in XHTML 1.0 Transitional, we think this will not be the case in later versions.

You can also use CSS to change the font of other tags such as your links. These include rollover, hit and visited pages. Take a look at this code that can be copied and pasted staight into your HTML pages.

<Style>
<!-- A {text-decoration: none}
A:hover {text-decoration: underline; color: #0DC450} -->
</Style>

This produces the blue to green underlined rollovers on this page.

There are 3 ways to add CSS into your web pages:

* External Style Sheets
* Internet Style Sheets
* Style Tags

External Style Sheets

These are style sheets saved as .css. You then link these into your page using the following tag.

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

This style sheet is then included in your page when its in the browser.

Internal Style Sheets

This used a style tag, as you may have seen in serveral tutorials. Here is one we have for image rollovers.

<style type="text/css">
<!-- A {text-decoration: none}
A:hover {text-decoration: underline; color: #0DC450} -->
</style>

They are seperate from everything else but are included in the heag tag of your web page.

Style Tags

These are included inside your actual element. For instance if you wanted to change the border, of just one table, you could use the following code:

style='BORDER-BOTTOM: #84B953 1px solid'

This would just be included in the actual tag of your HTML element. Eg:

<table style='BORDER-BOTTOM: #84B953 1px solid'>...</table>

CSS stands for Cascading Style Sheets.

CSS Styles are used to define how to display HTML elements. Styles are normally stored in internet or external style sheets. Styles were added to HTML 4.0 because developers disliked having to define every bit of text using tags like <font>. External CSS files are stored using the .css extention though they can be saved in HTML format. Multiple style definitions will cascade into one,

External style sheets can save you a lot of time, as you can change the look of the page, just by changing the external file. CSS Style Sheets are supported by both Nescape 4.0 and Internet Explorer 4.0.

CSS cascades

You may have multiple style sheets saying different things in your document. In this case they will be ordered in priority as follows:

1) Inline Style Sheets (inside an element)
2) Internal Style Sheets (inside the head tag)
3) External Style Sheets
4) Browser Default

So for instance an inline style tag would overrule and internal style sheet, but a browser default would not overrule an external style sheet.