TechShizz | All posts tagged 'CSS'

Custom bullet points / Unordered Lists HTML

If we want to use a custome image for bullet points in html we can make this work with a bit of CSS.
CSS
ul.myclass {
list-style-image: url('/images/custom_bullet.jpg');
}
HTML
<ul class="myclass">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

CSS3 | Transitions

In order to do transitions in CSS this is the code we need to add to the root selector. For example, if we want to make the logo rotate on hover, we would add this to the 'logo{} selector.

	/* css3 transition */
	-webkit-transition:-webkit-transform 1s;
	-o-transition-property:-o-transform;
	-o-transition-duration:1s;
	-moz-transition-property:-o-transform;
	-moz-transition-duration:1s;
	transition-property:transform;
	transition-duration:1s;

This code only enables the ability for transitions on these properties, so we must specify what we want on the selector we need. 

#logo:hover
{
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
}

 

CSS | Classes and IDs and Span Tags

Classes

We can use Classes and IDs as a way to have multiple types of formatting for the same tags, so we might want a red paragraph and a blue paragraph. Classes can achieve this.

<p class="Red">This is my Red paragraph</p>
<p class="Blue">This is my blue paragraph</p>

Here is the CSS

p {
color: black;
}

p.Red {
color: red;
}

p.Blue {
color: blue;
}

If we want to make a class global (make it apply to ALL tags) we can simply remove the tag before the dot like this:

.Blue {
color: blue;
}

Now everything the class="blue" will now be formatted with the style we dictate here.

IDs

IDs are very similar to classes, except they are expressed in CSS with a # symbol. Also, IDs are unique and can only be used for one element.

#ID1 {
color: Green;
}

Span Tags

We can use span tags to format small snippets of single words inline with CSS like this.

.spantag {
font-weight: bold;
}
<span class="spantag">This will be bold</span>



 

CSS | Internal, inline and external CSS

Internal

Internal CSS is where the CSS code is embedded within the page that it is being used. We enter the CSS inside 'Style' tags just before the closing 'Head' tag.

<style type="text/css">

h1,h2 {
color:green;
font-family:Arial;
font-size:50px;
}

</style>

 

Inline

We can use inline styles to change the style of a single paragrah, heading, div or any element like this.

<p style="color: red; font-family: arial;"><This is some paragraph text </p>

 

Exrernal

The most common and effective way to use CSS is with an external style sheet. This single file will keeps the whole website consistant.

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