Home » An overview of CSS 3 Part 1

Share This Post

CSS

An overview of CSS 3 Part 1

What is CSS?

CSS separates structural and semantic content from formatting or presentation. HTML is the structure, CSS is the presentation and JavaScript is the behavior. The presentation is the size, position, color, font etc. It’s the layout and looks. Rules make up style text. Rules can be placed within an HTML tag itself with “style” attribute, within HTML<style> tag, or better yet within style files that you link to your document. A rule is made up of a “selector” and a set of properties.

More CSS, HTML and HTML5 articles

CSS IntroHTML Intro | HTML 5  | CSS Tutorial Site

Of course the selector selects which parts of the page to alter in appearance. The rules are simply name:value pairs. And selectors can be simple or complex by using combinators. A combinator is a symbol or space between element selectors to narrow the selection. By element I mean HTML elements. We also have what are called pseudo elements and pseudo classes. These are additional elements and some CSS classes that are not part of HTML yet apply to the HTML. And there are class and id selectors also called global attributes because they can be applied to any HTML element. You may only have one ID attribute per HTML element and it must be unique. You may have the same class attribute on many HTML elements and even more than one class with the same element. Selectors are very powerful and give you complete control.

The Cascade

Cascading water fall
Cascade

C in CSS stands for cascade. Specificity is part of this cascade and means more specific rules override more general rules. Location of the rule means it overrides the same rule somewhere else. This having rules in different places more general or specific is the cascade. To be good understand this and selector/combinators well. Finally block or box design is what its all about. You have box models. There are two types. Inline, such as withing a sentence or block such as a paragraph. Your developer tools within browsers can help to identify these boundaries. Enjoy learning and using all of this in your web development and efforts will pay off.

CSS Cascade Illustration

CSS Syntax

Shorthand Properties

This selector { property:value; } would be the basic syntax where you can have multiple properties listed. So prop:val; prop:val; prop:val; etc. The property syntax is simple until you use shorthand or combine settings into one line. Shorthand Property Article Basically you may provide top,bottom, left and right property settings on one line. this could be 2 settings such as top/bottom and left/right or four settings top,bottom,left,right. Can also be 3 value top,left/right,bottom. Other properties might be combined with this as well on the same line. Each value separated by a space.

Comments and Inheritance

And a comment is just like C/Java/JavaScript and possibly a few other languages /* some comment */ . Elements inherit some properties from parent elements. Use ‘inherit’ property value to force an element to inherit from it’s parent element.

EM PX PT

Another thing about property settings is that you may specify values in different ways. For example em, px, or pt. Em explained article. Em is a scale up or down from base font size. This base might be and is usually 16px(Pixels). So 2em would be 32px. Em values are inherited. PX are pixels. This means that the size of something is based on the resolution and DPI (dots per in). Printers and screens have differing DPI. Also different devices have differing DPI, such as desktop, tablets, phones or even something like Raspberrypi. PT(points) means 1/72 of an inch.

Another typographic term is pica or 1/12 of an inch. But with computers we should be talking points and DPI. So if your printer or screen resolution were indeed 72dpi. Then then a point would be 1 dpi. The web page default is 16px. Which on our 72dpi device would be 16points. But on a 144dpi device 16px would become 8points. Most web developers are sticking more closely to EM’s now days for more scalable and responsive web sites, though there might be occasions where using pixels or points would be best.

 CSS Color Property Values

With color we can define an RGB(RGBA)(Red/Green/Blue/Alpha) value. We can use one of 127 predefined colors. Also use HSLA(Hue/Saturation/Lightness/Alpha). Alpha means transparency vs opacity where 0 or 0.0 is 100% transparent(clear) and 255 or 1.0 is 100% opaque(solid).

Hue and Saturation

The hue value is an angle in the color wheel measured in
degrees from zero to 360. The six major colors are red,
yellow, green, cyan, blue and magenta and they’re spaced
out by angles of 60 degrees. Saturation means black and white vs color. 0 or 0% is full gray scale with no color. 255 or 100% means full color. Lightness is black vs white. 0 or 0% means full black and 255 or 100% means full white. In some graphics apps you might see brightness which is simply how much black is in the color. You might think of it like this, 0%to50% is brightness and 50%to100% is lightness. Though the setting is called Lightness.

