CSS - Resources

I am using the term "items" to mean HTML Elements.

Selectors are discussed pretty early on in the CSS Schools tutorial, so I guess they are important. Colors (Colours), Backgrounds, Borders, Padding and Margins follow.

• Selectors
• Animation - adding some "modern" stuff

Universal Selectors

The Universal Seector is the * character. It can be used to select many elements, I am using it to select a box-sizing

Class Selectors and definitions

These are defined in the css file with a starting "." (full stop) - for example .header and .menu

Multiple Selectors

You can specify (define) single and multiple HTML Selectors and specify how they are to perform within a class.

For example .menu ul - .menu li and .menu li a

This means you can specify (as in my rwd.css file) the menu buttons. The ul has a list-style-type of none. The menu items .menu li have specified text and background colors - margins and padding - the text is aligned centrally and the buttons have a shadow.

Further to this the <a> (anchors) have no text-decoration and display as "block". Hover behaviour is also specified.

Above is an example of a single menu button taking its major style from rwd.css plus additional style to centre the button in the content and to set the width to 200px.

The W3C Schools website has many examples of alternative menu systems. Things have progressed a lot since I started with this research. There are examples of dropdowns implemented in CSS. I had looked at this in the past and decided not to go that way.

Attribute Selectors

An Attribute Selector in my main css file:
[class*="rcontent-"] {
float: left;
padding: 15px;
}

The essence of this is that I think that what happens here is that class with a Universal Selector (^) matches with "rcontent-". If it does the padding and the float are applied to the class.

If I float right the menu will appear on the right of the screen. I can also reduce the padding but I think 15px is about right.

What the W3C Spec/Recommendation says:

Selectors allow the representation of an element’s attributes. When a selector is used as an expression to match against an element, attribute selectors must be considered to match an element if that element has an attribute that matches the attribute represented by the attribute selector.

Heirarchy

Children and parents - Specificity Hierarchy

I need to look at this!

Javascript and getting css to work

My responsive bottom menu and the expandable page sections have their css behaviour controlled by some Javascript.

Related Pages

• CSS Selectors
• CSS Specificity
• Selecting a single element - or an HTML Collection
• CSS Psuedo Class
• Tooltips
• The onScroll Event
• CSS !important - over-ride rules
• My RWD css file - where I started to get into css in depth
• CSS box-shadow - an example based on my current header
• My use of shadows on elements
• Documentation - how I try to do this
• Formatting lists
• Modal displays and forms etc
• Bootstrap
• CSS Layout - Float and Clear
• CSS Display - Block
• CSS Layout - The position Property
• Styling Elements with a specific Id - this needs to be added to the template for the Parish Council
• CSS Animation
• Adding a URL to a Clipboard Copy
• CSS In-line Style
• Styling Hyperlinks

External Sources

• CSS Tutorial - 🔗 - W3C Schools
• css Selectors - 🔗 - the universal selector is discussed here
• Attribute Selectors 🔗 - W3C
• W3C Spec/Recomendation on Attribute Selectors - 🔗 - the W3C recommendations are not the easiest read!
• CSS Specificity - 🔗