Home » CSS
Category Archives: CSS
01 Website design CSS 3 Primer
CSS is an abreviation of Cascading Style Sheets. It’s purpose in web design is the HTML elements will appear on the chosen media. For example a printer, a PC display or mobile phone. Maintenance or updating of a complete website design can be changed by editing one file or stylesheet, often named style.css, but can […]
Using CSS 3, how can I make my website logo image fade in
Let’s assume your image has an id tag called logo in your html <img id=”logo” src=”/img/mylogo.jpg”> All you have to do is add this CSS to your style sheet, the duration of fade in is 3 seconds. Obviously you can set the starting opacity to 0, i.e. invisible or to something like 25%, e.g. opacity:0.25, […]
Sub-sub menu Twenty fourteen secondary menu is not aligned
A work round for where your sub menus in Twenty fourteen secondary menu is not aligned, detached or overlaps. If you have customised your 2014 secondary menu and the sub or sub-sub menu doesnt’ work then add a style change in your twenty fourteen child’s CSS. Simply change the xxxpx width of the CSS “class […]
Setting a different header image on a mobile phone
This method can be used both in a WordPress website or a non-WordPress web design. Basically, I’ve made here an assumption that the website design header image is displayed as a background image in a div called header. The need for any positional information is ignored here for clarity. Assuming the header image is 1080 […]
Using CSS3 @media Rule to produce a responsive WordPress website design
Firstly, you can set style by selecting a particular style sheet for different screen resolutions or media types and devices. <link rel='stylesheet' media='mediatype and|not|only (media feature)' href="stylesfile.css"> However, the @media is a CSS rule that allows you to set different styles for diferent screen resolutions or media types/devices. CSS3 uses media queries to check out […]
CSS using ‘margin auto’ but won’t centre
So you are trying to be a good web developer and using CSS to centre an element within your website design. You are using something similar to below to centre your image or div and it refuses to centre? margin:auto; margin: 0 auto; Basically if the browser is told how big it is, then it […]
Changing WordPress Twenty Fourteen’s navigation hover background
Simply add the following to your WordPress child menu theme’s style.css file. The colour here is set to dark grey (#333) – simply set the background colour to your choice. .primary-navigation ul ul { background-color: #333; } .primary-navigation li:hover > a, .primary-navigation li.focus > a { background-color: #333; } .secondary-navigation ul ul { […]
Centering WordPress Twenty Fourteen’s webpages
This is a useful trick when using the Twenty Fourteen theme to develop websites. In your WordPress website’s ‘child theme’ style sheet add the following CSS .site { margin: 0px auto; } This sets the top and bottom postions of the WordPress website you are developing to zero pixels and the left margins to […]
How do I apply multiple CSS classes to a HTML tags when website designing?
Applying the website design classes To use more than one class inside the HTML tag in the class attribute, simply use both separated by whitespace. For example this uses two classes called class1 and class2. <div class='class1 class2'> Your website design code </div> Defining the website CSS classes To have some CSS restricted to […]
What’s the best way of using CSS to affect the look of a WordPress Website?
I think the best way is to store your CSS style information that will override the website’s theme style is in the file style.css. This file should be in the child theme’s folder. The look of your website design is controlled by CSS. So if you have a certain style of paragraph you use on […]