Color Values

Two common ways to set a color property are, ‘someproperty:#0cfae2;’ or ‘someproperty:#000000’ for pure black or #FFFFFF for pure white. So what is this 6 digit setting with letters and numbers? It is called hexadecimal or base 16. A byte is based on binary which also can be represented in a short hand form using base 16. So in decimal we have 0to9 then 10 In hexadecimal you have 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f and next rolls over to 10. In binary 0,1 and then 10. 0 to 255 decimal can be shown as 00 to FF hexadecimal.

The next most common way to show a color is ‘someproperty:rgb(0,0,255)’ where we use decimal for the values of red/green/blue. Or rgba(0,0,255,100)’ when using transparency. You can use only 0-255 whole decimal for r,g,b and either % or decimal fraction with alpha. With HSL(A) ‘someproperty:hsl(20,50%,50%) or ‘someproperty:hsla(0,23,240,110)’ and ‘someproperty:hsla(50,10%,20%,0.8)’. You may use decimal 0-255, 0-100%, or 0.0 to 1.0 for settings. Hue must be whole decimal 0 to 360, saturation and lightness must be percentage and alpha can be percentage or fraction decimal 0.0 to 1.0. Lightness is sometimes called luminosity.

Contrast

Two much or two little contrast between text color and background makes text hard to read. Use gray on light backgrounds or off white text on dark backgrounds is best. Note how I used contrast in the illustration of the cascade.

Selector Syntax

Selector syntax can be broken into parts such as elements, combinators, id, class, attribute and pseudo-element or pseudo-class. * means everything. A common thing to do is to set all margins and padding to 0 using * thereby clearing the browser default formatting. First we have element selectors. This is simply element names separated by combinators. This includes pseudo-elements. HTML5 Article will tell you about HTML elements.

Combinators

Combinators include space (a decedent),  > a child, ~ general, any or all sibling, + adjacent sibling. What is this child, sibling talk? In tree data structure lingo, we have nodes and leaves. Nodes have parents, ancestors, siblings, children and decedents. Research tree data structures. HTML DOM is a tree data structure. Select Oracle is a web site that will tell you what your complex selector with combinators mean in plain English.

ID and Class

Class selector would be an element selector with .className added. I.e. ‘li.cheap’ might select list items that are cheapest. An HTML tag may have more than one class in the class attribute separated by commas. And the same class may be used on many HTML elements. ID is designated with #, which is also how you define on page links, a link that links to something further down on the page. So li#bright might select a list item that has the id of bright to be highlighted. All ID’s must be unique for the HTML tag it is assigned to for the entire page.

Attributes

[name=”value”] will select an attribute. input[type=”text”] would select form input boxes that are text input. The = sign can narrow the selection more if changed to one of the following. Tilde equal ~= whitespace separated words, one of which matches value. Pipe equal |= must start with whole word or whole word followed by – dash. Caret equal ^=  begins with the value. String equal $= ends with the value. Asterisk equal *= contains the value.

Pseudo Elements

These are not HTML elements but act like HTML elements that the browser makes up. Pseudo means fake or not real. Syntax is element::name such as p::first-line will select the first line of text in a paragraph. ::first-letter selects first letter in a line to make a different colored, larger letter with different font even. ::after and ::before selects an element in which you want to insert some content just before or just after it. ::selection matches portion of the element that has been selected by the user. Mozilla Pseudo Element Docs

Pseudo Classes

Pseudo classes are like classes assigned by the browser to certain elements. Syntax is element:name Most common ones are the link pseudo classes such as. :link, :visited, :hover, :active :focus. a:link selects all unvisited links. Mozilla Pseudo Class Docs has a large list of most standard pseudo classes.

Specificity and the Cascade

