Create CSS

A Cascading Style Sheet (CSS) is a system for website coding that allows designers to manipulate several features at once by assigning certain elements to groups. For instance, by using a code for the website background, designers can change the background color or image on all pages of the website with one change to the CSS file. Here's how to create CSS for a basic website.

Steps

Writing Inline CSS

  1. Be sure you have a basic understanding of HTML tags. You should know how tags work and of the src and href attributes.
  2. Learn some of the basic CSS properties. You will find that there are very many properties. However, it is not necessary to learn them all.
    • Some good basic CSS properties to know are color and font-family.
  3. Learn about values for each respective property. All properties need a value. For the color property, for example, you might put the red value.
  4. Learn about the style HTML attribute. It is used within an element like href or src. To use it, within the quotation marks after the equal sign, put the CSS attribute, a colon, and then the value of the property. This is known as a CSS rule.
  5. Understand that inline CSS is not usually used for websites by professional web developers. Inline CSS can add unnecessary clutter to an HTML document. However, it is a great way to get introduced to how CSS works.

Writing Basic CSS

  1. Launch the program you desire to use. It should allow you to create HTML and CSS files.
    • If you don't have a special program installed, you can use Notepad or another text editor. Simply save your file both as a text file and a CSS file.
  2. Open the HTML file for your website. You should open this with an HTML editor as well, if you have one installed.
    • HTML editors allow you to edit HTML and CSS at the same time.
  3. Create a <style> tag within your HTML head. This will let you write CSS without the need for a separate file.
  4. Choose an element you want to add styling to and type the name of the element followed by a set of curly braces ({ }). To make your code more legible, always put the second curly brace on its own line.
  5. Between the braces, type your CSS rules as you would using the style attribute. Each line must end with a semicolon (;). To make your code legible, each rule should start on its own line and each line should be indented.
    • It is very important to note that this styling will affect all elements of the selected type on the page. More specific styling will be covered in the next section.

More Advanced CSS

  1. Create a CSS file, not an HTML file and save it using the .css extension. Open your HTML file as well.
  2. Create a <link> tag in your HTML head. This will allow you to link a separate CSS file to your HTML document. Your link tag needs three attributes: rel, type, and href.
    • rel means "relationship" and tells the browser what the relationship is to the HTML document. Here it should have a value of "stylesheet".
    • type tells what type of media is being linked to. Here it should have a value of "text/css"
    • href here is used similarly to how it is used in an <a> element, but here it must link to a CSS file. If the CSS file is located in the same folder as the HTML file, only the file name needs to be written within the quotation marks.
  3. Select elements of different types you want to add the same styling to. Add a class attribute to these elements and set them equal to a class name of your choice. This will give your elements the same styling.
  4. Assign what styling a class will receive. Type the class name in your CSS file with a period (.) preceding it (i.e. .class).
  5. Select single elements you want to add special styling to and add an id attribute. Id's are created in CSS using a pound symbol (#) rather than a period.
    • Id's are more specific than classes, so an id will override any class styling if it has an attribute with a different value than the class.

Learning More

  1. Visit the w3 schools. It is an official website aimed at teaching web development skills. The w3 has plenty of references listed for HTML and CSS, as well as other web languages.
  2. Find other sites specifically aimed at learning and teaching HTML and CSS. Sites like CSS tricks.com specifically are aimed at teaching CSS and web design skills. Finding reputable sources will help you on your learning journey.
  3. Get in touch with web designers and developers. Their experience and know-how can teach you valuable knowledge and skills.
  4. View the source code of websites you come across. Viewing the CSS of well-developed websites can show you ways to design parts of websites. Copying it down as practice and fiddling with the code can help you learn how to use different CSS attributes.



Tips

  • There are many different properties that you can manipulate with CSS. Find a website with a style you like and view the source file. If there is a CSS file name linked at the top inside the HEAD tags, you can click on it to see the different properties and values assigned to the elements.

Warnings

  • Directly copying HTML and CSS coding can help you learn, but you must use your own design ideas. Taking someone else's design is theft and plagiarism.

Related Articles

You may like

Retrieved from "https://kipkis.com/index.php?title=Create_CSS&oldid=352936"