Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x

CSS

40K

Solutions

15K

Contributors

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

Share tech news, updates, or what's on your mind.

Sign up to Post

Lists and Links
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
0
Free Tool: ZipGrep
LVL 10
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Flexible Layouts
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
0
Introduction to CSS (Part 2)
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors.

1. Create your external css file by saving it as style.css then set up your style tags


<style>

</style>

Open in new window

2. Reference the nav tag and set your properties.


nav {position relative; left: 0; top:10%;}

Open in new window

3. Set the reference for the UL element and styles for it as well as setting the background color to green


nav>ul {list-style-type: none; width:100%; height:1.5em; padding:0; margin:0; background-color:#00FF00;}

Open in new window

4. Position the list elements in line on one row with a width of 60 pixels making sure to give 5 pixels of padding in between


 nav>ul>li{display:inline; width:60px; padding:5px;}

Open in new window

5. Set a class selector to be used on the links with no underline for the link a background color of purple and text color of white


.navlinks{color:#ffffff; background-color:#FF00FF; text-decoration:none;}

Open in new window

6. Setup your navigation as such:


<nav>
		<ul>
				<li><a class="navlinks" href="#">Home</a></li>
				<li><a class="navlinks" href="#">Contact</a></li>
				<li><a class="navlinks" href="#">About</a></li>
		</ul>
</nav>

Open in new window

0
 
LVL 9

Expert Comment

by:Rowby Goren
Hi

Van you post a link to part one of your series,

Thanks

...RRowby
0
Introduction to CSS (Part 1)
The viewer will receive an overview of the basics of CSS showing inline styles.

1. In the head tags set up your style tags


<style>

</style>

Open in new window

2. Reference the nav tag and set your properties.

nav {position relative; left: 0; top:10%;}

Open in new window

3. Set the reference for the UL element and styles for it to ensure no browser defaults are present

nav>ul {list-style-type: none; width:100%; height:3em; padding:0; margin:0;}

Open in new window

4. Position the list elements in line on one row with a width of 60 pixels

nav>ul>li{display:inline; width:60px;}

Open in new window

5. Create your navigation menu as follows


			<nav>
				<ul>
					<li class="mysite"><a href="#">Home</a></li>
					<li class="mysite"><a href="#">Contact</a></li>
					<li class="mysite"><a href="#">About</a></li>
				</ul>
			</nav>

Open in new window

0
Using Google Font API in CSS
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS

1. Go to the Google Fonts website at google.com/fonts

2. Browse or search based on font properties or name to find a suitable font for your website. Preview custom text by typing in the "Preview Text" box and adjusting the size

3. To select a font for usage, click the blue "Add to Collection" button

4. You can select more than one font to create a font suite for your website but this will increase load time

5. Once all fonts are selected, click the "Use" button in the grey "Collection" box

6. Select the styles and character sets to embed in your website. More styles will increase load time, so only select those you will use

7. Copy the "Standard" code and paste it into the <head> of your webpage. If you're using a master stylesheet, you can open the CSS referenced in a new window and copy the CSS into your master stylesheet

8. Integrate the font into your CSS by defining any element's "font-family:" property as the font name

9. For maximum compatibility, define a back-up font after the Google font's name

0
Rounded Corner Effect in CSS
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property

1. Begin with a normal styled element such as a div

2. To style all four corners of the div to be the same degree of roundness, use the "border-radius:" property and type a pixel value. The larger the number, the rounder the corner will be. A value of 0px will lead to a 90-degree angled corner

3. To style all four corners to have different degrees of roundness, type four different pixel values

4. The four different pixel values will style the corners clockwise starting from the top left. The first value will style the top left corner, the second value will style the top right corner, the third value will style the bottom right corner, and the fourth value will style the bottom left corner

5. For maximum compatibility, copy your border-radius property three more times, each time with a different compatibility prefix. You should end up with border-radius, -moz-border-radius, -webkit-border-radius, and -o-border-radius

0
Drop-Cap Effect in CSS
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS.

1. In CSS, create a new paragraph class by typing "p.fancy"

2. Then, to style only the first letter of the first sentence, include the pseudoselectors ":first-child:first-letter"

3. Style the color of the dropcap using the "color:" property

4. Style the size of the dropcap using the "font-size:" property. A good size is 1em larger than the normal font-size, or 150 to 200% times as large as the normal font-size

5. To ensure the dropcap is in line with the other text, style the line spacing using the "line-height:" property

6. Create space between the dropcap and the rest of the paragraph using the "padding-right:" property

7. Ensure the dropcap is placed to the left of the rest of the paragraph using the "float:" property and defining it as "left"

8. Style the font of the dropcap using the "font-family:" property

9. To use the dropcap, simply type a paragraph in the class using "<p class="fancy">"

1
Custom List Bullets in CSS
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS.

1. Begin with a normal unordered list; the default bullet point is a solid circle

2. In the CSS, create a defined class of unordered list by typing "ul.Square"

3. Define the shape of the custom bullet point by using the "list-style-type:" property. For a square bullet point, define the property as "square"; you can also type "disc" for a hollow circle

4. To set an image as your bullet point, use the "list-style-image:" property. Set the image using url('Image.PNG'); format

0
Corner Ribbon Effect in CSS
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS

1. Create a new class by typing ".Ribbon"

2. Define the class' "display:" as "inline-block"

3. Define its "position:" as "relative"

4. Define its "overflow:" as "hidden" to achieve the "folded-over" effect

5. Define its "padding:" to specify the distance the ribbon will be from the image (how high it'll "hover")

6. Now style all paragraphs within the class by typing ".Ribbon p" - Define its "display:" as "inline-block", its "position:" as "absolute", and place it 0px from the top and -45px from the left. - Define its "text-align:" as "center" - Define "background-color:" to specify a color for the ribbon - Define "width:" to specify the length of the ribbon; for a shorter ribbon in the very corner go with a smaller value - Create the diagonal ribbon effect by defining the "transform:" property to rotate(-45deg). Note that the degree of transformation is the same as the left positioning - Add a drop shadow with the "box-shadow:" property. Note for maximum browser compatibility, both the "transform:" and "box-shadow:" properties will need to be copied over with compatibility prefixes

7. To use the ribbon, in the HTML place both an image and a paragraph inside the <div> tag for the class you created. Inside the paragraph, type the text you want on the ribbon

3
Box Shadow Effect in CSS
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property

1. Start with a normal styled element, such as a div.

2. In the element's style, type the box shadow property: "box-shadow:"

3. Define the shadow's appearance using four different measurements and a color

4. The first pixel measurement is the horizontal position of the shadow; positive values move the shadow to the right and negative values move the shadow to the left of the lement

5. The second pixel measurement is the vertical position of the shadow; positive values move the shadow down and negative values more the shadow to the top of the element

6. The third pixel measurement is optional, but it adjusts the blur of the shadow; a value of 0 will lead to a shadow with straight edges; a higher value will lead to a blurrier, less defined shadow

7. The third pixel measurement is also optional and adjusts the overall size of the shadow; a larger value will result in a more spread out shadow that is further from the element

8. The color can be defined by a hex code or even an RGBA value

9. For maximum browser compatibility, the box-shadow property should be copied and pasted, each time with a different compatibility prefix (-webkit-, -moz-, and -o-)

4
Free Tool: SSL Checker
LVL 10
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Alpha Transparency in CSS
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS

1. Start with a normal styled element, such as a div.

2. Define its "background-color" property as "rgba (255, 255, 255, .5)

3. The numbers in the parentheses symbolize the Red, Green, Blue, and Alpha Transparency values of the color

4. To find the RGB values of a color, you can use Adobe Photoshop in RGB Color mode and use the Color window (Windows > Color)

5. The RGB combination (255, 255, 255) indicates white; (0, 0, 0) would indicate black

6. The Alpha value is for transparency and must be a number from 0 through 1; 0 indicates complete transparency while 1 indicates a completely opaque element so .5 will be 50% transparent

7. Using different numbers for the R, G, and/or B values will result in a colored translucent background

0
Creating an Image Sprite
In this Micro Tutorial viewers will learn how to create a CSS image sprite
(In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite)

1. Open a new Photoshop document with a width of (Icon width)x(Number of icons) and height of 2x(Icon height)

2. Click and drag to create guides that divide the canvas into equal boxes, one for each icon

3. Use the shape tool to create a base for a button in the top left box

4. Select the shape, hold down Shift+Alt, and click and drag to duplicate

5. Add text to the top left shape using the Text tool

6. Select the text, hold down Shift+Alt, and click and drag to duplicate

7. Edit the text for each button

8. Select all layers, hold down Shift+Alt, and click and drag to the second row to create the hover icons

9. Select one of the hover icon layers, right click, and select Blending Options to apply an effect

10. Right click on the layer again and select Copy Layer Style

11. Right click on the other hover icon layers and select Paste Layer Style

12. Save the icon as a transparent image

13. In a text document, note the height, width, and (x,y) coordinates of each icon

0
Using z-index Positioning in CSS
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.

1. Create a new HTML document with an internal stylesheet.

2. Create a div in CSS and name it Red. Define its position as relative. Define its position as top:10px and left:50px. Define its dimensions 500px by 500px. Define its background-color as red.

3. Create another div and name it Blue. Define its position as absolute. Define its position as top:40px and left:20px. Define its dimensions as 300px by 300px. Define its background-color as blue.

4. Create another div and name it Yellow. Define its position as relative. Define its position as top:30px and left:20px. Define its dimensions as 100px by 100px. Define its background-color as yellow.

5. Create another div and name it Green. Define its position as absolute. Define its position as top:200px and left:100px. Define its dimensions as 50px by 50px. Define its background-color as green.

6. In the HTML, type the tags for all of the divs. Place the Yellow div inside the Red div. Place the Green div before the Blue div.

7. Define div.Red's z-index as 1. Define div.Blue's z-index as 2. Define div.Yellow's z-index as 100. Define div.Green's z-index as 100.

8. When the Green div's z-index is default, it appears below the Blue div because of normal CSS stacking rules. When its z-index is set higher than the Blue z-index, it appears on top of the Blue div. The Yellow div doesn't appear on top of the Blue div despite its higher z-index because its nexted inside the Red div, which has a lower z-index.

0
Navigation Hover Effects with CSS Sprites
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS
(Continuation of the CSS Image Sprite tutorial)

1. Create a parent ID for all the list items - Specify position: absolute and display: block

2. Style all the links in the parent ID to have equal height and display:block as well

3. Specify IDs for each icon - For each ID, specify the width of the icon and the left-position of it - Set the image as the background of the list item, but specify the location of the icon within the image

4. Specify a:hover properties for each ID - Copy the background property of the original IDs, just adjust the y coordinate

5. Set up the list in HTML - Use an unordered list with the parent ID and list items with the IDs created for each icon

1
Creating Scalable Full-Width Header in CSS3
In this tutorial viewers will learn how add a scalable full-width header using CSS3.

1. Create a new HTML document with an internal stylesheet. Set a tiled background.

2. Create a new div and name it Header. Position it with position:absolute at the top left of the page.

3. Define its height as 500px and width as 100%.

4. Define its background image using the background: property. Use a high resolution image. Before closing the background property, specify the image as no-repeat and centered.

5. Define the background-size property as cover.

6. For browser compatibility, copy the background-size property with prefixes of -webkit-, -moz-, and -o-.

7. Add an optional border and box-shadow for effect.

8. In the HTML, type the tag for the Header div.

1
 
LVL 34

Expert Comment

by:Mike Eghtebas
Thank you.
0
Creating Scalable Full-Page Backgrounds in CSS3
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3.

1. Create a new HTML document with an internal stylesheet.

2. In CSS, define the html element to have a background image. Use a high resolution image.

3. In the same background property specify it as no-repeat, centered, and fixed.

4. Define the background-size property (unique to CSS3) as "cover".

5. Redefine the background-size property with prefixes of -webkit-, -moz-, and -o- for browser compatibility.

6. Create a div and name it Content. Set its width as 40%, height as 100%, position to absolute, and left to 25%. Define its background color as white.

7. In the HTML type the tag for the Content div.

1
Creating Gradients in CSS
In this tutorial viewers will learn how to define a gradient in CSS.

1. Create a new HTML document with an internal stylesheet.

2. Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you specify a direction and start and end colors.

3. Create a new div in CSS and name it Gradient2. Define the background as "linear-gradient(45deg, #ee3668, black, rgba(255,0,0,1))" This is an example of multiple color stops and transparency.

4. Create a new div in CSS and name it Gradient3. Define the background as "radial-gradient(#ee3668 10%, white 45%, black)". Ensure you specify colors and percentages. This is an example of a radial gradient with defined color stops.

5. Style the h1 element to be white text.

6. In the HTML, type the tag for the Gradient div. Inside the Gradient div, type some text inside an h1 tag. Do the same for the other divs.

1
Using @font-face in CSS to Embed Custom Fonts
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS

1. Select a font

2. Ensure the EULA allows you to use @font-face

3. Download the font

4. Get the browser-compatible files you need

5. Edit your CSS - Name the font - Reference the font files - Specify the formats

6. Style other elements in CSS

7. Save and refresh to view changes

0

CSS

40K

Solutions

15K

Contributors

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.