Every CSS rule you make has a specificity value placed on it. Browsers base this value on the composition of the selector, it’s location in the style sheet and the location of it’s style sheet relative to other style sheets. The cascade is where rules override other rules based on where they are. If a rule overrides (meaning is given more importance and the one to be used)  another rule it has a higher specificity value. The following is a list of rules and sort order. Rules are sorted based on importance in ascending order. See Specificity Wars (Like Star Wars) or Specifishity (Like Fish) and Mozilla Specificity

  • Sort Order
    • Find all declarations that apply to the element
    • Does selector match this element?
      • Sort according to importance in ascending order of precedence where later has precedence over prior.
        • Normal
        • Important
        • Origin
          • Author
          • User (You)
          • User Agent (Browser)
            1. User Agent Declarations
            2. User Normal Declarations
            3. Author Normal Declarations
            4. Author Important Declarations
            5. User Important Declarations
      • Sort rules with same importance and origin by specificity of selector
        • More specific selectors will override more general ones (General to Specific below)
          • *
            • Element Selectors (Pseudo Element)
              • Attribute Selectors
                • Class (Pseudo Class)
                  • ID
                    • Inline within HTML style attribute
                      • !important
      • Pseudo Elements and Classes are treated as normal real elements or classes.
      • Next sort by order in which the rules occur
        • Latter rules win
      • Imported style sheets from within an external style sheet overrides
  • Applying rules synopsis
    • Find all matching target elements and apply styles.
      • Browser applies it’s rules first
      • User Specific Sheets next if any
      • Author Styles
        • More specific rules override more general rules
        • If two selectors have same score later one wins
      • Important declarations last

Important Rules

Rules defined in this way { property:value !important }  means it will win over all rules. The exception is where the same rule occurs somewhere else with and is also !important. In that case the last rule wins. It is funny that I have a difficult time reading that as important. Usually in the programming languages I have known ! exclamation point means logical not! So when I see this it means to me NOT IMPORTANT!  Another exception is that user’s (you) important rules will win over author’s (the guy that makes the web page) important rules.

Text or Fonts

There are two types of properties. A property that directly affect the font or one that affects the text no matter which font is used. Lets discuss some font terminology. Cool Font Terms Article. Leading is the space between lines from ascender or highest point on characters to bottom of descender on the above line. Kerning is the space between letters. In CSS you may set line-spacing, letter-spacing or word-spacing. Capital height, x height (height of lowercase letter x) and baseline (bottom of text just above descenders like letter g) are things to be aware of.

Font Face

Font face would be the typeface or style of the “Font” you want to use. Generally you list a font stack. This is where you list first the more specific font family to the general font family last, separated by commas. The browser will fall back to the more general font if needed.  If a browser can’t find the more specific font it defaults back to a prior more general font in that family. If a font name is more than one word put it in ” “.

Font families include Serif fonts which are considered easier to read in long passages of text. Serifs are another term which are extra details on ends of strokes on main letters. Sans fonts have straight edges and are cleaner to read on smaller text. Mono spaced fonts are fixed width and good for use with computer code. There are Cursive fonts that mimic human hand writing either script or print. Fancy fonts are usually used with headings or in graphics.

What fonts may you use?

General font families are installed with the windowing system on the client’s machine. You may use any font you have a license to use on your computer, if the license says the font can be downloaded. Use licensed fonts from font service web sites. Adobe Fonts Google and other sources may supply fonts that can be linked to. http://fonts.google.com Any fonts you have license to use can be used in images.There are many free fonts on the web.

Common types of font files

  • TTF (True Type Fonts)
  • SVG (Scalable Vector Graphics)
  • WOFF (Web Open Font Format)
  • OTF  (Open Type Font/CFF(Compact Font Format))
  • Bit Mapped Fonts?  I don’t know, maybe if the font had been converted to some other type of fixed width font.
  • Many font file types listed here.

Some web sites to note are Font Squirrel, Open Font Library, Google Fonts. Different browsers support different fonts and you may have to supply different font file types, similar to what you might do with video or audio content. Font Squirrel can convert font types and generate CSS code for the @font-face rule. Translate Font Converter is another @font-face generator site. Online Font Converter is another font converter site.

Font Styles

Normal styles you might think of would be normal, bold, italic, oblique. Oblique is like italic where the normal font is simply slanted. Italic is a different font actually. Transform text to upper case or lower case. With all uppercase and especially uppercase bolded text should have letter spacing increased to improve readability. Text decorations include  none, underline, overline, linethrough, blink. Blinking text should be avoided as it is poor design an annoying.

Text Shadows

Property text-shadow places a shadow to the left or right, top or bottom. Set blur amount and color with this property as well.

Text Align

Horizontally you may left justify, right justify, center or justify. With vertical aligning align to top, middle, bottom, baseline, sub, super. Values can also be specified as a %,length in cm or px(pixels). Pixels can be + for up and – for down, or + for right and – for left. Text indentation with text-indent and a positive or negative em or px value will indent the first line.

Text Indent

Property text-indent will indent the first line of text within an element. Use em or px and with a + or – value to set indention.

Borders Margins Padding

As stated earlier CSS uses a box model for organizing the parts of the web page. All boxes have a border of at least 0px wide which is not visible. Border size is expressed in px. There is thick, medium and thin settings. Border styles can be solid, dotted, dashed, double, groove, ridge, inset, outset. You may set borders on top, bottom, left or right and may use shorthand. Can set border color in RGB or HSLA forms.

Margins are gaps between two adjacent boxes. Set left and right margins to auto will center element in the box. Padding space between the border and contents of the box. Border padding and margins are added to any specified width settings. You may use px, pt, ems or % for settings but usually % or ems are used. Developers are more and more using ems for responsive design for varying devices. A responsive web site is one that adjust the layout and view for the device and screen size well. Tip ‘* margins 0 padding 0’ clears all browser defaults in the document.

With vertical adjacent boxes, if one touches the other the larger margin value will be used. When both margins are the same only one value is used. To center a box on a page set it’s width or it will fill the page left to right.

Display and Visibility

Boxes display inline, block or inline-block (which is a inline flow with some block features). Display of none means it is hidden as if not on the page. Visibility means either visible or hidden (leaving the space blank).

Image borders, Shadow Boxes and Border Radius

Border images given with URL can take a single image and slice it into 9 pieces like the face of a TicTacToe board. Corner images are corners that connect to sides. Sides can stretch or repeat. So you give it a URL, where to slice the image and what to do with the sides. Border width must be more than 0 for the image boarder to be shown. Shadow boxes are like text shadows. Border Radius makes a border curved. You may set each corner separately and use px or ems for settings.

Images and Background Images

Images are inline by default and should be made block elements to center then properly. One cool trick is to have a class of “small,med,larger” each set to predefined image sizes. Though images should be resized with photo or pixels editors most of the time to save on storage and load time. Image can be floated left or right to have text properly wrap around the image. Use set margins left and right to auto will center the image. Can also do display:block and align:center.

Background images repeat by default. They are last to load and if large make a page seem slow to load. Should generally use appropriate background colors behind images. If dark use dark color and light light color etc. Repeat images in x direction or y direction or both. Use ‘norepeat’ setting to turn off repeating. Attach images as fixed or scrolling. Fixed would mean text moves over still image. Below is a chart that shows border positions. If you specify only one value the second defaults to center.

Border Positions left-top, left-center, left-bottom, center-top, center-center, center-bottom, right-top, right-center, right-bottom

Border Positions

Of course you may set any background color you like. Use shorthand for multiple settings. There are a few interesting techniques to mention. A sprite is an image that has more than one image in it. For example a button image row with 3 images left to right. Using a bit of JavaScript magic a hover slides it to hover image and a click slides it to clicked image. For example normal text, changes color on hover, looks sunken on click.

You  can make a image with a gradient for background. CSS3 supports a gradient property. Check for browser support though. Can I Use Use fallback technique for browsers that do not support gradient. Can specify the angle an type of gradient in some browsers.

Next Articles

In this article I gave you a good starting point. In the part 2 I will cover Lists, Tables and Forms. In part 3 I will cover some final thoughts and tips, layouts, frameworks and more. I will also recommend a few books.

 

 

 

 

Share This Post

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>